Add Sentry for error tracking and monitoring

[michaeldistel]

Problem

No error tracking means:

• Production errors invisible
• User issues unreported
• No stack traces for debugging
• Can't prioritize bug fixes

Solution

Integrate Sentry for error monitoring:

pnpm add @sentry/sveltekit

Configuration

// src/hooks.client.ts
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN,
  environment: import.meta.env.MODE,
  tracesSampleRate: 0.1, // 10% of transactions
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0, // 100% of errors
  integrations: [
    new Sentry.BrowserTracing(),
    new Sentry.Replay()
  ],
  beforeSend(event) {
    // Filter out dev environment
    if (import.meta.env.DEV) return null;
    return event;
  }
});

// src/hooks.server.ts
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
  dsn: import.meta.env.SENTRY_DSN,
  tracesSampleRate: 1.0
});

export const handleError = Sentry.handleErrorWithSentry();

Error Boundaries

<!-- src/routes/+error.svelte -->
<script>
  import * as Sentry from '@sentry/sveltekit';
  import { page } from '$app/stores';
  
  $: if ($page.error) {
    Sentry.captureException($page.error);
  }
</script>

Manual Error Capture

// Track Monaco initialization failures
try {
  await loadMonaco();
} catch (err) {
  Sentry.captureException(err, {
    tags: { component: 'monaco-editor' },
    level: 'error'
  });
}

What to Track

• Client-side errors
• Server-side errors
• Monaco Editor failures
• Network failures
• 404 errors (breadcrumb, not error)
• Performance issues (optional)

Privacy

• Don't capture sensitive data
• Sanitize user input
• Session replay opt-in only
• GDPR compliant

Success Criteria

• Sentry initialized in production
• Errors appear in Sentry dashboard
• Source maps uploaded for debugging
• Alerts configured for critical errors
• Performance monitoring enabled