Remix: Hydration errors using 7.8.0 #5490

dmarkow · 2022-07-28T16:42:12Z

Is there an existing issue for this?

I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
I have reviewed the documentation https://docs.sentry.io/
I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/remix

SDK Version

7.8.0

Framework Version

Remix 1.6.5

Link to Sentry event

No response

Steps to Reproduce

Create a new remix app using the indie template: npx create-remix (this also happens if you use the "just the basics", but then add a links functions to your root).
Add the Sentry.init(...) code to entry.server.tsx as described in the documentation.
npm run dev

Expected Result

No hydration errors.

Actual Result

Server-rendered pages cause hydration issues. This did not happen with 7.7.0.

With a "just the basics" template and one stylesheet in the links function I now get this in the browser console:

Warning: Expected server HTML to contain a matching <link> in <head>.
    at link
    at Links (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:2938:7)
    at head
    at html
    at App
    at SentryRoot (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:8253:20)
    at ErrorBoundary (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:8120:5)
    at errorBoundary(SentryRoot)
    at RemixRoute (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:2782:3)
    at Routes2 (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:2765:7)
    at Router (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:962:15)
    at RemixCatchBoundary (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:1272:10)
    at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:1197:5)
    at RemixEntry (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:2662:12)
    at RemixBrowser (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:3404:27)
(anonymous) @ instrument.ts:123
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
warnForInsertedHydratedElement @ react-dom.development.js:9733
didNotFindHydratableInstance @ react-dom.development.js:10512
insertNonHydratedInstance @ react-dom.development.js:14509
tryToClaimNextHydratableInstance @ react-dom.development.js:14596
updateHostComponent @ react-dom.development.js:17610
beginWork @ react-dom.development.js:19080
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
hydrate2 @ react-dom.development.js:26086
(anonymous) @ entry.client.tsx:23

Using the indie template, I get a bunch of errors:

