@sentry/solid
v8.40.0
Published
Official Sentry SDK for Solid
Downloads
6,427
Maintainers
Keywords
Readme
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.
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(
() => (
<SentryRouter>
<Route path="/" component={App} />
...
</SentryRouter>
),
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
.
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(
() => (
<SentryErrorBoundary fallback={err => <div>Error: {err.message}</div>}>
<ProblematicComponent />
</SentryErrorBoundary>
),
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.