From 2d699121f70f94029ff25b98442ca1363f92edd3 Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Tue, 19 Dec 2023 13:41:53 -0800 Subject: [PATCH] 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 https://github.com/getsentry/sentry/issues/61943 --- packages/replay/src/coreHandlers/handleBeforeSendEvent.ts | 5 +++-- .../integration/coreHandlers/handleBeforeSendEvent.test.ts | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/replay/src/coreHandlers/handleBeforeSendEvent.ts b/packages/replay/src/coreHandlers/handleBeforeSendEvent.ts index d7276897497e..9427bc60e45b 100644 --- a/packages/replay/src/coreHandlers/handleBeforeSendEvent.ts +++ b/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', diff --git a/packages/replay/test/integration/coreHandlers/handleBeforeSendEvent.test.ts b/packages/replay/test/integration/coreHandlers/handleBeforeSendEvent.test.ts index 92cdc5a88698..a1462b974711 100644 --- a/packages/replay/test/integration/coreHandlers/handleBeforeSendEvent.test.ts +++ b/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);