From 9dc8a03e021d4f2b643dde40f5751f454623ca73 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Wed, 5 Jul 2023 11:58:34 +0100 Subject: [PATCH 1/5] Document Remix v2 support. --- .../javascript.remix.mdx | 41 ++++++++++++++++++- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/src/platform-includes/getting-started-config/javascript.remix.mdx b/src/platform-includes/getting-started-config/javascript.remix.mdx index 4982b64280a930..546356a49512b5 100644 --- a/src/platform-includes/getting-started-config/javascript.remix.mdx +++ b/src/platform-includes/getting-started-config/javascript.remix.mdx @@ -94,7 +94,7 @@ const createSentryRequestHandler = app.all("*", createSentryRequestHandler(/* ... */)); ``` -Also, wrap your Remix root with `withSentry` to catch React component errors and to get parameterized router transactions. +Also, wrap your Remix root with `withSentry` to get parameterized router transactions. For Remix applications that do *not* use the [v2 ErrorBoundary](https://remix.run/docs/en/main/route/error-boundary-v2), this will also wrap your root with an `ErrorBoundary` that captures errors in your application. If you use the v2 ErrorBoundary, see the [v2 ErrorBoundary](#v2-errorboundary) section below. ```typescript {filename: root.tsx} import { @@ -130,7 +130,7 @@ export default withSentry(App); You can disable or configure `ErrorBoundary` using a second parameter to `withSentry`. -```ts +```typescript withSentry(App, { wrapWithErrorBoundary: false, }); @@ -144,6 +144,43 @@ withSentry(App, { }); ``` +## Remix v2 features +_Available from version [...]_ + +[Remix v2](https://remix.run/docs/en/main/pages/v2) will introduce new features that require additional configuration to work with Sentry. These features are also available from version [1.17.0](https://github.com/remix-run/remix/releases/tag/remix%401.17.0) with [future flags](https://remix.run/docs/en/main/pages/api-development-strategy#current-future-flags). Sentry automatically detects if you are using `v2_errorBoundary` flag and changes its behaviour accordingly. + + +### v2 ErrorBoundary + +To capture errors from [v2 ErrorBoundary](https://remix.run/docs/en/main/route/error-boundary-v2), you should define your own `ErrorBoundary` in `root.tsx` and use `Sentry.captureRemixErrorBoundaryError` inside of it. You can also create route-specific error capturing behaviour by defining `ErrorBoundary` in your route components. The `ErrorBoundary` you define in `root.tsx` will be used as a fallback for all routes. + +```typescript {filename: root.tsx} +import { captureRemixErrorBoundaryError } from '@sentry/remix'; + +export const ErrorBoundary: V2_ErrorBoundaryComponent = () => { + const error = useRouteError(); + + captureRemixErrorBoundaryError(error); + + return
...
; +}; +``` + +## v2 Server-side Errors + +When using `v2_errorBoundary` future flag, Sentry will not automatically capture your server-side errors. Instead, the recommended way is to define a [`handleError`](https://remix.run/docs/en/main/file-conventions/entry.server#handleerror) function in your server entry point. Then, you should use `Sentry.captureRemixServerError` to capture errors in your server-side code. + +```typescript {filename: 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); + } +} +``` + Once you've done this set up, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client. You can also [manually capture errors](/platforms/javascript/guides/remix/usage). From 12c55f0335a0c9098f95499984fd4af5be150e8e Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Wed, 5 Jul 2023 12:26:25 +0100 Subject: [PATCH 2/5] Fix linter. --- .../getting-started-config/javascript.remix.mdx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/platform-includes/getting-started-config/javascript.remix.mdx b/src/platform-includes/getting-started-config/javascript.remix.mdx index 546356a49512b5..7b9aa457d4f03f 100644 --- a/src/platform-includes/getting-started-config/javascript.remix.mdx +++ b/src/platform-includes/getting-started-config/javascript.remix.mdx @@ -94,7 +94,7 @@ const createSentryRequestHandler = app.all("*", createSentryRequestHandler(/* ... */)); ``` -Also, wrap your Remix root with `withSentry` to get parameterized router transactions. For Remix applications that do *not* use the [v2 ErrorBoundary](https://remix.run/docs/en/main/route/error-boundary-v2), this will also wrap your root with an `ErrorBoundary` that captures errors in your application. If you use the v2 ErrorBoundary, see the [v2 ErrorBoundary](#v2-errorboundary) section below. +Also, wrap your Remix root with `withSentry` to get parameterized router transactions. For Remix applications that do _not_ use the [v2 ErrorBoundary](https://remix.run/docs/en/main/route/error-boundary-v2), this will also wrap your root with an `ErrorBoundary` that captures errors in your application. If you use the v2 ErrorBoundary, see the [v2 ErrorBoundary](#v2-errorboundary) section below. ```typescript {filename: root.tsx} import { @@ -145,17 +145,17 @@ withSentry(App, { ``` ## Remix v2 features + _Available from version [...]_ [Remix v2](https://remix.run/docs/en/main/pages/v2) will introduce new features that require additional configuration to work with Sentry. These features are also available from version [1.17.0](https://github.com/remix-run/remix/releases/tag/remix%401.17.0) with [future flags](https://remix.run/docs/en/main/pages/api-development-strategy#current-future-flags). Sentry automatically detects if you are using `v2_errorBoundary` flag and changes its behaviour accordingly. - ### v2 ErrorBoundary To capture errors from [v2 ErrorBoundary](https://remix.run/docs/en/main/route/error-boundary-v2), you should define your own `ErrorBoundary` in `root.tsx` and use `Sentry.captureRemixErrorBoundaryError` inside of it. You can also create route-specific error capturing behaviour by defining `ErrorBoundary` in your route components. The `ErrorBoundary` you define in `root.tsx` will be used as a fallback for all routes. ```typescript {filename: root.tsx} -import { captureRemixErrorBoundaryError } from '@sentry/remix'; +import { captureRemixErrorBoundaryError } from "@sentry/remix"; export const ErrorBoundary: V2_ErrorBoundaryComponent = () => { const error = useRouteError(); @@ -171,9 +171,12 @@ export const ErrorBoundary: V2_ErrorBoundaryComponent = () => { When using `v2_errorBoundary` future flag, Sentry will not automatically capture your server-side errors. Instead, the recommended way is to define a [`handleError`](https://remix.run/docs/en/main/file-conventions/entry.server#handleerror) function in your server entry point. Then, you should use `Sentry.captureRemixServerError` to capture errors in your server-side code. ```typescript {filename: entry.server.tsx} -export function handleError(error: unknown, { request }: DataFunctionArgs): void { +export function handleError( + error: unknown, + { request }: DataFunctionArgs +): void { if (error instanceof Error) { - Sentry.captureRemixServerException(error, 'remix.server', request); + Sentry.captureRemixServerException(error, "remix.server", request); } else { // Optionally capture non-Error objects Sentry.captureException(error); From e545c78dc05344846cab38065969005d3112ddc2 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Thu, 13 Jul 2023 09:44:59 +0100 Subject: [PATCH 3/5] Apply suggestions from code review Co-authored-by: Lukas Stracke --- .../getting-started-config/javascript.remix.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/platform-includes/getting-started-config/javascript.remix.mdx b/src/platform-includes/getting-started-config/javascript.remix.mdx index 7b9aa457d4f03f..b77d6eb9a0fb77 100644 --- a/src/platform-includes/getting-started-config/javascript.remix.mdx +++ b/src/platform-includes/getting-started-config/javascript.remix.mdx @@ -94,7 +94,7 @@ const createSentryRequestHandler = app.all("*", createSentryRequestHandler(/* ... */)); ``` -Also, wrap your Remix root with `withSentry` to get parameterized router transactions. For Remix applications that do _not_ use the [v2 ErrorBoundary](https://remix.run/docs/en/main/route/error-boundary-v2), this will also wrap your root with an `ErrorBoundary` that captures errors in your application. If you use the v2 ErrorBoundary, see the [v2 ErrorBoundary](#v2-errorboundary) section below. +Also, wrap your Remix root with `withSentry` to catch React component errors (Remix v1) and routing transactions. If you use the Remix `v2_errorBoundary` future flag, you need to configure a [v2 ErrorBoundary](#v2-errorboundary) in addition. ```typescript {filename: root.tsx} import { @@ -148,7 +148,7 @@ withSentry(App, { _Available from version [...]_ -[Remix v2](https://remix.run/docs/en/main/pages/v2) will introduce new features that require additional configuration to work with Sentry. These features are also available from version [1.17.0](https://github.com/remix-run/remix/releases/tag/remix%401.17.0) with [future flags](https://remix.run/docs/en/main/pages/api-development-strategy#current-future-flags). Sentry automatically detects if you are using `v2_errorBoundary` flag and changes its behaviour accordingly. +[Remix v2](https://remix.run/docs/en/main/pages/v2) will introduce new features that require additional configuration to work with Sentry. These features are also available from version [1.17.0](https://github.com/remix-run/remix/releases/tag/remix%401.17.0) with [future flags](https://remix.run/docs/en/main/pages/api-development-strategy#current-future-flags). ### v2 ErrorBoundary @@ -168,7 +168,7 @@ export const ErrorBoundary: V2_ErrorBoundaryComponent = () => { ## v2 Server-side Errors -When using `v2_errorBoundary` future flag, Sentry will not automatically capture your server-side errors. Instead, the recommended way is to define a [`handleError`](https://remix.run/docs/en/main/file-conventions/entry.server#handleerror) function in your server entry point. Then, you should use `Sentry.captureRemixServerError` to capture errors in your server-side code. +When using `v2_errorBoundary` future flag, Sentry can't capture your server-side errors automatically. Instead, define a [`handleError`](https://remix.run/docs/en/main/file-conventions/entry.server#handleerror) function in your server entry point. Then, you should use `Sentry.captureRemixServerError` to capture errors in your server-side code. ```typescript {filename: entry.server.tsx} export function handleError( From 248c4c8707ad14623bbfc91ffe8bb8169f62d263 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Thu, 13 Jul 2023 11:42:50 +0100 Subject: [PATCH 4/5] Fix linter. --- .../getting-started-config/javascript.remix.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform-includes/getting-started-config/javascript.remix.mdx b/src/platform-includes/getting-started-config/javascript.remix.mdx index b77d6eb9a0fb77..4ef299b1e73a05 100644 --- a/src/platform-includes/getting-started-config/javascript.remix.mdx +++ b/src/platform-includes/getting-started-config/javascript.remix.mdx @@ -148,7 +148,7 @@ withSentry(App, { _Available from version [...]_ -[Remix v2](https://remix.run/docs/en/main/pages/v2) will introduce new features that require additional configuration to work with Sentry. These features are also available from version [1.17.0](https://github.com/remix-run/remix/releases/tag/remix%401.17.0) with [future flags](https://remix.run/docs/en/main/pages/api-development-strategy#current-future-flags). +[Remix v2](https://remix.run/docs/en/main/pages/v2) will introduce new features that require additional configuration to work with Sentry. These features are also available from version [1.17.0](https://github.com/remix-run/remix/releases/tag/remix%401.17.0) with [future flags](https://remix.run/docs/en/main/pages/api-development-strategy#current-future-flags). ### v2 ErrorBoundary From 7031e7b5017ff5b58f9ff3597399942b65365395 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Mon, 17 Jul 2023 15:03:53 -0400 Subject: [PATCH 5/5] Update src/platform-includes/getting-started-config/javascript.remix.mdx Co-authored-by: Lukas Stracke --- .../getting-started-config/javascript.remix.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform-includes/getting-started-config/javascript.remix.mdx b/src/platform-includes/getting-started-config/javascript.remix.mdx index 4ef299b1e73a05..0c084f231741c1 100644 --- a/src/platform-includes/getting-started-config/javascript.remix.mdx +++ b/src/platform-includes/getting-started-config/javascript.remix.mdx @@ -146,7 +146,7 @@ withSentry(App, { ## Remix v2 features -_Available from version [...]_ +_Available from SDK version 7.59.0_ [Remix v2](https://remix.run/docs/en/main/pages/v2) will introduce new features that require additional configuration to work with Sentry. These features are also available from version [1.17.0](https://github.com/remix-run/remix/releases/tag/remix%401.17.0) with [future flags](https://remix.run/docs/en/main/pages/api-development-strategy#current-future-flags).