[ReactDevTools] custom view for errors occur in user's code

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

@@ -60,7 +60,7 @@ 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 +3616,27 @@ export function attach(
     try {
       mostRecentlyInspectedElement = inspectElementRaw(id);
     } catch (error) {
+      if (error.name === DebugToolsErrors.RENDER_FUNCTION_ERROR) {
+        let message = 'Error rendering inspected element.';
+        let stack;
+        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,
+        };
+      }
+
       console.error('Error inspecting element.\n\n', error);
 
       return {

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

@@ -281,6 +281,7 @@ export type InspectedElement = {|
 |};
 
 export const InspectElementErrorType = 'error';
+export const InspectElementUserErrorType = 'user-error';
 export const InspectElementFullDataType = 'full-data';
 export const InspectElementNoChangeType = 'no-change';
 export const InspectElementNotFoundType = 'not-found';
@@ -293,6 +294,14 @@ export type InspectElementError = {|
   stack: string,
 |};
 
+export type InspectElementUserError = {|
+  id: number,
+  responseID: number,
+  type: 'user-error',
+  message: string,
+  stack: ?string,
+|};
+
 export type InspectElementFullData = {|
   id: number,
   responseID: number,
@@ -322,6 +331,7 @@ export type InspectElementNotFound = {|
 
 export type InspectedElementPayload =
   | InspectElementError
+  | InspectElementUserError
   | 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/ErrorBoundary.js

@@ -15,8 +15,10 @@ import ErrorView from './ErrorView';
 import SearchingGitHubIssues from './SearchingGitHubIssues';
 import SuspendingErrorView from './SuspendingErrorView';
 import TimeoutView from './TimeoutView';
+import UserErrorView from './UserErrorView';
 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 {logEvent} from 'react-devtools-shared/src/Logger';
 
 type Props = {|
@@ -34,6 +36,7 @@ type State = {|
   hasError: boolean,
   isUnsupportedBridgeOperationError: boolean,
   isTimeout: boolean,
+  isUserError: boolean,
 |};
 
 const InitialState: State = {
@@ -44,6 +47,7 @@ const InitialState: State = {
   hasError: false,
   isUnsupportedBridgeOperationError: false,
   isTimeout: false,
+  isUserError: false,
 };
 
 export default class ErrorBoundary extends Component<Props, State> {
@@ -58,6 +62,7 @@ export default class ErrorBoundary extends Component<Props, State> {
         : null;
 
     const isTimeout = error instanceof TimeoutError;
+    const isUserError = error instanceof UserError;
     const isUnsupportedBridgeOperationError =
       error instanceof UnsupportedBridgeOperationError;
 
@@ -77,6 +82,7 @@ export default class ErrorBoundary extends Component<Props, State> {
       hasError: true,
       isUnsupportedBridgeOperationError,
       isTimeout,
+      isUserError,
     };
   }
 
@@ -111,6 +117,7 @@ export default class ErrorBoundary extends Component<Props, State> {
       hasError,
       isUnsupportedBridgeOperationError,
       isTimeout,
+      isUserError,
     } = this.state;
 
     if (hasError) {
@@ -133,6 +140,14 @@ export default class ErrorBoundary extends Component<Props, State> {
             errorMessage={errorMessage}
           />
         );
+      } else if (isUserError) {
+        return (
+          <UserErrorView
+            callStack={callStack}
+            componentStack={componentStack}
+            errorMessage={errorMessage}
+          />
+        );
       } else {
         return (
           <ErrorView

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

@@ -0,0 +1,47 @@
+/**
+ * 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,
+   componentStack: string | null,
+   errorMessage: string | null,
+ |};
+ 
+ export default function UnsupportedBridgeOperationView({
+   callStack,
+   children,
+   componentStack,
+   errorMessage,
+ }: Props) {
+   return (
+     <div className={styles.ErrorBoundary}>
+       {children}
+       <div className={styles.ErrorInfo}>
+         <div className={styles.HeaderRow}>
+           <div className={styles.ErrorHeader}>
+             {errorMessage || 'Error occured in inspected element'}
+           </div>
+         </div>
+         <div className={styles.InfoBox}>
+           This is likely to be caused by implementation of current inspected element.
+         </div>
+         {!!callStack && (
+           <div className={styles.ErrorStack}>
+             The error was thrown {callStack.trim()}
+           </div>
+         )}
+       </div>
+     </div>
+   );
+ }
+ 

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,7 @@ import type {LRUCache} from 'react-devtools-shared/src/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {
   InspectElementError,
+  InspectElementUserError,
   InspectElementFullData,
   InspectElementHydratedPath,
 } from 'react-devtools-shared/src/backend/types';
@@ -27,6 +29,7 @@ import type {
   InspectedElement as InspectedElementFrontend,
   InspectedElementResponseType,
 } from 'react-devtools-shared/src/devtools/views/Components/types';
+import UserError from 'react-devtools-shared/src/errors/UserError';
 
 // 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 +83,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 +91,15 @@ 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 'no-change':
         // This is a no-op for the purposes of our cache.