fix(replay): Adjust development hydration error messages (#9922)

Refine the regex to match fewer errors, seeing some false positives in
replays that are not hydration errors.

fixes getsentry/sentry#61943

Author: scttcper

packages/replay/src/coreHandlers/handleBeforeSendEvent.ts

@@ -31,8 +31,9 @@ function handleHydrationError(replay: ReplayContainer, event: ErrorEvent): void
     // Example https://reactjs.org/docs/error-decoder.html?invariant=423
     exceptionValue.match(/reactjs\.org\/docs\/error-decoder\.html\?invariant=(418|419|422|423|425)/) ||
     // Development builds of react-dom
-    // Example Text: content did not match. Server: "A" Client: "B"
-    exceptionValue.match(/(hydration|content does not match|did not match)/i)
+    // Error 1: Hydration failed because the initial UI does not match what was rendered on the server.
+    // Error 2: Text content does not match server-rendered HTML. Warning: Text content did not match.
+    exceptionValue.match(/(does not match server-rendered HTML|Hydration failed because)/i)
   ) {
     const breadcrumb = createBreadcrumb({
       category: 'replay.hydrate-error',

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

@@ -27,7 +27,8 @@ describe('Integration | coreHandlers | handleBeforeSendEvent', () => {
     const addBreadcrumbSpy = jest.spyOn(replay, 'throttledAddEvent');
 
     const error = Error();
-    error.exception.values[0].value = 'Text content did not match. Server: "A" Client: "B"';
+    error.exception.values[0].value =
+      'Text content does not match server-rendered HTML. Warning: Text content did not match.';
     handler(error);
 
     expect(addBreadcrumbSpy).toHaveBeenCalledTimes(1);