feat(remix): Add wrapHandleErrorWithSentry (#10370)

- Exports a new wrapper `Sentry.wrapHandleErrorWithSentry` for custom
`handleError` implementations.
- This runs the original `handleError` implementation, then runs the
Sentry's capture logic.
- This PR also renames `wrapRemixHandleError` to `sentryHandleError`, to
avoid confusion. We're still exporting `wrapRemixHandleError` as alias.

---------

Co-authored-by: Abhijeet Prasad <[email protected]>

Author: onurtemizkan

MIGRATION.md

@@ -1234,8 +1234,6 @@ export class HeaderComponent {
 }
 ```
 
----
-
 # Deprecations in 7.x
 
 You can use the **Experimental** [@sentry/migr8](https://www.npmjs.com/package/@sentry/migr8) to automatically update
@@ -1371,6 +1369,19 @@ Instead of an `transactionContext` being passed to the `tracesSampler` callback,
 will be removed in v8. Note that the `attributes` are only the attributes at span creation time, and some attributes may
 only be set later during the span lifecycle (and thus not be available during sampling).
 
+## Deprecate `wrapRemixHandleError` in Remix SDK (since v7.100.0)
+
+This release deprecates `wrapRemixHandleError` in favor of using `sentryHandleError` from `@sentry/remix`. It can be
+used as below:
+
+```typescript
+// entry.server.ts
+
+export const handleError = Sentry.wrapHandleErrorWithSentry(() => {
+  // Custom handleError implementation
+});
+```
+
 ## Deprecate using `getClient()` to check if the SDK was initialized
 
 In v8, `getClient()` will stop returning `undefined` if `Sentry.init()` was not called. For cases where this may be used

dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/entry.server.tsx

@@ -26,7 +26,18 @@ installGlobals();
 
 const ABORT_DELAY = 5_000;
 
-export const handleError = Sentry.wrapRemixHandleError;
+Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
+  dsn: process.env.E2E_TEST_DSN,
+  // Performance Monitoring
+  tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
+});
+
+const handleErrorImpl = () => {
+  Sentry.setTag('remix-test-tag', 'remix-test-value');
+};
+
+export const handleError = Sentry.wrapHandleErrorWithSentry(handleErrorImpl);
 
 export default function handleRequest(
   request: Request,

packages/remix/src/index.server.ts

@@ -103,7 +103,13 @@ export {
 // Keeping the `*` exports for backwards compatibility and types
 export * from '@sentry/node';
 
-export { captureRemixServerException, wrapRemixHandleError } from './utils/instrumentServer';
+export {
+  captureRemixServerException,
+  // eslint-disable-next-line deprecation/deprecation
+  wrapRemixHandleError,
+  sentryHandleError,
+  wrapHandleErrorWithSentry,
+} from './utils/instrumentServer';
 export { ErrorBoundary, withErrorBoundary } from '@sentry/react';
 export { withSentry } from './client/performance';
 export { captureRemixErrorBoundaryError } from './client/errors';

packages/remix/src/utils/instrumentServer.ts

@@ -89,9 +89,9 @@ async function extractResponseError(response: Response): Promise<unknown> {
  *
  * Should be used in `entry.server` like:
  *
- * export const handleError = Sentry.wrapRemixHandleError
+ * export const handleError = Sentry.sentryHandleError
  */
-export function wrapRemixHandleError(err: unknown, { request }: DataFunctionArgs): void {
+export function sentryHandleError(err: unknown, { request }: DataFunctionArgs): void {
   // We are skipping thrown responses here as they are handled by
   // `captureRemixServerException` at loader / action level
   // We don't want to capture them twice.
@@ -107,6 +107,28 @@ export function wrapRemixHandleError(err: unknown, { request }: DataFunctionArgs
   });
 }
 
+/**
+ * @deprecated Use `sentryHandleError` instead.
+ */
+export const wrapRemixHandleError = sentryHandleError;
+
+/**
+ * Sentry wrapper for Remix's `handleError` function.
+ * Remix Docs: https://remix.run/docs/en/main/file-conventions/entry.server#handleerror
+ */
+export function wrapHandleErrorWithSentry(
+  origHandleError: (err: unknown, args: { request: unknown }) => void,
+): (err: unknown, args: { request: unknown }) => void {
+  return function (this: unknown, err: unknown, args: { request: unknown }): void {
+    // This is expected to be void but just in case it changes in the future.
+    const res = origHandleError.call(this, err, args);
+
+    sentryHandleError(err, args as DataFunctionArgs);
+
+    return res;
+  };
+}
+
 /**
  * Captures an exception happened in the Remix server.
  *

packages/remix/src/utils/vendor/types.ts

@@ -61,7 +61,7 @@ export type RemixRequestState = {
 
 export type RemixRequest = Request &
   Record<symbol | string, RemixRequestState> & {
-    agent: Agent | ((parsedURL: URL) => Agent) | undefined;
+    agent?: Agent | ((parsedURL: URL) => Agent) | undefined;
   };
 
 export type AppLoadContext = Record<string, unknown> & { __sentry_express_wrapped__?: boolean };

packages/remix/test/integration/app_v2/entry.server.tsx

@@ -13,7 +13,11 @@ import type { EntryContext } from '@remix-run/node';
 import { RemixServer } from '@remix-run/react';
 import { renderToString } from 'react-dom/server';
 
-export const handleError = Sentry.wrapRemixHandleError;
+const handleErrorImpl = () => {
+  Sentry.setTag('remix-test-tag', 'remix-test-value');
+};
+
+export const handleError = Sentry.wrapHandleErrorWithSentry(handleErrorImpl);
 
 export default function handleRequest(
   request: Request,

packages/remix/test/integration/test/server/ssr.test.ts

@@ -19,6 +19,12 @@ describe('Server Side Rendering', () => {
           },
         },
       },
+      tags: useV2
+        ? {
+            // Testing that the wrapped `handleError` correctly adds tags
+            'remix-test-tag': 'remix-test-value',
+          }
+        : {},
     });
 
     assertSentryEvent(event[2], {