feat(remix): Add wrapHandleErrorWithSentry

Author: onurtemizkan

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,12 @@ export {
 // Keeping the `*` exports for backwards compatibility and types
 export * from '@sentry/node';
 
-export { captureRemixServerException, wrapRemixHandleError } from './utils/instrumentServer';
+export {
+  captureRemixServerException,
+  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,26 @@ export function wrapRemixHandleError(err: unknown, { request }: DataFunctionArgs
   });
 }
 
+// To be deprecated in favor of `sentryHandleError`
+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: unknown) => void,
+): (err: unknown, args: unknown) => void {
+  return function (this: unknown, err: unknown, args: 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], {