Skip to content

Add wrapRemixHandleError instructions #8681

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 14, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions src/platforms/javascript/guides/remix/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -167,14 +167,23 @@ export const ErrorBoundary: V2_ErrorBoundaryComponent = () => {

## v2 Server-side Errors

Sentry won't be able to capture your server-side errors automatically if you're using the`v2_errorBoundary` future flag. To work around this, define a [`handleError`](https://remix.run/docs/en/main/file-conventions/entry.server#handleerror) function in your server entry point. Then use `Sentry.captureRemixServerException` to capture errors in your server-side code.
Sentry won't be able to capture your unexpected server-side errors automatically on Remix v2. To work around this, instrument the [`handleError`](https://remix.run/docs/en/main/file-conventions/entry.server#handleerror) function in your server entry point.

```typescript {filename: entry.server.tsx}
If you're using Sentry Remix SDK version `7.87.0` or higher, you can use `wrapRemixHandleError` to export as your `handleError` function.

```typescript {filename: entry.server.tsx (@sentry/remix >= 7.87.0)}
import { wrapRemixHandleError } from "@sentry/remix";

export const handleError = wrapRemixHandleError;
```

For SDK versions older than `7.87.0`, you can use `Sentry.captureRemixServerException` to capture errors inside `handleError`.

```typescript {filename: entry.server.tsx (@sentry/remix < 7.87.0)}
export function handleError(
error: unknown,
{ request }: DataFunctionArgs
): void {
if (error instanceof Error) {
Sentry.captureRemixServerException(error, "remix.server", request);
} else {
// Optionally capture non-Error objects
Expand All @@ -187,7 +196,7 @@ After you've completed this setup, the SDK will automatically capture unhandled

<Note>

You can refer to [Remix Docs](https://remix.run/docs/en/v1/guides/envvars#browser-environment-variables) to learn how to use your Sentry DSN with environment variables.
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.

</Note>

Expand All @@ -197,7 +206,7 @@ To enable readable stack traces, <PlatformLink to="/sourcemaps">configure source

## Custom Express Server

If you use a custom Express server in your Remix application, you should wrap your [`createRequestHandler` function](https://remix.run/docs/en/v1/other-api/adapter#createrequesthandler) manually with `wrapExpressCreateRequestHandler`. This isn't necessary if you're using the built-in Remix App Server.
If you use a custom Express server in your Remix application, you should wrap your [`createRequestHandler` function](https://remix.run/docs/en/main/other-api/adapter#createrequesthandler) manually with `wrapExpressCreateRequestHandler`. This isn't necessary if you're using the built-in Remix App Server.

<Note>

Expand All @@ -217,7 +226,7 @@ const createSentryRequestHandler =
app.all("*", createSentryRequestHandler(/* ... */));
```

The function returned by `wrapExpressCreateRequestHandler` accepts the build object as its first parameter. So if your boilerplate code passes the argument as a function, you need to update the usage. For example, if you're using Vite, you need to await the build loader before passing it to the wrapped handler.
The function returned by `wrapExpressCreateRequestHandler` accepts the build object as its first parameter. So if your boilerplate code passes the argument as a function, you need to update the usage. For example, if you're using [Vite](https://remix.run/docs/en/main/future/vite), you'll need to wait for the build loader before passing it to the wrapped handler.

```diff {filename: server/index.ts}
wrapExpressCreateRequestHandler(createRequestHandler)({
Expand Down