export helper

Author: chargome

packages/react-router/src/client/index.ts

@@ -31,3 +31,5 @@ export {
   isNavigateHookInvoked,
   type CreateSentryClientInstrumentationOptions,
 } from './createClientInstrumentation';
+
+export { sentryOnError } from './sentryOnError';

packages/react-router/src/client/sentryOnError.ts

@@ -0,0 +1,34 @@
+import { captureException } from '@sentry/core';
+import { captureReactException } from '@sentry/react';
+
+/**
+ * A handler function for React Router's `onError` prop on `HydratedRouter`.
+ *
+ * Reports errors to Sentry.
+ *
+ * @example (entry.client.tsx)
+ * ```tsx
+ * import { sentryOnError } from '@sentry/react-router';
+ *
+ * startTransition(() => {
+ *   hydrateRoot(
+ *     document,
+ *     <HydratedRouter onError={sentryOnError} />
+ *   );
+ * });
+ * ```
+ */
+export function sentryOnError(
+  error: unknown,
+  {
+    errorInfo,
+  }: {
+    errorInfo?: React.ErrorInfo;
+  },
+): void {
+  if (errorInfo) {
+    captureReactException(error, errorInfo);
+  } else {
+    captureException(error);
+  }
+}

packages/react-router/test/client/sentryOnError.test.ts

@@ -0,0 +1,34 @@
+import * as SentryCore from '@sentry/core';
+import * as SentryReact from '@sentry/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { sentryOnError } from '../../src/client/sentryOnError';
+
+const captureReactExceptionSpy = vi.spyOn(SentryReact, 'captureReactException').mockReturnValue('mock-event-id');
+const captureExceptionSpy = vi.spyOn(SentryCore, 'captureException').mockReturnValue('mock-event-id');
+
+describe('sentryOnError', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('calls captureReactException when errorInfo is provided', () => {
+    const error = new Error('test error');
+    const errorInfo = { componentStack: '<TestComponent>\n<App>' };
+
+    sentryOnError(error, {
+      errorInfo,
+    });
+
+    expect(captureReactExceptionSpy).toHaveBeenCalledWith(error, errorInfo);
+    expect(captureExceptionSpy).not.toHaveBeenCalled();
+  });
+
+  it('calls captureException when errorInfo is undefined', () => {
+    const error = new Error('loader error');
+
+    sentryOnError(error, {});
+
+    expect(captureExceptionSpy).toHaveBeenCalledWith(error);
+    expect(captureReactExceptionSpy).not.toHaveBeenCalled();
+  });
+});