Solid Router

The Solid SDK provides a routing instrumentation for Solid Router to create navigation spans to ensure you collect meaningful performance data about the health of your page loads and associated requests.

The routing instrumentation supports Solid Router 0.13.0 and up.

To get started, add Sentry.solidRouterBrowserTracingIntegration instead of the regular Sentry.browserTracingIntegration and provide the hooks it needs to enable performance tracing:

• useBeforeLeave from @solidjs/router
• useLocation from @solidjs/router

Make sure Sentry.solidRouterBrowserTracingIntegration is initialized by your Sentry.init call, before you wrap Router. Otherwise, the routing instrumentation may not work properly.

Wrap Router, MemoryRouter or HashRouter from @solidjs/router using Sentry.withSentryRouterRouting. This creates a higher order component, which will enable Sentry to reach your router context.

import * as Sentry from "@sentry/solid";
import {
  Route,
  Router,
  useBeforeLeave,
  useLocation,
} from "@solidjs/router";
import { render } from "solid-js/web";
import App from "./app";

Sentry.init({
  dsn: "__PUBLIC_DSN__",
  integrations: [
    Sentry.solidRouterBrowserTracingIntegration({
      useBeforeLeave,
      useLocation,
    }),
  ],
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
});

// Wrap Solid Router to collect meaningful performance data on route changes
const SentryRouter = Sentry.withSentryRouterRouting(Router);

render(
  () => (
    <SentryRouter>
      <Route path="/" component={App} />
      ...
    </SentryRouter>
  ),
  document.getElementById("root"),
);