[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 = [];