Skip to content

Re-throw errors thrown by the renderer at the root in the complete phase #18029

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 18, 2020
Merged

Re-throw errors thrown by the renderer at the root in the complete phase #18029

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2299d1d
Re-throw errors thrown by the renderer at the root
acdlite Feb 12, 2020
348302e
Add comment
acdlite Feb 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions packages/react-noop-renderer/src/createReactNoop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -533,6 +533,13 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
newChildren: Array<Instance | TextInstance>,
): void {
container.pendingChildren = newChildren;
if (
newChildren.length === 1 &&
newChildren[0].text === 'Error when completing root'
) {
// Trigger an error for testing purposes
throw Error('Error when completing root');
}
},

replaceContainerChildren(
Expand Down
7 changes: 7 additions & 0 deletions packages/react-reconciler/src/ReactFiberWorkLoop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1285,6 +1285,13 @@ function handleError(root, thrownValue) {
// boundary.
workInProgressRootExitStatus = RootFatalErrored;
workInProgressRootFatalError = thrownValue;
// Set `workInProgress` to null. This represents advancing to the next
// sibling, or the parent if there are no siblings. But since the root
// has no siblings nor a parent, we set it to null. Usually this is
// handled by `completeUnitOfWork` or `unwindWork`, but since we're
// interntionally not calling those, we need set it here.
// TODO: Consider calling `unwindWork` to pop the contexts.
workInProgress = null;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is happening here? Why does this work?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This adds a new test case and fixes a bug where React would keep retrying the root because the workInProgress pointer was not advanced to the next fiber. (Which in this case is null, since it's the root.)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In other words, it falls into an infinite loop because workInProgress is stuck on the the host root fiber forever. Usually workInProgress gets advanced during either beingWork or completeUnitOfWork but since it keeps erroring that never happens.

Copy link
Collaborator

@sebmarkbage sebmarkbage Feb 13, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah. Subtle. A comment saying that this represents moving to the next sibling would be nice but not required.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok I'll add one! I think there's a potential follow up to also call unwindWork here to pop the contexts. I originally didn't bother because it's not impossible even that call will throw, but if layout errors are common enough it might be worth doing more to prevent corrupted internal state.

return null;
}

Expand Down
12 changes: 12 additions & 0 deletions packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1658,4 +1658,16 @@ describe('ReactIncrementalErrorHandling', () => {
'Please update the following components: Provider',
]);
});

if (global.__PERSISTENT__) {
it('regression test: should fatal if error is thrown at the root', () => {
const root = ReactNoop.createRoot();
root.render('Error when completing root');
expect(Scheduler).toFlushAndThrow('Error when completing root');

const blockingRoot = ReactNoop.createBlockingRoot();
blockingRoot.render('Error when completing root');
expect(Scheduler).toFlushAndThrow('Error when completing root');
});
}
});