Authored by
JSer

Error Boundary in React
- 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
NormalNodehasrun()to generate the value that need to be collected.ErrorBoundaryitself doesn't own value, but if any node under it throws inrun(), then closestErrorBoundaryshould 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...