-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Closed
Labels
Package: remixIssues related to the Sentry Remix SDKIssues related to the Sentry Remix SDK
Description
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 alinks
functions to your root). - Add the
Sentry.init(...)
code toentry.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)
corygibbons
Metadata
Metadata
Assignees
Labels
Package: remixIssues related to the Sentry Remix SDKIssues related to the Sentry Remix SDK