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.8.0
- feat: Upgrade OTEL dependencies (#12388)
This upgrades the OpenTelemetry dependencies to the latest versions and makes OTEL use import-in-the-middle
v1.8.0
.
This should fix numerous issues with using OTEL instrumentation with ESM.
High level issues fixed with OTEL + ESM:
- incompatibilities with using multiple loaders, commonly encountered while using
tsx
or similar libraries. - incompatibilities with libraries that use duplicate namespace exports like
date-fns
. - incompatibilities with libraries that use self-referencing namespace imports like
openai
. - incompatibilities with dynamic export patterns like exports with function calls.
ENOENT: no such file or directory
bugs that libraries like discord.js
surface.
If you are still encountering issues with OpenTelemetry instrumentation and ESM, please let us know.
- deps: Bump Sentry bundler plugins to version
2.18.0
(#12381) - feat: Add
thirdPartyErrorFilterIntegration
(#12267) - feat(core): Filter out error events with exception values and no stacktraces, values, or types (#12387)
- feat(core): Ignore additional common but inactionable errors (#12384)
- feat(deps): Bump @opentelemetry/propagator-aws-xray from 1.3.1 to 1.24.1 (#12333)
- feat(deps): Bump @sentry/cli from 2.31.2 to 2.32.1 (#12332)
- feat(redis): Support
mget
command in caching functionality (#12380) - feat(vercel-edge): Export core integrations from Vercel edge SDK (#12308)
- fix(browser): Fix idle span ending (#12306)
- fix(browser): Fix parenthesis parsing logic for chromium (#12373)
- fix(browser): Fix types export path for CJS (#12305)
- fix(feedback): Override TriggerLabel Option (#12316)
- fix(feedback): Wait for document to be ready before doing autoinject (#12294)
- fix(nextjs): Fix memory leak (#12335)
- fix(nextjs): Fix version detection and option insertion logic for
clientTraceMetadata
option (#12323) - fix(nextjs): Update argument name in log message about
sentry
property on Next.js config object (#12366) - fix(node): Do not manually finish / update root Hapi spans. (#12287)
- fix(node): Fix virtual parent span ID handling & update create-next-app E2E test (#12368)
- fix(node): Skip capturing Hapi Boom responses v8. (#12288)
- fix(performance): Fix LCP not getting picked up on initial pageload transaction by setting reportAllChanges to true
(#12360)
- fix(replay): Avoid infinite loop of logs (#12309)
- fix(replay): Ignore old events when manually starting replay (#12349)
- ref(browser): Ensure idle span ending is consistent (#12310)
- ref(profiling): unref timer (#12340)
Work in this release contributed by @dohooo, @mohd-akram, and @ykzts. Thank you for your contributions!