Skip to content
Spotlight
by Sentry

Architecture of Spotlight

Spotlight Architecture

Description

At a high level, Spotlight consists of two components:

  1. A standalone UI (@spotlightjs/overlay) that runs independently in your browser or as a desktop application. The UI is a React application that displays your application’s telemetry data in real-time.

  2. A proxy server (@spotlightjs/sidecar) which receives telemetry from your application and streams it to the UI. This is achieved via a simple HTTP relay, allowing SDKs to push events to it, and allowing the UI to receive events using server-sent events.

For convenience, these packages are combined in a single package (@spotlightjs/spotlight), which is the recommended way to run Spotlight. This means that adoption in most projects is as simple as:

Terminal window
# Run the Spotlight sidecar with UI
npx @spotlightjs/spotlight


# Or install globally
npm install -g @spotlightjs/spotlight
spotlight

Enabling Spotlight in your application’s SDK:

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


// Enable Spotlight for development
Sentry.init({
  dsn: 'your-dsn',
  spotlight: process.env.NODE_ENV === 'development',
});

Or simply set the environment variable:

Terminal window
export SENTRY_SPOTLIGHT=1

You can send any kind of events to the Sidecar, it forwards them to the Spotlight UI where integrations process and display the data.

Sidecar Understand what the sidecar does

Spotlight by default has a Sentry integration, if you are using a Sentry SDK and enable the Spotlight connection (only required on the Server), Spotlight is able to render Traces/Errors and more in your frontend.