Skip to content
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.

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

Fix context handling for errors thrown in ClassComponent render #8604

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions scripts/fiber/tests-passing.txt
Original file line number Diff line number Diff line change
Expand Up @@ -1157,6 +1157,7 @@ src/renderers/shared/fiber/__tests__/ReactIncremental-test.js
* reads context when setState is below the provider
* reads context when setState is above the provider
* maintains the correct context index when context proviers are bailed out due to low priority
* maintains the correct context index when unwinding due to an error ocurring during render

src/renderers/shared/fiber/__tests__/ReactIncrementalErrorHandling-test.js
* catches render error in a boundary during full deferred mounting
Expand Down
18 changes: 11 additions & 7 deletions src/renderers/shared/fiber/ReactFiberBeginWork.js
Original file line number Diff line number Diff line change
Expand Up @@ -240,13 +240,17 @@ module.exports = function<T, P, I, TI, C, CX>(
}

// Rerender
const instance = workInProgress.stateNode;
ReactCurrentOwner.current = workInProgress;
const nextChildren = instance.render();
reconcileChildren(current, workInProgress, nextChildren);
// Put context on the stack because we will work on children
if (isContextProvider(workInProgress)) {
pushContextProvider(workInProgress, true);
try {
const instance = workInProgress.stateNode;
ReactCurrentOwner.current = workInProgress;
const nextChildren = instance.render();
reconcileChildren(current, workInProgress, nextChildren);
} finally {
Copy link
Contributor

Choose a reason for hiding this comment

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

try blocks prevent the containing function from being optimized. Can you find a way to solve this problem without adding a new try block? Maybe by fixing it in unwindContext?

Copy link
Contributor Author

@bvaughn bvaughn Dec 20, 2016

Choose a reason for hiding this comment

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

I could move the call to instance.render into a separate function that is try/finally wrapped to minimize the impact. (I'm not an expert with the whole inlining area.) In its currently form I think it would be difficult to fix things in unwindContext.

Although I'm working today on an effort to combine ReactFiberContext and ReactFiberHostContext and add fiber-level tracking so that we won't pop a Fiber more than once, or pop one that wasn't pushed. It will hopefully ease the pressure here a bit as it would enable us to just dev-warn and ignore the bad pop rather than throw an error.

// Put context on the stack because we will work on children.
// Push even if Error in render() because unwindContext() always pops.
if (isContextProvider(workInProgress)) {
pushContextProvider(workInProgress, true);
}
}
return workInProgress.child;
}
Expand Down
47 changes: 47 additions & 0 deletions src/renderers/shared/fiber/__tests__/ReactIncremental-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -1975,4 +1975,51 @@ describe('ReactIncremental', () => {
instance.setState({});
ReactNoop.flush();
});

it('maintains the correct context index when unwinding due to an error ocurring during render', () => {
class Root extends React.Component {
unstable_handleError(error) {
// If context is pushed/popped correctly,
// This method will be used to handle the intentionally-thrown Error.
}
render() {
return <ContextProvider depth={1} />;
}
}

let instance;

class ContextProvider extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {};
if (props.depth === 1) {
instance = this;
}
}
static childContextTypes = {};
getChildContext() {
return {};
}
render() {
if (this.state.throwError) {
throw Error();
}
return this.props.depth < 4
? <ContextProvider depth={this.props.depth + 1} />
: <div/>;
}
}

// Init
ReactNoop.render(<Root />);
ReactNoop.flush();

// Trigger an update in the middle of the tree
// This is necessary to reproduce the error as it curently exists.
instance.setState({
throwError: true,
});
ReactNoop.flush();
});
});