fix typo

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

@@ -356,6 +356,23 @@ const Dispatcher: DispatcherType = {
   useId,
 };
 
+// create a proxy to throw a custom error
+// in case future versions of React adds more hooks
+const DispatcherProxyHandler = {
+  get(target, prop, _receiver) {
+    if (target.hasOwnProperty(prop)) {
+      return target[prop];
+    }
+    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';
+    throw error;
+  },
+};
+
+const DispatcherProxy = new Proxy(Dispatcher, DispatcherProxyHandler);
+
 // Inspect
 
 export type HookSource = {
@@ -650,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,
@@ -664,11 +703,13 @@ export function inspectHooks<Props>(
 
   const previousDispatcher = currentDispatcher.current;
   let readHookLog;
-  currentDispatcher.current = Dispatcher;
+  currentDispatcher.current = DispatcherProxy;
   let ancestorStackError;
   try {
     ancestorStackError = new Error();
     renderFunction(props);
+  } catch (error) {
+    handleRenderFunctionError(error);
   } finally {
     readHookLog = hookLog;
     hookLog = [];
@@ -708,11 +749,13 @@ function inspectHooksOfForwardRef<Props, Ref>(
 ): HooksTree {
   const previousDispatcher = currentDispatcher.current;
   let readHookLog;
-  currentDispatcher.current = Dispatcher;
+  currentDispatcher.current = DispatcherProxy;
   let ancestorStackError;
   try {
     ancestorStackError = new Error();
     renderFunction(props, ref);
+  } catch (error) {
+    handleRenderFunctionError(error);
   } finally {
     readHookLog = hookLog;
     hookLog = [];

packages/react-devtools-shared/src/backend/renderer.js

@@ -60,7 +60,10 @@ import {
   TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
-import {inspectHooksOfFiber} from 'react-debug-tools';
+import {
+  inspectHooksOfFiber,
+  ErrorsNames as DebugToolsErrors,
+} from 'react-debug-tools';
 import {
   patch as patchConsole,
   registerRenderer as registerRendererWithConsole,
@@ -3616,6 +3619,41 @@ export function attach(
     try {
       mostRecentlyInspectedElement = inspectElementRaw(id);
     } catch (error) {
+      if (error.name === DebugToolsErrors.RENDER_FUNCTION_ERROR) {
+        let message = 'Error rendering inspected element.';
+        let stack;
+        // Log error & cause for user to debug
+        console.error(message + '\n\n', error);
+        if (error.cause != null) {
+          console.error(
+            'Original error causing above error: \n\n',
+            error.cause,
+          );
+          if (error.cause instanceof Error) {
+            message = error.cause.message || message;
+            stack = error.cause.stack;
+          }
+        }
+
+        return {
+          type: 'user-error',
+          id,
+          responseID: requestID,
+          message,
+          stack,
+        };
+      }
+
+      if (error.name === DebugToolsErrors.UNSUPPORTTED_FEATURE_ERROR) {
+        return {
+          type: 'unsupported-feature',
+          id,
+          responseID: requestID,
+          message: 'Unsupported feature: ' + error.message,
+        };
+      }
+
+      // Log Uncaught Error
       console.error('Error inspecting element.\n\n', error);
 
       return {

packages/react-devtools-shared/src/backend/types.js

@@ -281,6 +281,8 @@ export type InspectedElement = {|
 |};
 
 export const InspectElementErrorType = 'error';
+export const InspectElementUserErrorType = 'user-error';
+export const InspectElementUnsupportedFeatureErrorType = 'unsupported-feature';
 export const InspectElementFullDataType = 'full-data';
 export const InspectElementNoChangeType = 'no-change';
 export const InspectElementNotFoundType = 'not-found';
@@ -293,6 +295,21 @@ export type InspectElementError = {|
   stack: string,
 |};
 
+export type InspectElementUserError = {|
+  id: number,
+  responseID: number,
+  type: 'user-error',
+  message: string,
+  stack: ?string,
+|};
+
+export type InspectElementUnsupportedFeatureError = {|
+  id: number,
+  responseID: number,
+  type: 'unsupported-feature',
+  message: string,
+|};
+
 export type InspectElementFullData = {|
   id: number,
   responseID: number,
@@ -322,6 +339,8 @@ export type InspectElementNotFound = {|
 
 export type InspectedElementPayload =
   | InspectElementError
+  | InspectElementUserError
+  | InspectElementUnsupportedFeatureError
   | InspectElementFullData
   | InspectElementHydratedPath
   | InspectElementNoChange

packages/react-devtools-shared/src/backendAPI.js

@@ -10,7 +10,7 @@
 import {hydrate, fillInPath} from 'react-devtools-shared/src/hydration';
 import {separateDisplayNameAndHOCs} from 'react-devtools-shared/src/utils';
 import Store from 'react-devtools-shared/src/devtools/store';
-import TimeoutError from 'react-devtools-shared/src/TimeoutError';
+import TimeoutError from 'react-devtools-shared/src/errors/TimeoutError';
 
 import type {
   InspectedElement as InspectedElementBackend,

packages/react-devtools-shared/src/devtools/views/Components/types.js

@@ -63,6 +63,7 @@ export type OwnersList = {|
 
 export type InspectedElementResponseType =
   | 'error'
+  | 'user-error'
   | 'full-data'
   | 'hydrated-path'
   | 'no-change'

packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import styles from './shared.css';
+
+type Props = {|
+  callStack: string | null,
+  children: React$Node,
+  info: React$Node | null,
+  componentStack: string | null,
+  errorMessage: string,
+|};
+
+export default function CaughtErrorView({
+  callStack,
+  children,
+  info,
+  componentStack,
+  errorMessage,
+}: Props) {
+  return (
+    <div className={styles.ErrorBoundary}>
+      {children}
+      <div className={styles.ErrorInfo}>
+        <div className={styles.HeaderRow}>
+          <div className={styles.ErrorHeader}>{errorMessage}</div>
+        </div>
+        {!!info && <div className={styles.InfoBox}>{info}</div>}
+        {!!callStack && (
+          <div className={styles.ErrorStack}>
+            The error was thrown {callStack.trim()}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js

@@ -15,8 +15,11 @@ import ErrorView from './ErrorView';
 import SearchingGitHubIssues from './SearchingGitHubIssues';
 import SuspendingErrorView from './SuspendingErrorView';
 import TimeoutView from './TimeoutView';
+import CaughtErrorView from './CaughtErrorView';
 import UnsupportedBridgeOperationError from 'react-devtools-shared/src/UnsupportedBridgeOperationError';
-import TimeoutError from 'react-devtools-shared/src/TimeoutError';
+import TimeoutError from 'react-devtools-shared/src/errors/TimeoutError';
+import UserError from 'react-devtools-shared/src/errors/UserError';
+import UnsupportedFeatureError from 'react-devtools-shared/src/errors/UnsupportedFeatureError';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 
 type Props = {|
@@ -34,6 +37,8 @@ type State = {|
   hasError: boolean,
   isUnsupportedBridgeOperationError: boolean,
   isTimeout: boolean,
+  isUserError: boolean,
+  isUnsupportedFeatureError: boolean,
 |};
 
 const InitialState: State = {
@@ -44,6 +49,8 @@ const InitialState: State = {
   hasError: false,
   isUnsupportedBridgeOperationError: false,
   isTimeout: false,
+  isUserError: false,
+  isUnsupportedFeatureError: false,
 };
 
 export default class ErrorBoundary extends Component<Props, State> {
@@ -58,6 +65,8 @@ export default class ErrorBoundary extends Component<Props, State> {
         : null;
 
     const isTimeout = error instanceof TimeoutError;
+    const isUserError = error instanceof UserError;
+    const isUnsupportedFeatureError = error instanceof UnsupportedFeatureError;
     const isUnsupportedBridgeOperationError =
       error instanceof UnsupportedBridgeOperationError;
 
@@ -76,7 +85,9 @@ export default class ErrorBoundary extends Component<Props, State> {
       errorMessage,
       hasError: true,
       isUnsupportedBridgeOperationError,
+      isUnsupportedFeatureError,
       isTimeout,
+      isUserError,
     };
   }
 
@@ -111,6 +122,8 @@ export default class ErrorBoundary extends Component<Props, State> {
       hasError,
       isUnsupportedBridgeOperationError,
       isTimeout,
+      isUserError,
+      isUnsupportedFeatureError,
     } = this.state;
 
     if (hasError) {
@@ -133,6 +146,38 @@ export default class ErrorBoundary extends Component<Props, State> {
             errorMessage={errorMessage}
           />
         );
+      } else if (isUserError) {
+        return (
+          <CaughtErrorView
+            callStack={callStack}
+            componentStack={componentStack}
+            errorMessage={errorMessage || 'Error occured in inspected element'}
+            info={
+              <>
+                This is likely to be caused by implementation of current
+                inspected element. Please see your console for logged error.
+              </>
+            }
+          />
+        );
+      } else if (isUnsupportedFeatureError) {
+        return (
+          <CaughtErrorView
+            callStack={callStack}
+            componentStack={componentStack}
+            errorMessage={
+              errorMessage ||
+              'Current DevTools version does not support a feature used in the inspected element.'
+            }
+            info={
+              <>
+                React DevTools is unable to handle a feature you are using in
+                this component (e.g. a new React build-in Hook). Please upgrade
+                to the latest version.
+              </>
+            }
+          />
+        );
       } else {
         return (
           <ErrorView
@@ -141,10 +186,7 @@ export default class ErrorBoundary extends Component<Props, State> {
             dismissError={
               canDismissProp || canDismissState ? this._dismissError : null
             }
-            errorMessage={errorMessage}
+            errorMessage={errorMessage}>
-            isUnsupportedBridgeOperationError={
-              isUnsupportedBridgeOperationError
-            }>
             <Suspense fallback={<SearchingGitHubIssues />}>
               <SuspendingErrorView
                 callStack={callStack}

packages/react-devtools-shared/src/errors/UnsupportedFeatureError.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export default class UnsupportedFeatureError extends Error {
+  constructor(message: string) {
+    super(message);
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, UnsupportedFeatureError);
+    }
+
+    this.name = 'UnsupportedFeatureError';
+  }
+}

packages/react-devtools-shared/src/errors/UserError.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export default class UserError extends Error {
+  constructor(message: string) {
+    super(message);
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, UserError);
+    }
+
+    this.name = 'UserError';
+  }
+}

packages/react-devtools-shared/src/inspectedElementMutableSource.js

@@ -8,6 +8,7 @@
  */
 
 import LRU from 'lru-cache';
+import {UserHookError} from 'react-debug-tools';
 import {
   convertInspectedElementBackendToFrontend,
   hydrateHelper,
@@ -19,6 +20,8 @@ import type {LRUCache} from 'react-devtools-shared/src/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {
   InspectElementError,
+  InspectElementUserError,
+  InspectElementUnsupportedFeatureError,
   InspectElementFullData,
   InspectElementHydratedPath,
 } from 'react-devtools-shared/src/backend/types';
@@ -27,6 +30,8 @@ import type {
   InspectedElement as InspectedElementFrontend,
   InspectedElementResponseType,
 } from 'react-devtools-shared/src/devtools/views/Components/types';
+import UserError from 'react-devtools-shared/src/errors/UserError';
+import UnsupportedFeatureError from 'react-devtools-shared/src/errors/UnsupportedFeatureError';
 
 // Maps element ID to inspected data.
 // We use an LRU for this rather than a WeakMap because of how the "no-change" optimization works.
@@ -80,7 +85,7 @@ export function inspectElement({
 
     let inspectedElement;
     switch (type) {
-      case 'error':
+      case 'error': {
         const {message, stack} = ((data: any): InspectElementError);
 
         // The backend's stack (where the error originated) is more meaningful than this stack.
@@ -88,6 +93,22 @@ export function inspectElement({
         error.stack = stack;
 
         throw error;
+      }
+
+      case 'user-error': {
+        const {message, stack} = (data: InspectElementUserError);
+        // Trying to keep useful information from user's side.
+        const error = new UserError(message);
+        error.stack = stack || error.stack;
+        throw error;
+      }
+
+      case 'unsupported-feature': {
+        const {message} = (data: InspectElementUnsupportedFeatureError);
+        // Trying to keep useful information from user's side.
+        const error = new UnsupportedFeatureError(message);
+        throw error;
+      }
 
       case 'no-change':
         // This is a no-op for the purposes of our cache.