DevTools error boundary: Search for pre-existing GH issues (#21279)

Author: Brian Vaughn

packages/react-devtools-shared/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
+    "@octokit/rest": "^18.5.2",
     "@reach/menu-button": "^0.1.17",
     "@reach/tooltip": "^0.2.2",
     "clipboard-js": "^0.3.6",

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js

@@ -14,3 +14,4 @@
  ************************************************************************/
 
 export const enableProfilerChangedHookIndices = false;
+export const isInternalFacebookBuild = false;

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js

@@ -14,6 +14,7 @@
  ************************************************************************/
 
 export const enableProfilerChangedHookIndices = true;
+export const isInternalFacebookBuild = true;
 
 /************************************************************************
  * Do not edit the code below.

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js

@@ -14,6 +14,7 @@
  ************************************************************************/
 
 export const enableProfilerChangedHookIndices = false;
+export const isInternalFacebookBuild = false;
 
 /************************************************************************
  * Do not edit the code below.

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

@@ -49,6 +49,9 @@ export const CHANGE_LOG_URL =
 export const UNSUPPORTED_VERSION_URL =
   'https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-do-i-get-the-old-version-back';
 
+export const REACT_DEVTOOLS_WORKPLACE_URL =
+  'https://fburl.com/react-devtools-workplace-group';
+
 // HACK
 //
 // Extracting during build time avoids a temporarily invalid state for the inline target.

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

@@ -0,0 +1,91 @@
+/**
+ * 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 {Component, Suspense} from 'react';
+import ErrorView from './ErrorView';
+import SearchingGitHubIssues from './SearchingGitHubIssues';
+import SuspendingErrorView from './SuspendingErrorView';
+
+type Props = {|
+  children: React$Node,
+|};
+
+type State = {|
+  callStack: string | null,
+  componentStack: string | null,
+  errorMessage: string | null,
+  hasError: boolean,
+|};
+
+const InitialState: State = {
+  callStack: null,
+  componentStack: null,
+  errorMessage: null,
+  hasError: false,
+};
+
+export default class ErrorBoundary extends Component<Props, State> {
+  state: State = InitialState;
+
+  static getDerivedStateFromError(error: any) {
+    const errorMessage =
+      typeof error === 'object' &&
+      error !== null &&
+      error.hasOwnProperty('message')
+        ? error.message
+        : '' + error;
+
+    return {
+      errorMessage,
+      hasError: true,
+    };
+  }
+
+  componentDidCatch(error: any, {componentStack}: any) {
+    const callStack =
+      typeof error === 'object' &&
+      error !== null &&
+      error.hasOwnProperty('stack')
+        ? error.stack
+            .split('\n')
+            .slice(1)
+            .join('\n')
+        : null;
+
+    this.setState({
+      callStack,
+      componentStack,
+    });
+  }
+
+  render() {
+    const {children} = this.props;
+    const {callStack, componentStack, errorMessage, hasError} = this.state;
+
+    if (hasError) {
+      return (
+        <ErrorView
+          callStack={callStack}
+          componentStack={componentStack}
+          errorMessage={errorMessage}>
+          <Suspense fallback={<SearchingGitHubIssues />}>
+            <SuspendingErrorView
+              callStack={callStack}
+              componentStack={componentStack}
+              errorMessage={errorMessage}
+            />
+          </Suspense>
+        </ErrorView>
+      );
+    }
+
+    return children;
+  }
+}

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

@@ -0,0 +1,46 @@
+/**
+ * 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 ErrorView({
+  callStack,
+  children,
+  componentStack,
+  errorMessage,
+}: Props) {
+  return (
+    <div className={styles.ErrorBoundary}>
+      {children}
+      <div className={styles.ErrorInfo}>
+        <div className={styles.Header}>
+          Uncaught Error: {errorMessage || ''}
+        </div>
+        {!!callStack && (
+          <div className={styles.Stack}>
+            The error was thrown {callStack.trim()}
+          </div>
+        )}
+        {!!componentStack && (
+          <div className={styles.Stack}>
+            The error occurred {componentStack.trim()}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}