{"patch":"diff --git a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\nindex d12b1aca9d..8294883db5 100644\n--- a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n+++ b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n@@ -131,6 +131,7 @@ var ReactDOM = {\n render(element : ReactElement, container : DOMContainerElement, callback: ?Function) {\n warnAboutUnstableUse();\n let root;\n+\n if (!container._reactRootContainer) {\n root = container._reactRootContainer = DOMRenderer.mountContainer(element, container, callback);\n } else {\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\nindex 54ca2ef2cb..d861c81cd1 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n@@ -12,6 +12,7 @@\n \n 'use strict';\n \n+import type { TrappedError } from 'ReactFiberErrorBoundary';\n import type { Fiber } from 'ReactFiber';\n import type { FiberRoot } from 'ReactFiberRoot';\n import type { HostConfig } from 'ReactFiberReconciler';\n@@ -205,8 +206,7 @@ module.exports = function(config : HostConfig) {\n \n \/\/ Now that the tree has been committed, we can handle errors.\n if (allTrappedErrors) {\n- \/\/ TODO: handle multiple errors with distinct boundaries.\n- handleError(allTrappedErrors[0]);\n+ handleErrors(allTrappedErrors);\n }\n }\n \n@@ -377,7 +377,7 @@ module.exports = function(config : HostConfig) {\n throw error;\n }\n const trappedError = trapError(failedUnitOfWork, error);\n- handleError(trappedError);\n+ handleErrors([trappedError]);\n }\n }\n \n@@ -408,6 +408,7 @@ module.exports = function(config : HostConfig) {\n \/\/ We're the only work scheduled.\n nextScheduledRoot = root;\n lastScheduledRoot = root;\n+\n scheduleDeferredCallback(performDeferredWork);\n }\n }\n@@ -443,7 +444,7 @@ module.exports = function(config : HostConfig) {\n throw error;\n }\n const trappedError = trapError(failedUnitOfWork, error);\n- handleError(trappedError);\n+ handleErrors([trappedError]);\n }\n }\n \n@@ -471,56 +472,99 @@ module.exports = function(config : HostConfig) {\n }\n }\n \n- function handleError(trappedError) {\n- const boundary = trappedError.boundary;\n- const error = trappedError.error;\n- if (!boundary) {\n- throw error;\n+ function scheduleErrorBoundaryWork(boundary : Fiber, priority) : FiberRoot {\n+ let root = null;\n+ let fiber = boundary;\n+ while (fiber) {\n+ fiber.pendingWorkPriority = priority;\n+ if (fiber.alternate) {\n+ fiber.alternate.pendingWorkPriority = priority;\n+ }\n+ if (!fiber.return) {\n+ if (fiber.tag === HostContainer) {\n+ \/\/ We found the root.\n+ \/\/ Remember it so we can update it.\n+ root = ((fiber.stateNode : any) : FiberRoot);\n+ break;\n+ } else {\n+ throw new Error('Invalid root');\n+ }\n+ }\n+ fiber = fiber.return;\n+ }\n+ if (!root) {\n+ throw new Error('Could not find root from the boundary.');\n }\n+ return root;\n+ }\n \n- try {\n- \/\/ Give error boundary a chance to update its state\n- acknowledgeErrorInBoundary(boundary, error);\n-\n- \/\/ We will process an update caused by an error boundary with synchronous priority.\n- \/\/ This leaves us free to not keep track of whether a boundary has errored.\n- \/\/ If it errors again, we will just catch the error and synchronously propagate it higher.\n-\n- \/\/ First, traverse upwards and set pending synchronous priority on the whole tree.\n- let fiber = boundary;\n- while (fiber) {\n- fiber.pendingWorkPriority = SynchronousPriority;\n- if (fiber.alternate) {\n- fiber.alternate.pendingWorkPriority = SynchronousPriority;\n+ function handleErrors(initialTrappedErrors : Array) : void {\n+ let nextTrappedErrors = initialTrappedErrors;\n+ let firstUncaughtError = null;\n+\n+ \/\/ In each phase, we will attempt to pass errors to boundaries and re-render them.\n+ \/\/ If we get more errors, we propagate them to higher boundaries in the next iterations.\n+ while (nextTrappedErrors) {\n+ const trappedErrors = nextTrappedErrors;\n+ nextTrappedErrors = null;\n+\n+ \/\/ Pass errors to all affected boundaries.\n+ const affectedBoundaries : Set = new Set();\n+ trappedErrors.forEach(trappedError => {\n+ const boundary = trappedError.boundary;\n+ const error = trappedError.error;\n+ if (!boundary) {\n+ firstUncaughtError = firstUncaughtError || error;\n+ return;\n }\n- if (!fiber.return) {\n- if (fiber.tag === HostContainer) {\n- \/\/ We found the root.\n- \/\/ Now go to the second phase and update it synchronously.\n- break;\n- } else {\n- throw new Error('Invalid root');\n+ \/\/ Don't visit boundaries twice.\n+ if (affectedBoundaries.has(boundary)) {\n+ return;\n+ }\n+ \/\/ Give error boundary a chance to update its state.\n+ try {\n+ acknowledgeErrorInBoundary(boundary, error);\n+ affectedBoundaries.add(boundary);\n+ } catch (nextError) {\n+ \/\/ If it throws, propagate the error.\n+ nextTrappedErrors = nextTrappedErrors || [];\n+ nextTrappedErrors.push(trapError(boundary, nextError));\n+ }\n+ });\n+\n+ \/\/ We will process an update caused by each error boundary synchronously.\n+ affectedBoundaries.forEach(boundary => {\n+ \/\/ FIXME: We only specify LowPriority here so that setState() calls from the error\n+ \/\/ boundaries are respected. Instead we should set default priority level or something\n+ \/\/ like this. Reconsider this piece when synchronous scheduling is in place.\n+ const priority = LowPriority;\n+ const root = scheduleErrorBoundaryWork(boundary, priority);\n+ \/\/ This should use findNextUnitOfWork() when synchronous scheduling is implemented.\n+ let fiber = cloneFiber(root.current, priority);\n+ try {\n+ while (fiber) {\n+ \/\/ TODO: this is the only place where we recurse and it's unfortunate.\n+ \/\/ (This may potentially get us into handleErrors() again.)\n+ fiber = performUnitOfWork(fiber, true);\n }\n+ } catch (nextError) {\n+ \/\/ If it throws, propagate the error.\n+ nextTrappedErrors = nextTrappedErrors || [];\n+ nextTrappedErrors.push(trapError(boundary, nextError));\n }\n- fiber = fiber.return;\n- }\n-\n- if (!fiber) {\n- throw new Error('Could not find an error boundary root.');\n- }\n+ });\n+ }\n \n- \/\/ Find the work in progress tree.\n- const root : FiberRoot = (fiber.stateNode : any);\n- fiber = root.current.alternate;\n+ \/\/ Surface the first error uncaught by the boundaries to the user.\n+ if (firstUncaughtError) {\n+ \/\/ We need to make sure any future root can get scheduled despite these errors.\n+ \/\/ Currently after throwing, nothing gets scheduled because these fields are set.\n+ \/\/ FIXME: this is likely a wrong fix! It's still better than ignoring updates though.\n+ nextScheduledRoot = null;\n+ lastScheduledRoot = null;\n \n- \/\/ Perform all the work synchronously.\n- while (fiber) {\n- fiber = performUnitOfWork(fiber, true);\n- }\n- } catch (nextError) {\n- \/\/ Propagate error to the next boundary or rethrow.\n- const nextTrappedError = trapError(boundary, nextError);\n- handleError(nextTrappedError);\n+ \/\/ Throw any unhandled errors.\n+ throw firstUncaughtError;\n }\n }\n \n","files":[{"status":"M","path":"src\/renderers\/dom\/fiber\/ReactDOMFiber.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/ReactFiberScheduler.js"}],"commit":{"shortRevision":"d8441cd725","authorEmail":"dan.abramov@gmail.com","authorName":"Dan Abramov","authoredAt":"2016-10-28T21:22:44+01:00","revision":"d8441cd725bcc3bc4f5be7d21be0f3788fde9590","subject":"Handle multiple errors in boundaries"},"body":"","parents":["c08469a7d6647fd1e4f0480713bdf2d9e49a719f"]}

dillon1000/react

Files changed