Manual Setup
If you can't (or prefer not to) run the automatic setup, you can follow the instructions below to configure your application.
Installation
Get started by installing the Sentry Remix SDK:
npm install --save @sentry/remix
Configuration
To use this SDK, initialize Sentry in your Remix entry points for both the client and server.
Create two files in the root directory of your
entry.client.tsx
and entry.server.tsx
(if they don't already exist). Add your initialization code in these files for the client-side and server-side SDK, respectively.The two configuration types are mostly the same, except that some configuration features, like Session Replay, only work in entry.client.tsx
.
entry.client.tsx
import { useLocation, useMatches } from "@remix-run/react";
import * as Sentry from "@sentry/remix";
import { useEffect } from "react";
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
integrations: [
new Sentry.BrowserTracing({
routingInstrumentation: Sentry.remixRouterInstrumentation(
useEffect,
useLocation,
useMatches
),
}),
// Replay is only available in the client
new Sentry.Replay(),
],
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for performance monitoring.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
// Capture Replay for 10% of all sessions,
// plus for 100% of sessions with an error
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
});
Initialize Sentry in your entry point for the server to capture exceptions and get performance metrics for your action
and loader
functions. You can also initialize Sentry's database integrations, such as Prisma, to get spans for your database calls.
To catch React component errors (in Remix v1) and routing transactions, wrap your Remix root with withSentry
.
If you use the Remix v2_errorBoundary
future flag, you must also configure a v2 ErrorBoundary.
root.tsx
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,
});
// or
withSentry(App, {
errorBoundaryOptions: {
fallback: <p>An error has occurred</p>,
},
});
Remix v2 Features
Available from SDK version 7.59.0
Remix v2 will introduce new features that require additional configuration to work with Sentry. These features are also available from version 1.17.0 with future flags.
v2 ErrorBoundary
To capture errors from v2 ErrorBoundary, you should define your own ErrorBoundary
in root.tsx
and use Sentry.captureRemixErrorBoundaryError
inside of it. You can also create route-specific error capturing behavior by defining ErrorBoundary
in your route components. The ErrorBoundary
you define in root.tsx
will be used as a fallback for all routes.
root.tsx
import { captureRemixErrorBoundaryError } from "@sentry/remix";
export const ErrorBoundary: V2_ErrorBoundaryComponent = () => {
const error = useRouteError();
captureRemixErrorBoundaryError(error);
return <div> ... </div>;
};
v2 Server-side Errors
Sentry won't be able to capture your server-side errors automatically if you're using thev2_errorBoundary
future flag. To work around this, define a handleError
function in your server entry point. Then use Sentry.captureRemixServerException
to capture errors in your server-side code.
entry.server.tsx
export function handleError(
error: unknown,
{ request }: DataFunctionArgs
): void {
if (error instanceof Error) {
Sentry.captureRemixServerException(error, "remix.server", request);
} else {
// Optionally capture non-Error objects
Sentry.captureException(error);
}
}
After you've completed this setup, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client. You can also manually capture errors.
You can refer to Remix Docs to learn how to use your Sentry
Custom Express Server
If you use a custom Express server in your Remix application, you should wrap your createRequestHandler
function manually with wrapExpressCreateRequestHandler
. This isn't necessary if you're using the built-in Remix App Server.
wrapExpressCreateRequestHandler
is available starting with version 7.11.0.
server/index.ts
import { wrapExpressCreateRequestHandler } from "@sentry/remix";
import { createRequestHandler } from "@remix-run/express";
// ...
const createSentryRequestHandler =
wrapExpressCreateRequestHandler(createRequestHandler);
// Use createSentryRequestHandler like you would with createRequestHandler
app.all("*", createSentryRequestHandler(/* ... */));
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) to suggesting an update ("yeah, this would be better").
- Package:
- npm:@sentry/remix
- Version:
- 7.74.1
- Repository:
- https://github.com/getsentry/sentry-javascript