Error Boundary in React
Authored by
JSer

- accepted / - tried
This is a follow-up question on coding challenge about Fiber Tree Traversal Algorithm
I've explained how Error Boundary works internally in React, please implement something similar by extending coding challenge about Fiber Tree Traversal Algorithm.
Given a fiber tree, each node could be either a NormalNode
or ErrorBoundary
, now you are asked to implement traversal method.
type NormalNode = { nodeType: 'normal', run: () => number, childNode?: FiberNode | null, siblingNode?: FiberNode | null, returnNode?: FiberNode | null,}type ErrorBoundary = { nodeType: 'errorboundary', fallback: FiberNode, childNode?: FiberNode | null siblingNode?: FiberNode | null returnNode?: FiberNode | null didCapture?: boolean | null}type FiberNode = NormalNode | ErrorBoundary
NormalNode
hasrun()
to generate the value that need to be collected.ErrorBoundary
itself doesn't own value, but if any node under it throws inrun()
, then closestErrorBoundary
should switch to the fallback branch and continue traversal.
https://bigfrontend.dev/tools/excalidraw/embed/9648ff12-5fd6-4ce9-899b-f9ee1067360d?w=1220&h=640
For above tree, your traversal()
should return [1,2,4,4,6,7,7,6,9,11,11,13,13,16,16,9,2,3,3,1]
Loading...