Skip to content

Using Spotlight with Other Frameworks

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:

  1. Install and initialize the Overlay.
  2. Run the Sidecar concurrently with your development server.
  3. Configure Sentry’s SDKs to send to Spotlight by passing spotlight=True.

1. Installation

Start by installing the @spotlightjs/spotlight package in your existing frontend application.

Terminal window
npm add @spotlightjs/spotlight

2. Configuration

Inject the Spotlight overlay into your application:

If your bundler supports it, its recommended to do a dynamic import to aid tree-shaking:

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

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.

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.

Bonus: Leverage Sentry SDKs

To get the most value out of Spotlight, configure Sentry’s SDKs. You don’t have to use sentry.io but you can use the them to just power Spotlight.

Web platforms

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.

Sentry.init({
dsn: '___DSN___',
});
// In the frontend it's important that you init Spotlight after Sentry
Spotlight.init();

Mobile platforms

SentryAndroid.init(this, options -> {
options.setDsn("___DSN___");
// You should only enable this in your development environment
options.isEnableSpotlight = BuildConfig.DEBUG;
});

You also need to allow cleartext traffic from your emulator to the Sidecar on your host machine by adding the following to src/debug/res/xml/network.xml:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<!-- Allow cleartext traffic from the emulator to the host machine -->
<!-- See https://developer.android.com/studio/run/emulator-networking for more details -->
<domain includeSubdomains="true">10.0.2.2</domain>
</domain-config>
</network-security-config>