An error has occurred
, }, }); ``` ### [Server-side Configuration](https://docs.sentry.io/platforms/javascript/guides/remix/manual-setup__v8.x/#server-side-configuration) Create an instrumentation file (named here as `instrument.server.mjs`) in your project. Add your initialization code in this file for the server-side SDK. `instrument.server.mjs` ```typescript import * as Sentry from "@sentry/remix"; Sentry.init({ dsn: "___PUBLIC_DSN___", // ___PRODUCT_OPTION_START___ performance // Set tracesSampleRate to 1.0 to capture 100% // of transactions for tracing. // We recommend adjusting this value in production // Learn more at // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate tracesSampleRate: 1.0, // ___PRODUCT_OPTION_END___ performance // To use Sentry OpenTelemetry auto-instrumentation // default: false autoInstrumentRemix: true, // Optionally capture action formData attributes with errors. // This requires `sendDefaultPii` set to true as well. captureActionFormDataKeys: { key_x: true, key_y: true, }, // To capture action formData attributes. sendDefaultPii: true, }); ``` Then run your Remix server with: ```bash NODE_OPTIONS='--import=./instrument.server.mjs' remix-serve build # or NODE_OPTIONS='--require=./instrument.server.cjs' remix-serve build ``` If you use the Express server instead of the Remix built-in server, you can alternatively import your instrumentation file directly at the top of your server implementation. See the example [here](https://docs.sentry.io/platforms/javascript/guides/remix/manual-setup__v8.x/#custom-express-server). Sentry's Remix SDK will automatically record your [`action`](https://remix.run/docs/en/main/route/action) and [`loader`](https://remix.run/docs/en/main/route/loader) transactions, as well as server-side errors. You can also initialize Sentry's database integrations, such as [Prisma](https://docs.sentry.io/platforms/javascript/guides/node/configuration/integrations/prisma.md), to get spans for your database calls. #### [Server-Side Errors](https://docs.sentry.io/platforms/javascript/guides/remix/manual-setup__v8.x/#server-side-errors) To capture server-side errors automatically, instrument the [`handleError`](https://remix.run/docs/en/main/file-conventions/entry.server#handleerror) function in your server entry point. If you're using Sentry Remix SDK version `7.87.0` or higher, you can wrap your error handler with `wrapHandleErrorWithSentry` or use `sentryHandleError` to export as your `handleError` function. `entry.server.tsx (@sentry/remix >= 7.87.0)` ```typescript import * as Sentry from "@sentry/remix"; export const handleError = Sentry.wrapHandleErrorWithSentry( (error, { request }) => { // Custom handleError implementation }, ); // Alternative: Use the Sentry utility function if you don't need to wrap a custom function export const handleError = Sentry.sentryHandleError; ``` For SDK versions older than `7.87.0`, you can use `Sentry.captureRemixServerException` to capture errors inside `handleError`. `entry.server.tsx (@sentry/remix < 7.87.0)` ```typescript 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); } } ``` ### [Source Maps Upload](https://docs.sentry.io/platforms/javascript/guides/remix/manual-setup__v8.x/#source-maps-upload) To enable readable stack traces, [configure source maps upload](https://docs.sentry.io/platforms/javascript/guides/remix/sourcemaps.md) for your production builds. After you've completed this setup, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance. You can also [manually capture errors](https://docs.sentry.io/platforms/javascript/guides/remix/usage.md). ## [Verify](https://docs.sentry.io/platforms/javascript/guides/remix/manual-setup__v8.x/#verify) This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. Errors triggered from within Browser DevTools are sandboxed, so will not trigger an error handler. Place the snippet directly in your code instead. Then, throw an error in a `loader` or `action`. `routes/error.tsx` ```typescript export const action: ActionFunction = async ({ request }) => { throw new Error("Sentry Error"); }; ``` Learn more about manually capturing an error or message in our [Usage documentation](https://docs.sentry.io/platforms/javascript/guides/remix/usage.md). To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. You can refer to [Remix Docs](https://remix.run/docs/en/main/guides/envvars#browser-environment-variables) to learn how to use your Sentry DSN with environment variables. ## [Custom Express Server](https://docs.sentry.io/platforms/javascript/guides/remix/manual-setup__v8.x/#custom-express-server) You can import your server instrumentation file at the top of your Express server implementation. `server.ts` ```typescript // import the Sentry instrumentation file before anything else. import "./instrument.server.mjs"; // alternatively `require('./instrument.server.cjs')` // ... const app = express(); // ... ```