Using Spotlight with Remix

1. Installation

Follow the Remix Getting Started guide on Sentry, and continue from there.

Note

This guide is focused on Remix without Vite. It needs Vite added to the documentation, but the steps should be similar.

npm

npm add @spotlightjs/spotlight

pnpm

pnpm add @spotlightjs/spotlight

yarn

yarn add @spotlightjs/spotlight

2. Configuration

Initialize Spotlight within entry.client.js, after you’ve hydrated the document:

Client

In the Browser you don’t need to set spotlight: true, Spotlight.init() will automatically detect if Sentry is available and if so, hook into the SDK.

// entry.client.(js/ts)
import * as Sentry from "@sentry/remix";

Sentry.init({
    dsn: "__DSN__",
    // ...other Sentry options
})

startTransition(() => {
  hydrateRoot(document, <RemixBrowser />);
});

if (process.env.NODE_ENV === "development") {
  import("@spotlightjs/spotlight").then((Spotlight) =>
    Spotlight.init({ injectImmediately: true }),
  );
}

Server

// entry.server.(js/ts)
import * as Sentry from '@sentry/remix';

Sentry.init({
  dsn: '___DSN___',
  spotlight: process.env.NODE_ENV === 'development'
  // ...other Sentry options
});

3. Run the Sidecar

Spotlight’s architecture requires a sidecar to be running alongside your service. This is to enable streaming data collection from your backend services into the Spotlight overlay.

Vite

Webpack

Other