From 9572a2cb3e2a721b6ba833b9fd9600a21c76b9b3 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Mon, 11 Dec 2023 11:12:56 +0000 Subject: [PATCH 1/3] Add `wrapRemixHandleError` instructions --- .../javascript/guides/remix/manual-setup.mdx | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/platforms/javascript/guides/remix/manual-setup.mdx b/src/platforms/javascript/guides/remix/manual-setup.mdx index c5af94238016af..6912ec83ef4471 100644 --- a/src/platforms/javascript/guides/remix/manual-setup.mdx +++ b/src/platforms/javascript/guides/remix/manual-setup.mdx @@ -167,14 +167,25 @@ 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. -```typescript {filename: entry.server.tsx} +To work around this, [`handleError`](https://remix.run/docs/en/main/file-conventions/entry.server#handleerror) function in your server entry point should be instrumented. + +If you are 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 @@ -187,7 +198,7 @@ After you've completed this setup, the SDK will automatically capture unhandled -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. @@ -197,7 +208,7 @@ To enable readable stack traces, 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. @@ -217,7 +228,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 need to await the build loader before passing it to the wrapped handler. ```diff {filename: server/index.ts} wrapExpressCreateRequestHandler(createRequestHandler)({ From 842bf48d92fca107734eecc7b9341462ede84777 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Thu, 14 Dec 2023 12:39:01 -0500 Subject: [PATCH 2/3] Apply suggestions from code review Co-authored-by: Liza Mock --- src/platforms/javascript/guides/remix/manual-setup.mdx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/platforms/javascript/guides/remix/manual-setup.mdx b/src/platforms/javascript/guides/remix/manual-setup.mdx index 6912ec83ef4471..798f103448b6fa 100644 --- a/src/platforms/javascript/guides/remix/manual-setup.mdx +++ b/src/platforms/javascript/guides/remix/manual-setup.mdx @@ -167,11 +167,10 @@ export const ErrorBoundary: V2_ErrorBoundaryComponent = () => { ## v2 Server-side Errors -Sentry won't be able to capture your unexpected server-side errors automatically on Remix v2. +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. -To work around this, [`handleError`](https://remix.run/docs/en/main/file-conventions/entry.server#handleerror) function in your server entry point should be instrumented. -If you are using Sentry Remix SDK version `7.87.0` or higher, you can use `wrapRemixHandleError` to export as your `handleError` function. +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"; @@ -228,7 +227,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](https://remix.run/docs/en/main/future/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)({ From 412de58c5239a4c0e4d1e44a2c2948eda192401b Mon Sep 17 00:00:00 2001 From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com> Date: Thu, 14 Dec 2023 17:40:40 +0000 Subject: [PATCH 3/3] [getsentry/action-github-commit] Auto commit --- src/platforms/javascript/guides/remix/manual-setup.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/platforms/javascript/guides/remix/manual-setup.mdx b/src/platforms/javascript/guides/remix/manual-setup.mdx index 798f103448b6fa..dc56895a642145 100644 --- a/src/platforms/javascript/guides/remix/manual-setup.mdx +++ b/src/platforms/javascript/guides/remix/manual-setup.mdx @@ -169,7 +169,6 @@ export const ErrorBoundary: V2_ErrorBoundaryComponent = () => { 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. - 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)}