Skip to main content
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>

<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

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>

​
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:
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,
  },
});
Then upload source maps using sentry-cli: 
sentry-cli sourcemaps upload \
  --org your-org \
  --project your-project \
  ./dist

​
Configuration Options

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

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  
  // Environment
  environment: 'production',
  release: '[email protected]',
  
  // 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

Build docs developers (and LLMs) love

Get started for freeTalk to us