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

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -667,6 +667,28 @@ function processDebugValues(
  }
 }
 
+function handleRenderFunctionError(error: any): void {
+ // original error might be any type.
+ const isError = error instanceof Error;
+ if (isError && error.name === 'UnsupportedFeatureError') {
+ 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 show a clear message for it.
+ const messgae: string =
+ isError && error.message
+ ? error.message
+ : 'Error rendering inspected component'
+ // $FlowFixMe: Flow doesn't know about 2nd argument of Error constructor
+ const wrapperError = new Error(messgae, {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 = 'RenderFunctionError';
+ throw wrapperError;
+}
+
 export function inspectHooks<Props>(
  renderFunction: Props => React$Node,
  props: Props,
@@ -686,6 +708,8 @@ export function inspectHooks<Props>(
  try {
  ancestorStackError = new Error();
  renderFunction(props);
+ } catch (error) {
+ handleRenderFunctionError(error);
  } finally {
  readHookLog = hookLog;
  hookLog = [];
@@ -730,6 +754,8 @@ function inspectHooksOfForwardRef<Props, Ref>(
  try {
  ancestorStackError = new Error();
  renderFunction(props, ref);
+ } catch (error) {
+ handleRenderFunctionError(error);
  } finally {
  readHookLog = hookLog;
  hookLog = [];