Skip to content

[ReactDebugTools] wrap uncaught error from rendering user's component #24216

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 12 commits into from
Apr 1, 2022
Merged

[ReactDebugTools] wrap uncaught error from rendering user's component #24216

Changes from 4 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e10125d
[ReactDebugTools] wrap uncaught error from rendering user's component
mondaychen Mar 25, 2022
82bcb13
fix lint
mondaychen Mar 30, 2022
35faa3a
make error names more package specific
mondaychen Mar 30, 2022
589deb6
update per review comments
mondaychen Mar 30, 2022
56f0584
fix tests
mondaychen Mar 30, 2022
e180865
fix lint
mondaychen Mar 30, 2022
2a3e9d4
fix tests
mondaychen Mar 31, 2022
e4039a4
fix lint
mondaychen Mar 31, 2022
4939cb2
fix error name & nits
mondaychen Mar 31, 2022
ce34cfe
try catch instead of mocking error
mondaychen Apr 1, 2022
19cb6e5
fix test for older node.js version
mondaychen Apr 1, 2022
79d0f59
avoid false positive from try-catch in tests
mondaychen Apr 1, 2022
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
28 changes: 27 additions & 1 deletion packages/react-debug-tools/src/ReactDebugHooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -366,7 +366,7 @@ const DispatcherProxyHandler = {
const error = new Error('Missing method in Dispatcher: ' + prop);
// Note: This error name needs to stay in sync with react-devtools-shared
// TODO: refactor this if we ever combine the devtools and debug tools packages
error.name = 'UnsupportedFeatureError';
error.name = 'ReactDebugToolsUnsupportedHookError';
throw error;
},
};
Expand Down Expand Up @@ -667,6 +667,28 @@ function processDebugValues(
}
}

function handleRenderFunctionError(error: any): void {
// original error might be any type.
if (
error instanceof Error &&
error.name === 'ReactDebugToolsUnsupportedHookError'
) {
throw error;
}
// If the error is not caused by an unsupported feature, it means
// that the error is caused by user's code in renderFunction.
// In this case, we should wrap the original error inside a custom error
// so that devtools can give a clear message about it.
// $FlowFixMe: Flow doesn't know about 2nd argument of Error constructor
const wrapperError = new Error('Error rendering inspected component', {
cause: error,
});
// Note: This error name needs to stay in sync with react-devtools-shared
// TODO: refactor this if we ever combine the devtools and debug tools packages
wrapperError.name = 'ReactDebugToolsRenderFunctionError';
throw wrapperError;
Copy link
Contributor

@lunaruan lunaruan Mar 30, 2022

Choose a reason for hiding this comment

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

Nit: Stylistic choice but this feels a bit cleaner to me?

let newError = error;
if (!(error instanceof Error) || error.name !== 'ReactDebugToolsUnsupportedHookError') {
  // If the error is not caused by an unsupported feature, it means
  // that the error is caused by user's code in renderFunction.
  // In this case, we should wrap the original error inside a custom error
  // so that devtools can give a clear message about it.
  // $FlowFixMe: Flow doesn't know about 2nd argument of Error constructor
  let newError = new Error('Error rendering inspected component', {
    cause: error,
  });
  // Note: This error name needs to stay in sync with react-devtools-shared
  // TODO: refactor this if we ever combine the devtools and debug tools packages
  newError.name = 'ReactDebugToolsRenderFunctionError';
}

throw newError;

}

export function inspectHooks<Props>(
renderFunction: Props => React$Node,
props: Props,
Expand All @@ -686,6 +708,8 @@ export function inspectHooks<Props>(
try {
ancestorStackError = new Error();
renderFunction(props);
} catch (error) {
handleRenderFunctionError(error);
} finally {
readHookLog = hookLog;
hookLog = [];
Expand Down Expand Up @@ -730,6 +754,8 @@ function inspectHooksOfForwardRef<Props, Ref>(
try {
ancestorStackError = new Error();
renderFunction(props, ref);
} catch (error) {
handleRenderFunctionError(error);
} finally {
readHookLog = hookLog;
hookLog = [];
Expand Down