Official Sentry SDK for Remix
![npm dt](https://img.shields.io/npm/dt/@sentry/remix.svg)
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.5.0
Important Changes
- feat(react): Add React 19 to peer deps (#12207)
This release adds support for React 19 in the @sentry/react
SDK package.
- feat(node): Add
@sentry/node/preload
hook (#12213)
This release adds a new way to initialize @sentry/node
, which allows you to use the SDK with performance
instrumentation even if you cannot call Sentry.init()
at the very start of your app.
First, run the SDK like this:
node --require @sentry/node/preload ./app.js
Now, you can initialize and import the rest of the SDK later or asynchronously:
const express = require('express');
const Sentry = require('@sentry/node');
const dsn = await getSentryDsn();
Sentry.init({ dsn });
For more details, head over to the
PR Description of the new feature. Our docs will be updated
soon with a new guide.
Other Changes
- feat(browser): Do not include metrics in base CDN bundle (#12230)
- feat(core): Add
startNewTrace
API (#12138) - feat(core): Allow to pass custom scope to
captureFeedback()
(#12216) - feat(core): Only allow
SerializedSession
in session envelope items (#11979) - feat(nextjs): Use Vercel's
waitUntil
to defer freezing of Vercel Lambdas (#12133) - feat(node): Ensure manual OTEL setup works (#12214)
- fix(aws-serverless): Avoid minifying
Module._resolveFilename
in Lambda layer bundle (#12232) - fix(aws-serverless): Ensure lambda layer uses default export from
ImportInTheMiddle
(#12233) - fix(browser): Improve browser extension error message check (#12146)
- fix(browser): Remove optional chaining in INP code (#12196)
- fix(nextjs): Don't report React postpone errors (#12194)
- fix(nextjs): Use global scope for generic event filters (#12205)
- fix(node): Add origin to redis span (#12201)
- fix(node): Change import of
@prisma/instrumentation
to use default import (#12185) - fix(node): Only import
inspector
asynchronously (#12231) - fix(replay): Update matcher for hydration error detection to new React docs (#12209)
- ref(profiling-node): Add warning when using non-LTS node (#12211)