@sentry/svelte

Official Sentry SDK for Svelte

This SDK currently only supports Svelte apps in the browser. If you're using SvelteKit, we recommend using our dedicated Sentry SvelteKit SDK.

General

This package is a wrapper around @sentry/browser, providing error monitoring and basic performance monitoring features for Svelte.

To use the SDK, initialize Sentry in your Svelte entry point main.js before you bootstrap your Svelte app:

// main.js / main.ts

import App from './App.svelte';

import * as Sentry from '@sentry/svelte';

// Initialize the Sentry SDK here
Sentry.init({
  dsn: '__DSN__',
  release: 'my-project-name@2.3.12',
  integrations: [Sentry.browserTracingIntegration()],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
});

// Then bootstrap your Svelte app
const app = new App({
  target: document.getElementById('app'),
});

export default app;

The Sentry Svelte SDK supports all features from the @sentry/browser SDK. Until it becomes more stable, please refer to the Sentry Browser SDK documentation for more information and usage instructions.

Sourcemaps and Releases

To generate source maps of your Svelte app bundle, check our guide how to configure your bundler to emit source maps.

To create releases and upload source maps to Sentry, we recommend using sentry-cli. You can for instance create a bash script to take care of creating a release, uploading source maps and finalizing the release:

#!/bin/bash

VERSION=<your version>
ORG=<your org-slug>
PROJECT=<your project-slug>

SOURCEMAPS_PATH=./dist

sentry-cli releases new $VERSION --org $ORG --project $PROJECT
sentry-cli releases files $VERSION upload-sourcemaps $SOURCEMAPS_PATH --org $ORG --project $PROJECT
sentry-cli releases finalize $VERSION  --org $ORG --project $PROJECT

Please note that the paths provided in this example work for a typical Svelte project that adheres to the project structure set by create-vite with the svelte(-ts) template. If your project setup differs from this template, your configuration may need adjustments. Please refer to our documentation of Advanced sentry-cli Sourcemaps Options and to our Sourcemaps Troubleshooting Guide.

Check out our Svelte source maps uploading guide for more information.

Changelog

9.10.0

Important Changes

• feat: Add support for logs

  • feat(node): Add logging public APIs to Node SDKs (#15764)
  • feat(core): Add support for beforeSendLog (#15814)
  • feat(core): Add support for parameterizing logs (#15812)
  • fix: Remove critical log severity level (#15824)

  All JavaScript SDKs other than @sentry/cloudflare and @sentry/deno now support sending logs via dedicated methods as part of Sentry's upcoming logging product.

  Logging is gated by an experimental option, _experiments.enableLogs.

  Sentry.init({
    dsn: 'PUBLIC_DSN',
    // `enableLogs` must be set to true to use the logging features
    _experiments: { enableLogs: true },
  });
  
  const { trace, debug, info, warn, error, fatal, fmt } = Sentry.logger;
  
  trace('Starting database connection', { database: 'users' });
  debug('Cache miss for user', { userId: 123 });
  error('Failed to process payment', { orderId: 'order_123', amount: 99.99 });
  fatal('Database connection pool exhausted', { database: 'users', activeConnections: 100 });
  
  // Structured logging via the `fmt` helper function. When you use `fmt`, the string template and parameters are sent separately so they can be queried independently in Sentry.
  
  info(fmt(`Updated profile for user ${userId}`));
  warn(fmt(`Rate limit approaching for endpoint ${endpoint}. Requests: ${requests}, Limit: ${limit}`));
  

  With server-side SDKs like @sentry/node, @sentry/bun or server-side of @sentry/nextjs or @sentry/sveltekit, you can do structured logging without needing the fmt helper function.

  const { info, warn } = Sentry.logger;
  
  info('User %s logged in successfully', [123]);
  warn('Failed to load user %s data', [123], { errorCode: 404 });
  

  To filter logs, or update them before they are sent to Sentry, you can use the _experiments.beforeSendLog option.

• feat(browser): Add diagnoseSdkConnectivity() function to programmatically detect possible connectivity issues (#15821)

  The diagnoseSdkConnectivity() function can be used to programmatically detect possible connectivity issues with the Sentry SDK.

  const result = await Sentry.diagnoseSdkConnectivity();
  

  The result will be an object with the following properties:

  • "no-client-active": There was no active client when the function was called. This possibly means that the SDK was not initialized yet.
  • "sentry-unreachable": The Sentry SaaS servers were not reachable. This likely means that there is an ad blocker active on the page or that there are other connection issues.
  • undefined: The SDK is working as expected.

• SDK Tracing Performance Improvements for Node SDKs

  • feat: Stop using dropUndefinedKeys (#15796)
  • feat(node): Only add span listeners for instrumentation when used (#15802)
  • ref: Avoid dropUndefinedKeys for spanToJSON calls (#15792)
  • ref: Avoid using SentryError for PromiseBuffer control flow (#15822)
  • ref: Stop using dropUndefinedKeys in SpanExporter (#15794)
  • ref(core): Avoid using SentryError for event processing control flow (#15823)
  • ref(node): Avoid dropUndefinedKeys in Node SDK init (#15797)
  • ref(opentelemetry): Avoid sampling work for non-root spans (#15820)

  We've been hard at work making performance improvements to the Sentry Node SDKs (@sentry/node, @sentry/aws-serverless, @sentry/nestjs, etc.). We've seen that upgrading from 9.7.0 to 9.10.0 leads to 30-40% improvement in request latency for HTTP web-server applications that use tracing with high sample rates. Non web-server applications and non-tracing applications will see smaller improvements.

Other Changes

• chore(deps): Bump rrweb to 2.35.0 (#15825)
• deps: Bump bundler plugins to 3.2.3 (#15829)
• feat: Always truncate stored breadcrumb messages to 2kb (#15819)
• feat(nextjs): Disable server webpack-handling for static builds (#15751)
• fix(nuxt): Don't override Nuxt options if undefined (#15795)