@sentry/solid
TypeScript icon, indicating that this package has built-in type declarations

8.19.0 • Public • Published

Sentry

Official Sentry SDK for Solid (EXPERIMENTAL)

npm version npm dm npm dt

This SDK is considered ⚠️ experimental and in an alpha state. It may experience breaking changes. Please reach out on GitHub if you have any feedback or concerns. This SDK currently only supports Solid and is not yet officially compatible with Solid Start.

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @sentry/solid

Weekly Downloads

556

Version

8.19.0

License

MIT

Unpacked Size

42.5 kB

Total Files

30

Last publish

Collaborators

  • benvinegar
  • billyvg
  • mitsuhiko
  • haza
  • jauer
  • sentry-bot
  • evanpurkhiser
  • lynnagara
  • leedongwei
  • markstory
  • zeeg