Spotlight can be utilized in any stack, but in particular is well supported anywhere Sentry integration exists.
There’s a few steps to get started:
- Install and initialize the Overlay.
- Run the Sidecar concurrently with your development server.
- Configure Sentry’s SDKs to send to Spotlight by passing
Configure the Overlay
Start by installing the
@spotlightjs/spotlight package in your existing frontend application.
Inject the Spotlight overlay into your application:
If your bundler supports it, its recommended to do a dynamic import to aid tree-shaking:
Upon loading your UI you should now see the Spotlight toolbar in bottom-right corner of your application.
For more options on how to configure Spotlight’s UI, see Configuration.
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.
Leverage Sentry SDKs
To get the most value out of Spotlight, configure Sentry’s SDKs. You don’t need to be using the Sentry service to take advantage of Sentry’s SDKs to power Spotlight.
In the Browser you don’t need to set
Spotlight.init() will automatically detect if Sentry is available and if so, hook into the SDK.
You also need to allow cleartext traffic from your emulator to the Sidecar on your host machine by adding the following to