From 1ad32d494fddfd1617e2f61191d549fb2847a319 Mon Sep 17 00:00:00 2001
From: Onur Temizkan <onur@narval.co.uk>
Date: Mon, 17 Jul 2023 20:17:56 +0100
Subject: [PATCH] Document Remix v2 support. (#7320)

Co-authored-by: Lukas Stracke <lukas.stracke@sentry.io>
Co-authored-by: Abhijeet Prasad <devabhiprasad@gmail.com>
---
 .../javascript.remix.mdx                      | 44 ++++++++++++++++++-
 1 file changed, 42 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 a0d3351647b56..b83bd5c0824d3 100644
--- a/src/platform-includes/getting-started-config/javascript.remix.mdx
+++ b/src/platform-includes/getting-started-config/javascript.remix.mdx
@@ -95,7 +95,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 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 {
@@ -131,7 +131,7 @@ export default withSentry(App);
 
 You can disable or configure `ErrorBoundary` using a second parameter to `withSentry`.
 
-```ts
+```typescript
 withSentry(App, {
   wrapWithErrorBoundary: false,
 });
@@ -145,6 +145,46 @@ withSentry(App, {
 });
 ```
 
+## Remix v2 features
+
+_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).
+
+### 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 <div> ... </div>;
+};
+```
+
+## v2 Server-side Errors
+
+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(
+  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).
 
 <Note>