feat(replay): Add url to replay hydration error breadcrumb type (#12521)

Fixes getsentry/sentry#72152

Author: ryan953

packages/replay-internal/src/coreHandlers/handleBeforeSendEvent.ts

@@ -1,4 +1,5 @@
 import type { ErrorEvent, Event } from '@sentry/types';
+import { getLocationHref } from '@sentry/utils';
 
 import type { ReplayContainer } from '../types';
 import { createBreadcrumb } from '../util/createBreadcrumb';
@@ -41,6 +42,9 @@ function handleHydrationError(replay: ReplayContainer, event: ErrorEvent): void
   ) {
     const breadcrumb = createBreadcrumb({
       category: 'replay.hydrate-error',
+      data: {
+        url: getLocationHref(),
+      },
     });
     addBreadcrumbEvent(replay, breadcrumb);
   }

packages/replay-internal/src/types/replayFrame.ts

@@ -68,6 +68,14 @@ interface ReplayMutationFrame extends ReplayBaseBreadcrumbFrame {
   data: ReplayMutationFrameData;
 }
 
+interface ReplayHydrationErrorFrameData {
+  url: string;
+}
+interface ReplayHydrationErrorFrame extends ReplayBaseBreadcrumbFrame {
+  category: 'replay.hydrate-error';
+  data: ReplayHydrationErrorFrameData;
+}
+
 interface ReplayKeyboardEventFrameData extends ReplayBaseDomFrameData {
   metaKey: boolean;
   shiftKey: boolean;
@@ -146,6 +154,7 @@ export type ReplayBreadcrumbFrame =
   | ReplaySlowClickFrame
   | ReplayMultiClickFrame
   | ReplayMutationFrame
+  | ReplayHydrationErrorFrame
   | ReplayFeedbackFrame
   | ReplayBaseBreadcrumbFrame;
 

packages/replay-internal/test/integration/coreHandlers/handleBeforeSendEvent.test.ts

@@ -38,6 +38,7 @@ describe('Integration | coreHandlers | handleBeforeSendEvent', () => {
       data: {
         payload: {
           category: 'replay.hydrate-error',
+          data: { url: 'http://localhost:3000/' },
           timestamp: expect.any(Number),
           type: 'default',
         },
@@ -71,6 +72,7 @@ describe('Integration | coreHandlers | handleBeforeSendEvent', () => {
       data: {
         payload: {
           category: 'replay.hydrate-error',
+          data: { url: 'http://localhost:3000/' },
           timestamp: expect.any(Number),
           type: 'default',
         },