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.

``ts
// entry.client.tsx

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,
}),
],
// ...
});
`

`ts
// entry.server.tsx

import { prisma } from '~/db.server';

import * as Sentry from '@sentry/remix';

Sentry.init({
dsn: '__DSN__',
tracesSampleRate: 1,
integrations: [Sentry.prismaIntegration()],
// ...
});
`

Also, wrap your Remix root with withSentry to catch React component errors and to get parameterized router
transactions.

`ts
// root.tsx

import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";

import { withSentry } from "@sentry/remix";

function App() {
return (












);
}

export default withSentry(App);
`

To set context information or send manual events, use the exported functions of @sentry/remix.

`ts
import * as Sentry from '@sentry/remix';

// Set user information, as well as tags and further extras
Sentry.setExtra('battery', 0.7);
Sentry.setTag('user_mode', 'admin');
Sentry.setUser({ id: '4711' });

// Add a breadcrumb for future events
Sentry.addBreadcrumb({
message: 'My Breadcrumb',
// ...
});

// Capture exceptions, messages or manual events
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..