feat(replay): Capture hydration error breadcrumb

packages/replay/src/replay.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines */ // TODO: We might want to split this file up
 import { EventType, record } from '@sentry-internal/rrweb';
 import { captureException, getClient, getCurrentHub } from '@sentry/core';
-import type { ReplayRecordingMode, Transaction } from '@sentry/types';
+import type { Event as SentryEvent, ReplayRecordingMode, Transaction } from '@sentry/types';
 import { logger } from '@sentry/utils';
 
 import {
@@ -823,6 +823,32 @@ export class ReplayContainer implements ReplayContainerInterface {
     }
 
     this._performanceCleanupCallback = setupPerformanceObserver(this);
+
+    const client = getClient();
+    // Start listening for errors that occur in the core SDK
+    client && client.on && client.on('beforeSendEvent', (event: SentryEvent) => {
+      // eslint-disable-next-line @sentry-internal/sdk/no-optional-chaining
+      const exceptionValue = event.exception?.values?.[0]?.value;
+      if (typeof exceptionValue !== 'string') {
+        return;
+      }
+
+      const isHydrationError =
+        // development
+        exceptionValue.match(/nextjs.org\/docs\/messages\/react-hydration-error/) ||
+        // production
+        exceptionValue.match(/https:\/\/reactjs\.org\/docs\/error-decoder\.html\?invariant=(418|419|422|423|425)/);
+
+      // There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
+      if (isHydrationError) {
+        console.log('Found hydration error')
+        const breadcrumb = createBreadcrumb({
+          category: 'replay.hydrate',
+          data: {}
+        })
+        this._createCustomBreadcrumb(breadcrumb);
+      }
+    })
   }
 
   /**