Warning: Expected server HTML to contain a matching <link> in <head>.
    at link
    at Links (http://localhost:3000/build/_shared/chunk-XOSPV4IN.js:2743:7)
    at head
    at html
    at App
    at SentryRoot (http://localhost:3000/build/_shared/chunk-6QXZE7SL.js:4990:20)
    at ErrorBoundary (http://localhost:3000/build/_shared/chunk-6QXZE7SL.js:4857:5)
    at errorBoundary(SentryRoot)
    at RemixRoute (http://localhost:3000/build/_shared/chunk-XOSPV4IN.js:2587:3)
    at Routes2 (http://localhost:3000/build/_shared/chunk-XOSPV4IN.js:2570:7)
    at Router (http://localhost:3000/build/_shared/chunk-XOSPV4IN.js:679:15)
    at RemixCatchBoundary (http://localhost:3000/build/_shared/chunk-XOSPV4IN.js:1074:10)
    at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-XOSPV4IN.js:999:5)
    at RemixEntry (http://localhost:3000/build/_shared/chunk-XOSPV4IN.js:2467:12)
    at RemixBrowser (http://localhost:3000/build/_shared/chunk-XOSPV4IN.js:3225:27)
(anonymous) @ instrument.ts:123
overrideMethod @ react_devtools_backend.js:4026
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnForInsertedHydratedElement @ react-dom.development.js:10499
didNotFindHydratableInstance @ react-dom.development.js:11458
warnNonhydratedInstance @ react-dom.development.js:12385
tryToClaimNextHydratableInstance @ react-dom.development.js:12534
updateHostComponent @ react-dom.development.js:19902
beginWork @ react-dom.development.js:21618
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19902:5)
    at beginWork (react-dom.development.js:21618:14)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at HTMLUnknownElement.sentryWrapped (index.js:95:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopConcurrent (react-dom.development.js:26543:5)
    at renderRootConcurrent (react-dom.development.js:26505:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:38)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)
throwOnHydrationMismatch @ react-dom.development.js:12507
tryToClaimNextHydratableInstance @ react-dom.development.js:12535
updateHostComponent @ react-dom.development.js:19902
beginWork @ react-dom.development.js:21618
callCallback2 @ react-dom.development.js:4164
sentryWrapped @ index.js:95
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19902:5)
    at beginWork (react-dom.development.js:21618:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopConcurrent (react-dom.development.js:26543:5)
    at renderRootConcurrent (react-dom.development.js:26505:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:38)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)
throwOnHydrationMismatch @ react-dom.development.js:12507
tryToClaimNextHydratableInstance @ react-dom.development.js:12535
updateHostComponent @ react-dom.development.js:19902
beginWork @ react-dom.development.js:21618
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
    at updateHostRoot (react-dom.development.js:19849:57)
    at beginWork (react-dom.development.js:21615:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at recoverFromConcurrentError (react-dom.development.js:25850:20)
    at performConcurrentWorkOnRoot (react-dom.development.js:25750:22)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)

The text was updated successfully, but these errors were encountered:

AbhiPrasad · 2022-07-28T16:45:07Z

Hey thanks for writing in, and giving such a detailed bug report! We are taking a look :)

AbhiPrasad · 2022-07-28T19:38:47Z

Hey, I was unable to reproduce this. Are you only using Sentry.init in the server, or on the client side too? Also, are you using withSentry in any way?

dmarkow · 2022-07-28T21:32:16Z

@AbhiPrasad I followed the instructions exactly: added the Sentry.init code to both client and server entry files, and the withSentry wrapper on my root.

https://github.com/dmarkow/sentry-remix-hydration-error

Here is a simple reproduction. It's a plain npx create-remix app, the only changes were adding @sentry/[email protected] and adding a single CSS file. Just replace the DSN with something valid in entry.client.tsx and entry.server.tsx and then npm run dev. Load the page in your browser and you should see the hydration error. A couple notes:

After the initial page load, the <link rel="stylesheet" ... /> item for my CSS is loaded twice, probably due to a hydration mismatch. Seeing the same issue in my actual production app.
Only the code in entry.server.tsx seems to cause this. If I remove the Sentry code in the client entrypoint and remove the withSentry wrapper, it still has the hydration error. But removing the entry.server.tsx Sentry code fixes hydration and the double-loading issue mentioned above.

AbhiPrasad · 2022-07-28T21:50:06Z

Thank you for the repro app! Looking at 7.7.0...7.8.0, This might be related to #5440 @onurtemizkan

Not sure why setting the meta tag is disrupting the hydration like that though 🤔

AbhiPrasad · 2022-07-28T21:56:34Z

Well we should probably do a couple things here to start off.

Enforce that the meta monkey patch logic is runs on the server
Make sure that we are not attaching meta headers if tracing is not enabled

dmarkow added the Type: Bug label Jul 28, 2022

getsantry bot added the Status: Untriaged label Jul 28, 2022

AbhiPrasad added Status: Needs Reproduction Package: remix Issues related to the Sentry Remix SDK labels Jul 28, 2022

getsantry bot removed Status: Untriaged labels Jul 28, 2022

AbhiPrasad self-assigned this Jul 28, 2022

onurtemizkan mentioned this issue Aug 2, 2022

fix(remix): Provide sentry-trace and baggage via root loader. #5509

Merged

AbhiPrasad closed this as completed in #5509 Aug 3, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remix: Hydration errors using 7.8.0 #5490

Remix: Hydration errors using 7.8.0 #5490

dmarkow commented Jul 28, 2022 •

edited

Loading

AbhiPrasad commented Jul 28, 2022

AbhiPrasad commented Jul 28, 2022

dmarkow commented Jul 28, 2022

AbhiPrasad commented Jul 28, 2022

AbhiPrasad commented Jul 28, 2022

Remix: Hydration errors using 7.8.0 #5490

Remix: Hydration errors using 7.8.0 #5490

Comments

dmarkow commented Jul 28, 2022 • edited Loading

Is there an existing issue for this?

How do you use Sentry?

Which package are you using?

SDK Version

Framework Version

Link to Sentry event

Steps to Reproduce

Expected Result

Actual Result

AbhiPrasad commented Jul 28, 2022

AbhiPrasad commented Jul 28, 2022

dmarkow commented Jul 28, 2022

AbhiPrasad commented Jul 28, 2022

AbhiPrasad commented Jul 28, 2022

dmarkow commented Jul 28, 2022 •

edited

Loading