Official Sentry SDK for Solid


This SDK is in Beta. The API is stable but updates may include minor changes in behavior. Please reach out on
GitHub if you have any feedback or concerns. This
SDK is for Solid. If you're using SolidStart see our
SolidStart SDK here.

Solid Router

The Solid Router instrumentation uses the Solid Router library to create navigation spans to ensure you collect
meaningful performance data about the health of your page loads and associated requests.

Add solidRouterBrowserTracingIntegration instead of the regular Sentry.browserTracingIntegration.

Make sure solidRouterBrowserTracingIntegration is initialized by your Sentry.init call. Otherwise, the routing
instrumentation will not work properly.

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

``js
import * as Sentry from '@sentry/solid';
import { solidRouterBrowserTracingIntegration, withSentryRouterRouting } from '@sentry/solid/solidrouter';
import { Route, Router } from '@solidjs/router';

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

const SentryRouter = Sentry.withSentryRouterRouting(Router);

render(
() => (


...

),
document.getElementById('root'),
);
`

$3

The Tanstack Router instrumentation uses the Tanstack Router library to create navigation spans to ensure you collect
meaningful performance data about the health of your page loads and associated requests.

Add tanstackRouterBrowserTracingIntegration instead of the regular Sentry.browserTracingIntegration.

Make sure tanstackRouterBrowserTracingIntegration is initialized by your Sentry.init call. Otherwise, the routing
instrumentation will not work properly.

Pass your router instance from createRouter to the integration.

`js
import * as Sentry from '@sentry/solid';
import { tanstackRouterBrowserTracingIntegration } from '@sentry/solid/tanstackrouter';

const router = createRouter({
// your router config
// ...
});

declare module '@tanstack/solid-router' {
interface Register {
router: typeof router;
}
}

Sentry.init({
dsn: '__PUBLIC_DSN__',
integrations: [tanstackRouterBrowserTracingIntegration(router)],
tracesSampleRate: 1.0, // Capture 100% of the transactions
});

render(() => , document.getElementById('root'));
`

Solid ErrorBoundary

To automatically capture exceptions from inside a component tree and render a fallback component, wrap the native Solid
JS ErrorBoundary component with Sentry.withSentryErrorBoundary.

`js
import * as Sentry from '@sentry/solid';
import { ErrorBoundary } from 'solid-js';

Sentry.init({
dsn: '__PUBLIC_DSN__',
tracesSampleRate: 1.0, // Capture 100% of the transactions
});

const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary);

render(
() => (


}>


),
document.getElementById('root'),
);
``

Sourcemaps and Releases

To generate and upload source maps of your Solid JS app bundle, check our guide
how to configure your bundler
to emit source maps.