Error Boundary in React

Authored by
undefined's avatar
  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
  1. NormalNode has run() to generate the value that need to be collected.
  2. ErrorBoundary itself doesn't own value, but if any node under it throws in run(), then closest ErrorBoundary 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...