Official Sentry SDK for Remix

General
This package is a wrapper around @sentry/node
for the server and @sentry/react
for the client, with added
functionality related to Remix.
To use this SDK, initialize Sentry in your Remix entry points for both the client and server.
import { useLocation, useMatches } from '@remix-run/react';
import * as Sentry from '@sentry/remix';
import { useEffect } from 'react';
Sentry.init({
dsn: '__DSN__',
tracesSampleRate: 1,
integrations: [
Sentry.browserTracingIntegration({
useEffect,
useLocation,
useMatches,
}),
],
});
import { prisma } from '~/db.server';
import * as Sentry from '@sentry/remix';
Sentry.init({
dsn: '__DSN__',
tracesSampleRate: 1,
integrations: [new Sentry.Integrations.Prisma({ client: prisma })],
});
Also, wrap your Remix root with withSentry
to catch React component errors and to get parameterized router
transactions.
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import { withSentry } from "@sentry/remix";
function App() {
return (
<html>
<head>
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
export default withSentry(App);
You can disable or configure ErrorBoundary
using a second parameter to withSentry
.
withSentry(App, {
wrapWithErrorBoundary: false
});
withSentry(App, {
errorBoundaryOptions: {
fallback: <p>An error has occurred</p>
}
});
To set context information or send manual events, use the exported functions of @sentry/remix
.
import * as Sentry from '@sentry/remix';
Sentry.setExtra('battery', 0.7);
Sentry.setTag('user_mode', 'admin');
Sentry.setUser({ id: '4711' });
Sentry.addBreadcrumb({
message: 'My Breadcrumb',
});
Sentry.captureMessage('Hello, world!');
Sentry.captureException(new Error('Good bye'));
Sentry.captureEvent({
message: 'Manual',
stacktrace: [
],
});
Sourcemaps and Releases
The Remix SDK provides a script that automatically creates a release and uploads sourcemaps. To generate sourcemaps with
Remix, you need to call remix build
with the --sourcemap
option.
On release, call sentry-upload-sourcemaps
to upload source maps and create a release. To see more details on how to
use the command, call sentry-upload-sourcemaps --help
.
For more advanced configuration,
directly use sentry-cli
to upload source maps..
8.31.0
Important Changes
- feat(node): Add
dataloader
integration (#13664)
This release adds a new integration for the dataloader
package. The Node
SDK (and all SDKs that depend on it) will now automatically instrument dataloader
instances. You can also add it
manually:
Sentry.init({
integrations: [Sentry.dataloaderIntegration()],
});
Other Changes
- feat(browser): Add navigation
activationStart
timestamp to pageload span (#13658) - feat(gatsby): Add optional
deleteSourcemapsAfterUpload
(#13610) - feat(nextjs): Give app router prefetch requests a
http.server.prefetch
op (#13600) - feat(nextjs): Improve Next.js serverside span data quality (#13652)
- feat(node): Add
disableInstrumentationWarnings
option (#13693) - feat(nuxt): Adding
experimental_basicServerTracing
option to Nuxt module (#13643) - feat(nuxt): Improve logs about adding Node option 'import' (#13726)
- feat(replay): Add
onError
callback + other small improvements to debugging (#13721) - feat(replay): Add experimental option to allow for a checkout every 6 minutes (#13069)
- feat(wasm): Unconditionally parse instruction addresses (#13655)
- fix: Ensure all logs are wrapped with
consoleSandbox
(#13690) - fix(browser): Try multiple options for
lazyLoadIntegration
script parent element lookup (#13717) - fix(feedback): Actor color applies to feedback icon (#13702)
- fix(feedback): Fix form width on mobile devices (#13068)
- fix(nestjs): Preserve original function name on
SentryTraced
functions (#13684) - fix(node): Don't overwrite local variables for re-thrown errors (#13644)
- fix(normalize): Treat Infinity as NaN both are non-serializable numbers (#13406)
- fix(nuxt): Use correct server output file path (#13725)
- fix(opentelemetry): Always use active span in
Propagator.inject
(#13381) - fix(replay): Fixes potential out-of-order segments (#13609)
Work in this release was contributed by @KyGuy2002, @artzhookov, and @julianCast. Thank you for your contributions!