diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 1646f88685d8..d9fb753fc0d9 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -2,7 +2,7 @@ export * from '@sentry/browser'; export { init } from './sdk'; export { Profiler, withProfiler, useProfiler } from './profiler'; -export type { FallbackRender } from './errorboundary'; +export type { ErrorBoundaryProps, FallbackRender } from './errorboundary'; export { ErrorBoundary, withErrorBoundary } from './errorboundary'; export { createReduxEnhancer } from './redux'; export { reactRouterV3Instrumentation } from './reactrouterv3'; diff --git a/packages/remix/README.md b/packages/remix/README.md index d3cd45a8efe2..8c042bf544f0 100644 --- 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 `withSentry` to catch React component errors and to get parameterized router transactions. ```ts // root.tsx @@ -71,28 +71,43 @@ import { ScrollRestoration, } from "@remix-run/react"; -import { ErrorBoundary, withSentryRouteTracing } from "@sentry/remix"; +import { withSentry } from "@sentry/remix"; function App() { return ( - - - - - - - - - - - - - - + + + + + + + + + + + + ); } -export default withSentryRouteTracing(App); +export default withSentry(App); +``` + +You can disable or configure `ErrorBoundary` using a second parameter to `withSentry`. + +```ts + +withSentry(App, { + wrapWithErrorBoundary: false +}); + +// or + +withSentry(App, { + errorBoundaryOptions: { + fallback:

An error has occurred

+ } +}); ``` To set context information or send manual events, use the exported functions of `@sentry/remix`. diff --git a/packages/remix/src/index.client.tsx b/packages/remix/src/index.client.tsx index bd87458c993d..68e6c2027141 100644 --- a/packages/remix/src/index.client.tsx +++ b/packages/remix/src/index.client.tsx @@ -3,7 +3,7 @@ import { configureScope, init as reactInit, Integrations } from '@sentry/react'; import { buildMetadata } from './utils/metadata'; import { RemixOptions } from './utils/remixOptions'; -export { remixRouterInstrumentation, withSentryRouteTracing } from './performance/client'; +export { remixRouterInstrumentation, withSentry } from './performance/client'; export { BrowserTracing } from '@sentry/tracing'; export * from '@sentry/react'; diff --git a/packages/remix/src/index.server.ts b/packages/remix/src/index.server.ts index d57b5942fbf8..7a113cf2ef44 100644 --- a/packages/remix/src/index.server.ts +++ b/packages/remix/src/index.server.ts @@ -7,7 +7,7 @@ import { buildMetadata } from './utils/metadata'; import { RemixOptions } from './utils/remixOptions'; export { ErrorBoundary, withErrorBoundary } from '@sentry/react'; -export { remixRouterInstrumentation, withSentryRouteTracing } from './performance/client'; +export { remixRouterInstrumentation, withSentry } from './performance/client'; export { BrowserTracing, Integrations } from '@sentry/tracing'; export * from '@sentry/node'; diff --git a/packages/remix/src/performance/client.tsx b/packages/remix/src/performance/client.tsx index 4ba0e64ae91a..d25f9d7c4573 100644 --- a/packages/remix/src/performance/client.tsx +++ b/packages/remix/src/performance/client.tsx @@ -1,3 +1,5 @@ +import type { ErrorBoundaryProps } from '@sentry/react'; +import { withErrorBoundary } from '@sentry/react'; import { Transaction, TransactionContext } from '@sentry/types'; import { getGlobalObject, logger } from '@sentry/utils'; import * as React from 'react'; @@ -79,8 +81,21 @@ export function remixRouterInstrumentation(useEffect: UseEffect, useLocation: Us /** * Wraps a remix `root` (see: https://remix.run/docs/en/v1/guides/migrating-react-router-app#creating-the-root-route) * To enable pageload/navigation tracing on every route. + * Also wraps the application with `ErrorBoundary`. + * + * @param OrigApp The Remix root to wrap + * @param options The options for ErrorBoundary wrapper. */ -export function withSentryRouteTracing

, R extends React.FC

>(OrigApp: R): R { +export function withSentry

, R extends React.FC

>( + OrigApp: R, + options: { + wrapWithErrorBoundary?: boolean; + errorBoundaryOptions?: ErrorBoundaryProps; + } = { + wrapWithErrorBoundary: true, + errorBoundaryOptions: {}, + }, +): R { const SentryRoot: React.FC

= (props: P) => { // Early return when any of the required functions is not available. if (!_useEffect || !_useLocation || !_useMatches || !_customStartTransaction) { @@ -91,6 +106,7 @@ export function withSentryRouteTracing

, R exte // will break advanced type inference done by react router params return ; } + let isBaseLocation: boolean = false; const location = _useLocation(); @@ -133,6 +149,12 @@ export function withSentryRouteTracing

, R exte return ; }; + if (options.wrapWithErrorBoundary) { + // @ts-ignore Setting more specific React Component typing for `R` generic above + // will break advanced type inference done by react router params + return withErrorBoundary(SentryRoot, options.errorBoundaryOptions); + } + // @ts-ignore Setting more specific React Component typing for `R` generic above // will break advanced type inference done by react router params return SentryRoot;