Remix: Hydration errors using 7.8.0

### Is there an existing issue for this?

- [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
- [X] I have reviewed the documentation https://docs.sentry.io/
- [X] 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

1. 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).
2. Add the `Sentry.init(...)` code to `entry.server.tsx` as described in the documentation.
3. `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)
```

Navigation Menu

Uh oh!

Uh oh!

Remix: Hydration errors using 7.8.0 #5490

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

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Uh oh!

Uh oh!

Remix: Hydration errors using 7.8.0 #5490

Description

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

Activity

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions