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

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

@@ -16,6 +16,7 @@
 
 export const ErrorsNames = {
   UNSUPPORTTED_FEATURE_ERROR: 'UnsupportedFeatureError',
+  RENDER_FUNCTION_ERROR: 'RenderFunctionError',
 };
 
 // For now we just override the name. If we decide to move react-debug-tools to
@@ -25,3 +26,13 @@ export function createUnsupportedFeatureError(message: string = '') {
   error.name = ErrorsNames.UNSUPPORTTED_FEATURE_ERROR;
   return error;
 }
+
+export function createRenderFunctionError(
+  message: string = '',
+  options: Object = {},
+) {
+  // $FlowFixMe: Flow doesn't know about 2nd argument of Error constructor
+  const error = new Error(message, options);
+  error.name = ErrorsNames.RENDER_FUNCTION_ERROR;
+  return error;
+}

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

@@ -29,7 +29,11 @@ import {
   ContextProvider,
   ForwardRef,
 } from 'react-reconciler/src/ReactWorkTags';
-import {createUnsupportedFeatureError} from './ReactDebugCustomErrors';
+import {
+  createUnsupportedFeatureError,
+  createRenderFunctionError,
+  ErrorsNames,
+} from './ReactDebugCustomErrors';
 
 type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;
 
@@ -666,6 +670,23 @@ function processDebugValues(
   }
 }
 
+function handleRenderFunctionError(error: any): void {
+  // original error might be any type.
+  const isError = error instanceof Error;
+  if (isError && error.name === ErrorsNames.UNSUPPORTTED_FEATURE_ERROR) {
+    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';
+  throw createRenderFunctionError(messgae, {cause: error});
+}
+
 export function inspectHooks<Props>(
   renderFunction: Props => React$Node,
   props: Props,
@@ -685,6 +706,8 @@ export function inspectHooks<Props>(
   try {
     ancestorStackError = new Error();
     renderFunction(props);
+  } catch (error) {
+    handleRenderFunctionError(error);
   } finally {
     readHookLog = hookLog;
     hookLog = [];
@@ -729,6 +752,8 @@ function inspectHooksOfForwardRef<Props, Ref>(
   try {
     ancestorStackError = new Error();
     renderFunction(props, ref);
+  } catch (error) {
+    handleRenderFunctionError(error);
   } finally {
     readHookLog = hookLog;
     hookLog = [];