Spotlight started out as a Hackweek project at Sentry:
Spotlight is Sentry for Development. Inspired by an old project, Django Debug Toolbar, Spotlight brings a rich debug overlay into development environments, and it does it by leveraging the existing power of Sentry’s SDKs.
One of the great benefits of this approach is you get the power of Sentry’s telemetry without needing to utilize Sentry’s production monitoring. To added benefit, if you do decide you need production monitoring, you can simply configure the already-present SDKs with an upstream API key and you’re off to the races!
At a high level, Spotlight consists of two components:
An overlay (
@spotlightjs/overlay) that renders inside of your application. The overlay is a simple React application, and can seamlessly run in any web application (or even independently!).
A proxy server (
@spotlightjs/sidecar) which enables push-based communication to the overlay. This is achieved via a simple HTTP relay, allowing SDKs to push events to it, and allowing the overlay 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 use Spotlight.
This means that adoption in most projects is as simple as adding a single dependency:
Registering Spotlight in your frontend application:
Running the sidecar in the background:
The overlay itself behaves a little differently from Sentry. That’s intentional both because this is for local development, but also because the project is completely independent of Sentry (other than our guaranteed support).
Spotlight can show you errors, traces, configurations settings, installed dependencies, you name it. Spotlight is developed with customizablity in mind, so you can add your own integrations to it.