feat(remix): Add v2 support

[onurtemizkan]

Ref: #7810
Docs: getsentry/sentry-docs#7320

Adds support for new error handling utilities of Remix v2. (ErrorBoundary, handleError)

ErrorBoundary v2

Remix's ErrorBoundary captures all client / server / SSR errors and shows a customizable error page.
In v1, to capture client-side errors we were wrapping the whole Remix application with @sentry/reacts ErrorBoundary which caused inconsistencies in error pages. (See: #5762)

v2 implementation does not wrap user's application with @sentry/react's ErrorBoundary, instead it exports a capturing utility to be used inside the Remix application's ErrorBoundary function.

Can be used like:

import { captureRemixErrorBoundaryError } from '@sentry/remix';

export const ErrorBoundary: V2_ErrorBoundaryComponent = () => {
  const error = useRouteError();

  captureRemixErrorBoundaryError(error);

  return <div> ... </div>;
};

It also requires v2_errorBoundary future flag to be enabled.

handleError

For server-side errors apart from 'Error Responses' (thrown responses are handled in ErrorBoundary), this implementation exports another utility to be used in handleError function. The errors we capture in handleError also appear on ErrorBoundary functions but stacktraces are not available. So, we skip those errors in captureRemixErrorBoundaryError function.

handleError can be instrumented as below:

export function handleError(error: unknown, { request }: DataFunctionArgs): void {
  if (error instanceof Error) {
    Sentry.captureRemixServerException(error, 'remix.server', request);
  } else {
    // Optionally
    Sentry.captureException(error);
  }

[github-actions]

size-limit report 📦

Path	Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified)	21.95 KB (0%)
@sentry/browser - ES5 CDN Bundle (minified)	69.13 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped + minified)	20.28 KB (-0.01% 🔽)
@sentry/browser - ES6 CDN Bundle (minified)	60.38 KB (0%)
@sentry/browser - Webpack (gzipped + minified)	21.9 KB (0%)
@sentry/browser - Webpack (minified)	71.51 KB (0%)
@sentry/react - Webpack (gzipped + minified)	21.92 KB (0%)
@sentry/nextjs Client - Webpack (gzipped + minified)	50.58 KB (-0.01% 🔽)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified)	30.11 KB (+0.01% 🔺)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified)	28.16 KB (0%)
@sentry/replay ES6 CDN Bundle (gzipped + minified)	49.42 KB (+0.01% 🔺)
@sentry/replay - Webpack (gzipped + minified)	43.1 KB (0%)
@sentry/browser + @sentry/tracing + @sentry/replay - ES6 CDN Bundle (gzipped + minified)	69.51 KB (+0.01% 🔺)
@sentry/browser + @sentry/replay - ES6 CDN Bundle (gzipped + minified)	61.82 KB (+0.01% 🔺)

[Lms24]

Looks good to me! Just a comment about the types but once this is addressed we can merge from my PoV.

[Lms24]

remix question: The ErrorBoundary is picked up during build I assume, right?

[onurtemizkan]

It covers both build and runtime. Client-side React errors, and runtime server errors also end up here. For server-side runtime errors, handleError gives us the stacktraces (ErrorBoundary does not), so this implementation skips capturing for that case.

[Lms24]

Are these types 1:1 copies from Remix? If yes, then let's please move them to the vendor sub directory for consistency with the rest of our vendored code.

[onurtemizkan]

Not 1:1 for all types, some of them are shallowly vendored, but still vendored :) Moving to the sub directory.