# Official Sentry SDK for Remix
[](https://www.npmjs.com/package/@sentry/remix)
[](https://www.npmjs.com/package/@sentry/remix)
[](https://www.npmjs.com/package/@sentry/remix)
[](http://getsentry.github.io/sentry-javascript/)
This SDK is considered experimental and in an alpha state. It may experience breaking changes. Please reach out on [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback/concerns.
## 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: [
new Sentry.BrowserTracing({
routingInstrumentation: Sentry.remixRouterInstrumentation(
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: [new Sentry.Integrations.Prisma({ client: prisma })],
// ...
});
```
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);
```
You can disable or configure `ErrorBoundary` using a second parameter to `withSentry`.
```ts
withSentry(App, {
wrapWithErrorBoundary: false
});
// or
withSentry(App, {
errorBoundaryOptions: {
fallback: An error has occurred
}
});
```
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.configureScope(scope => {
scope.setExtra('battery', 0.7);
scope.setTag('user_mode', 'admin');
scope.setUser({ id: '4711' });
// scope.clear();
});
// 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.](https://github.com/getsentry/sentry-cli).