Repository: remix-run/remix

Issue #1678: [Bug]: Client-only errors are not handled correctly on initial load. (Infinite loop!)
Created: 2022-01-27T17:40:35Z
What version of Remix are you using?
1.1.3
What version of Node are you using? Minimum supported version is 14.
17.3.0
Steps to Reproduce

Clone the simple repro case: https://github.com/maulerjan/remix-issue-1678-repro
npm install & npm run dev
Click on the /about link and then refresh the page

Expected Behavior
Renders ErrorBoundary.
Actual Behavior
ErrorBoundary mounting errors resulting in an infinite loop.
The server correctly renders the page with no error (SSR), but then there's the client-only error during hydration. I'm not sure what exactly happens next, but the whole thing ends up in an infinite loop of mounting ErrorBoundary, which itself throws an error, which again tries to mount the ErrorBoundary and so on.
EDIT:
If the client-only error happens in the root component (App), then it's handled correctly, so this only affects nested modules' components.

Duplicate issue #2118: RemixErrorBoundary caught in infinite crash loop when exception thrown in root handler in browser
Created: 2022-02-24T22:29:58Z
What version of Remix are you using?
1.2.1
Steps to Reproduce
Add default error handler in root.tsx https://remix.run/docs/en/v1/guides/errors#root-error-boundary
Add code that will throw in the browser in the root index.tsx:
export default function Index() {
  if (typeof window !== "undefined") {
    (0 as any).missingFunction();
  }

  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>Hi</h1>
    </div>
  );
}
Expected Behavior
Display a blank page and "Oh No" in the title without freezing up the browser tab with endless console errors.
Actual Behavior
entry.client-KIPMOS4E.js:7764 Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
    at appendChildToContainer (http://localhost:3000/build/entry.client-KIPMOS4E.js:7764:24)
    at insertOrAppendPlacementNodeIntoContainer (http://localhost:3000/build/entry.client-KIPMOS4E.js:15326:15)
    at insertOrAppendPlacementNodeIntoContainer (http://localhost:3000/build/entry.client-KIPMOS4E.js:15333:15)
    at commitPlacement (http://localhost:3000/build/entry.client-KIPMOS4E.js:15313:13)
    at commitMutationEffects (http://localhost:3000/build/entry.client-KIPMOS4E.js:16675:17)
    at HTMLUnknownElement.callCallback2 (http://localhost:3000/build/entry.client-KIPMOS4E.js:3680:22)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/build/entry.client-KIPMOS4E.js:3705:24)
    at invokeGuardedCallback (http://localhost:3000/build/entry.client-KIPMOS4E.js:3739:39)
    at commitRootImpl (http://localhost:3000/build/entry.client-KIPMOS4E.js:16520:17)
    at unstable_runWithPriority (http://localhost:3000/build/entry.client-KIPMOS4E.js:351:20)
appendChildToContainer @ entry.client-KIPMOS4E.js:7764
insertOrAppendPlacementNodeIntoContainer @ entry.client-KIPMOS4E.js:15326
insertOrAppendPlacementNodeIntoContainer @ entry.client-KIPMOS4E.js:15333
commitPlacement @ entry.client-KIPMOS4E.js:15313
commitMutationEffects @ entry.client-KIPMOS4E.js:16675
callCallback2 @ entry.client-KIPMOS4E.js:3680
invokeGuardedCallbackDev @ entry.client-KIPMOS4E.js:3705
invokeGuardedCallback @ entry.client-KIPMOS4E.js:3739
commitRootImpl @ entry.client-KIPMOS4E.js:16520
unstable_runWithPriority @ entry.client-KIPMOS4E.js:351
runWithPriority$1 @ entry.client-KIPMOS4E.js:8477
commitRoot @ entry.client-KIPMOS4E.js:16441
performSyncWorkOnRoot @ entry.client-KIPMOS4E.js:16006
(anonymous) @ entry.client-KIPMOS4E.js:8517
unstable_runWithPriority @ entry.client-KIPMOS4E.js:351
runWithPriority$1 @ entry.client-KIPMOS4E.js:8477
flushSyncCallbackQueueImpl @ entry.client-KIPMOS4E.js:8513
flushSyncCallbackQueue @ entry.client-KIPMOS4E.js:8503
unbatchedUpdates @ entry.client-KIPMOS4E.js:16084
legacyRenderSubtreeIntoContainer @ entry.client-KIPMOS4E.js:18579
hydrate2 @ entry.client-KIPMOS4E.js:18628
(anonymous) @ entry.client-KIPMOS4E.js:18790

2entry.client-KIPMOS4E.js:14603 The above error occurred in the <ErrorBoundary> component:

    at ErrorBoundary (http://localhost:3000/build/root-ME527SWU.js:23:26)
    at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-WBC6FA6Y.js:878:5)
    at RemixRoute (http://localhost:3000/build/_shared/chunk-WBC6FA6Y.js:2423:3)
    at Routes2 (http://localhost:3000/build/_shared/chunk-WBC6FA6Y.js:2406:7)
    at Router (http://localhost:3000/build/_shared/chunk-WBC6FA6Y.js:218:15)
    at RemixCatchBoundary (http://localhost:3000/build/_shared/chunk-WBC6FA6Y.js:953:10)
    at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-WBC6FA6Y.js:878:5)
    at RemixEntry (http://localhost:3000/build/_shared/chunk-WBC6FA6Y.js:2303:12)
    at RemixBrowser (http://localhost:3000/build/_shared/chunk-WBC6FA6Y.js:2720:27)

React will try to recreate this component tree from scratch using the error boundary you provided, RemixErrorBoundary.
logCapturedError @ entry.client-KIPMOS4E.js:14603
update.payload @ entry.client-KIPMOS4E.js:14634
getStateFromUpdate @ entry.client-KIPMOS4E.js:9093
processUpdateQueue @ entry.client-KIPMOS4E.js:9192
updateClassInstance @ entry.client-KIPMOS4E.js:9757
updateClassComponent @ entry.client-KIPMOS4E.js:12945
beginWork @ entry.client-KIPMOS4E.js:13993
beginWork$1 @ entry.client-KIPMOS4E.js:17074
performUnitOfWork @ entry.client-KIPMOS4E.js:16317
workLoopSync @ entry.client-KIPMOS4E.js:16268
renderRootSync @ entry.client-KIPMOS4E.js:16243
performSyncWorkOnRoot @ entry.client-KIPMOS4E.js:15983
(anonymous) @ entry.client-KIPMOS4E.js:8517
unstable_runWithPriority @ entry.client-KIPMOS4E.js:351
runWithPriority$1 @ entry.client-KIPMOS4E.js:8477
flushSyncCallbackQueueImpl @ entry.client-KIPMOS4E.js:8513
flushSyncCallbackQueue @ entry.client-KIPMOS4E.js:8503
unbatchedUpdates @ entry.client-KIPMOS4E.js:16084
legacyRenderSubtreeIntoContainer @ entry.client-KIPMOS4E.js:18579
hydrate2 @ entry.client-KIPMOS4E.js:18628
(anonymous) @ entry.client-KIPMOS4E.js:18790

Closing comment (2022-03-23T22:00:50Z): Duplicate of #1678