Solid Router

Learn about Sentry's Solid Router integration.

The routing instrumentation supports Solid Router 0.13.4 and up.

The Sentry 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.

To get started, import solidRouterBrowserTracingIntegration from @sentry/solid/solidrouter and add it to Sentry.init instead of the regular Sentry.browserTracingIntegration to enable performance tracing.

Import withSentryRouterRouting from @sentry/solid/solidrouter and use it to wrap Router, MemoryRouter or HashRouter from @solidjs/router. This creates a higher order component, which will enable Sentry to reach your router context.

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

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [solidRouterBrowserTracingIntegration()],
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
});

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

render(
  () => (
    <SentryRouter>
      <Route path="/" component={App} />
      ...
    </SentryRouter>
  ),
  document.getElementById("root"),
);
Previous
Solid Error Boundary
Next
Set Up Tracing
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").