Using Spotlight with SvelteKit

This guide gets Spotlight up and running in SvelteKit with Sentry. You don’t strictly need Sentry for Spotlight to work but we highly recommend it.

1. Installation

Install Sentry

Follow the Sveltekit Getting Started guide to install and configure Sentry.

Install Spotlight

Install the Spotlight package:

npm

npm add @spotlightjs/spotlight

pnpm

pnpm add @spotlightjs/spotlight

yarn

yarn add @spotlightjs/spotlight

2. Configuration

Initialize Spotlight after Sentry and start the Sidecar on the server. Just add a little code to your SvelteKit hooks files:

Client

hooks.client.js

import * as Sentry from '@sentry/sveltekit';
import * as Spotlight from '@spotlightjs/spotlight';

Sentry.init({
  dsn: '___DSN___',
  tracesSampleRate: 1.0,
  // ...your Sentry options
});

export const handleError = Sentry.handleErrorWithSentry();

if (import.meta.env.DEV) {
  Spotlight.init({
    injectImmediately: true,
  });
}

Server

hooks.server.js

import * as Sentry from '@sentry/sveltekit';
import { setupSidecar } from '@spotlightjs/spotlight/sidecar';

Sentry.init({
  dsn: '___DSN___',
  tracesSampleRate: 1.0,
  // ...your Sentry options
  spotlight: import.meta.env.DEV
});

export const handleError = Sentry.handleErrorWithSentry();
export const handle = Sentry.sentryHandle();

if (import.meta.env.DEV) {
  setupSidecar();
}

That’s it! Check out the Configuration to further customize Spotlight.