feat(remix): Wrap root with ErrorBoundary.

onurtemizkan · onurtemizkan · commit 744212838f93 · 2022-07-05T18:03:48.000+01:00
diff --git a/packages/remix/README.md b/packages/remix/README.md
@@ -57,7 +57,7 @@ Sentry.init({
 });
 ```
 
-Also, wrap your Remix root, with Sentry's `ErrorBoundary` component to catch React component errors, and `withSentryRouteTracing` to get parameterized router transactions.
+Also, wrap your Remix root with `withSentryRouteTracing` to catch React component errors and to get parameterized router transactions.
 
 ```ts
 // root.tsx
@@ -71,24 +71,22 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 
-import { ErrorBoundary, withSentryRouteTracing } from "@sentry/remix";
+import { withSentryRouteTracing } from "@sentry/remix";
 
 function App() {
   return (
-    <ErrorBoundary>
-      <html>
-        <head>
-          <Meta />
-          <Links />
-        </head>
-        <body>
-          <Outlet />
-          <ScrollRestoration />
-          <Scripts />
-          <LiveReload />
-        </body>
-      </html>
-    </ErrorBoundary>
+    <html>
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
   );
 }
 
diff --git a/packages/remix/src/performance/client.tsx b/packages/remix/src/performance/client.tsx
@@ -1,3 +1,4 @@
+import { withErrorBoundary } from '@sentry/react';
 import { Transaction, TransactionContext } from '@sentry/types';
 import { getGlobalObject, logger } from '@sentry/utils';
 import * as React from 'react';
@@ -87,7 +88,8 @@ export function withSentryRouteTracing<P extends Record<string, unknown>, R exte
 
     // @ts-ignore Setting more specific React Component typing for `R` generic above
     // will break advanced type inference done by react router params
-    return OrigApp;
+    return withErrorBoundary(OrigApp);
+    // Note: Error boundary doesn't depend on any of these functions, so we can return the wrapped component.
   }
 
   const SentryRoot: React.FC<P> = (props: P) => {
@@ -135,5 +137,5 @@ export function withSentryRouteTracing<P extends Record<string, unknown>, R exte
 
   // @ts-ignore Setting more specific React Component typing for `R` generic above
   // will break advanced type inference done by react router params
-  return SentryRoot;
+  return withErrorBoundary(SentryRoot);
 }
