Svelte SDK

The Sentry Svelte SDK provides error monitoring and performance tracking for standalone Svelte applications. For SvelteKit projects, use the @sentry/sveltekit SDK.

Installation

npm install @sentry/svelte

Basic Setup

Initialize Sentry in your entry point (main.js or main.ts) before bootstrapping your Svelte app:

// main.ts
import * as Sentry from '@sentry/svelte';
import App from './App.svelte';

// Initialize Sentry before creating your app
Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
  
  // Performance Monitoring
  tracesSampleRate: 1.0,
  
  // Session Replay
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

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

export default app;

Error Tracking

Automatic Error Capture

Uncaught errors are automatically captured:

<script>
  // This error will be automatically captured
  function handleClick() {
    throw new Error('Button click error');
  }
</script>

<button on:click={handleClick}>
  Click me
</button>

Manual Error Capture

<script>
  import * as Sentry from '@sentry/svelte';
  
  async function loadData() {
    try {
      const response = await fetch('/api/data');
      const data = await response.json();
      return data;
    } catch (error) {
      Sentry.captureException(error, {
        tags: {
          component: 'DataLoader',
          action: 'loadData',
        },
      });
    }
  }
</script>

Performance Monitoring

Browser Tracing

Track page load and navigation performance:

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

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  
  integrations: [
    Sentry.browserTracingIntegration({
      // Track interactions and long tasks
      enableInp: true,
    }),
  ],
  
  tracesSampleRate: 1.0,
  tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
});

Custom Performance Spans

<script>
  import * as Sentry from '@sentry/svelte';
  import { onMount } from 'svelte';
  
  let data = [];
  
  onMount(async () => {
    await Sentry.startSpan(
      {
        name: 'fetch-initial-data',
        op: 'http.client',
      },
      async () => {
        const response = await fetch('/api/data');
        data = await response.json();
      },
    );
  });
</script>

Context & Breadcrumbs

User Context

<script>
  import * as Sentry from '@sentry/svelte';
  import { onMount } from 'svelte';
  
  export let user;
  
  $: if (user) {
    Sentry.setUser({
      id: user.id,
      email: user.email,
      username: user.username,
    });
  }
  
  function logout() {
    Sentry.setUser(null);
  }
</script>

Custom Context & Tags

<script>
  import * as Sentry from '@sentry/svelte';
  import { onMount } from 'svelte';
  
  onMount(() => {
    // Set custom context
    Sentry.setContext('app_state', {
      theme: 'dark',
      language: 'en',
    });
    
    // Add tags
    Sentry.setTag('environment', 'production');
    Sentry.setTag('feature_flag', 'new-ui');
  });
</script>

Breadcrumbs

<script>
  import * as Sentry from '@sentry/svelte';
  
  function handleNavigation(page) {
    Sentry.addBreadcrumb({
      category: 'navigation',
      message: `User navigated to ${page}`,
      level: 'info',
    });
  }
  
  function handleAction(action) {
    Sentry.addBreadcrumb({
      category: 'ui.click',
      message: `User clicked ${action}`,
      level: 'info',
      data: {
        timestamp: Date.now(),
      },
    });
  }
</script>

Session Replay

Capture session replays to understand user behavior:

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

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  
  integrations: [
    Sentry.replayIntegration({
      // Mask all text content
      maskAllText: true,
      
      // Block all media elements
      blockAllMedia: true,
      
      // Additional privacy options
      maskAllInputs: true,
    }),
  ],
  
  // Capture 10% of all sessions
  replaysSessionSampleRate: 0.1,
  
  // Capture 100% of sessions with errors
  replaysOnErrorSampleRate: 1.0,
});

Svelte Stores Integration

Track store updates:

<script>
  import * as Sentry from '@sentry/svelte';
  import { writable } from 'svelte/store';
  
  // Create a store with Sentry breadcrumbs
  function createTrackedStore(initialValue, name) {
    const store = writable(initialValue);
    
    return {
      subscribe: store.subscribe,
      set: (value) => {
        Sentry.addBreadcrumb({
          category: 'state',
          message: `Store ${name} updated`,
          level: 'info',
          data: { value },
        });
        store.set(value);
      },
      update: (fn) => {
        store.update((current) => {
          const newValue = fn(current);
          Sentry.addBreadcrumb({
            category: 'state',
            message: `Store ${name} updated`,
            level: 'info',
            data: { value: newValue },
          });
          return newValue;
        });
      },
    };
  }
  
  const count = createTrackedStore(0, 'count');
</script>

Advanced Features

User Feedback
HTTP Monitoring
Browser Profiling

Collect feedback from users:

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

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  
  integrations: [
    Sentry.feedbackIntegration({
      autoInject: true,
      colorScheme: 'light',
    }),
  ],
});

Or manually trigger feedback:

<script>
  import * as Sentry from '@sentry/svelte';
  
  function showFeedback() {
    const feedback = Sentry.getFeedback();
    if (feedback) {
      feedback.open();
    }
  }
</script>

<button on:click={showFeedback}>
  Send Feedback
</button>

Track fetch requests:

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

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  
  integrations: [
    Sentry.httpClientIntegration({
      failedRequestStatusCodes: [[400, 599]],
    }),
  ],
});

Profile JavaScript performance:

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

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  
  integrations: [
    Sentry.browserProfilingIntegration(),
  ],
  
  profilesSampleRate: 1.0,
});

Component-Level Error Handling

<script>
  import * as Sentry from '@sentry/svelte';
  import { onMount, onDestroy } from 'svelte';
  
  let error = null;
  let errorBoundary = null;
  
  onMount(() => {
    errorBoundary = (event) => {
      error = event.error;
      Sentry.captureException(event.error, {
        contexts: {
          svelte: {
            component: 'MyComponent',
          },
        },
      });
    };
    
    window.addEventListener('error', errorBoundary);
  });
  
  onDestroy(() => {
    if (errorBoundary) {
      window.removeEventListener('error', errorBoundary);
    }
  });
</script>

{#if error}
  <div class="error-boundary">
    <h2>Something went wrong</h2>
    <p>{error.message}</p>
  </div>
{:else}
  <slot />
{/if}

Source Maps

Generate and upload source maps for better stack traces:

Vite
Rollup

Configure Vite to generate source maps:

// vite.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  
  build: {
    sourcemap: true,
  },
});

Enable source maps in Rollup:

// rollup.config.js
export default {
  // ...
  output: {
    sourcemap: true,
  },
};

Then upload source maps using sentry-cli:

sentry-cli sourcemaps upload \
  --org your-org \
  --project your-project \
  ./dist

Configuration Options

Common Configuration

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

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  
  // Environment
  environment: 'production',
  release: 'my-app@1.0.0',
  
  // Sampling
  tracesSampleRate: 0.2,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  
  // Performance
  tracePropagationTargets: [
    'localhost',
    /^https:\/\/api\.example\.com/,
  ],
  
  // Error Filtering
  ignoreErrors: [
    'ResizeObserver loop limit exceeded',
    /^Non-Error promise rejection/,
  ],
  
  beforeSend(event, hint) {
    // Modify or filter events
    if (event.request) {
      delete event.request.cookies;
    }
    return event;
  },
  
  beforeBreadcrumb(breadcrumb, hint) {
    // Filter or modify breadcrumbs
    if (breadcrumb.category === 'console') {
      return null;
    }
    return breadcrumb;
  },
});

Best Practices

Initialize Early

Call Sentry.init() before creating your Svelte app.

Source Maps

Always generate and upload source maps for production builds.

Store Tracking

Add breadcrumbs for store updates to understand state changes.

Context

Set user context and tags to make debugging easier.

Migration to SvelteKit

If you’re using SvelteKit, switch to the dedicated SDK:

npm uninstall @sentry/svelte
npm install @sentry/sveltekit

See the SvelteKit SDK documentation for setup instructions.

Next Steps

SvelteKit

Upgrade to SvelteKit SDK for full-stack support

Source Maps

Learn how to upload source maps

Session Replay

Set up session replay

Performance

Deep dive into performance monitoring

Browser & Frontend

Server & Backend

Full-Stack Frameworks

Serverless & Edge

Installation

Basic Setup

Error Tracking

Automatic Error Capture

Manual Error Capture

Performance Monitoring

Browser Tracing

Custom Performance Spans

User Context

Custom Context & Tags

Session Replay

Svelte Stores Integration

Advanced Features

Component-Level Error Handling

Source Maps

Configuration Options

Best Practices

Initialize Early

Source Maps

Store Tracking

Context

Migration to SvelteKit

Next Steps

SvelteKit

Source Maps

Session Replay

Performance

Build docs developers (and LLMs) love

Browser & Frontend

Server & Backend

Full-Stack Frameworks

Serverless & Edge

Documentation Index

​Installation

​Basic Setup

​Error Tracking

​Automatic Error Capture

​Manual Error Capture

​Performance Monitoring

​Browser Tracing

​Custom Performance Spans

​Context & Breadcrumbs

​User Context

​Custom Context & Tags

​Breadcrumbs

​Session Replay

​Svelte Stores Integration

​Advanced Features

​Component-Level Error Handling

​Source Maps

​Configuration Options

​Best Practices

Initialize Early

Source Maps

Store Tracking

Context

​Migration to SvelteKit

​Next Steps

SvelteKit

Source Maps

Session Replay

Performance

Build docs developers (and LLMs) love

Installation

Basic Setup

Error Tracking

Automatic Error Capture

Manual Error Capture

Performance Monitoring

Browser Tracing

Custom Performance Spans

Context & Breadcrumbs

User Context

Custom Context & Tags

Breadcrumbs

Session Replay

Svelte Stores Integration

Advanced Features

Component-Level Error Handling

Source Maps

Configuration Options

Best Practices

Migration to SvelteKit

Next Steps