Modify react-devtools-inline for Replay integration

packages/react-devtools-inline/.release-it.json

@@ -0,0 +1,12 @@
+{
+  "hooks": {
+    "after:bump": "yarn && git add -u"
+  },
+  "git": {
+    "commitMessage": "Release @replayio/react-devtools-inline ${version}",
+    "tagName": "@replayio/react-devtools-inline@${version}"
+  },
+  "npm": {
+    "versionArgs": ["--workspaces-update=false"]
+  }
+}

packages/react-devtools-inline/package.json

@@ -1,12 +1,16 @@
 {
-  "name": "react-devtools-inline",
-  "version": "4.28.3",
+  "name": "@replayio/react-devtools-inline",
+  "version": "4.28.6",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
   "main": "./dist/backend.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/facebook/react.git",
+    "url": "https://github.com/replayio/react.git",
     "directory": "packages/react-devtools-inline"
   },
   "files": [

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

@@ -138,7 +138,8 @@ export function storeAsGlobal({
   });
 }
 
-const TIMEOUT_DELAY = 5000;
+// REPLAY Bumping this up from 5000 to allow evaluations time to complete.
+const TIMEOUT_DELAY = 15000;
 
 let requestCounter = 0;
 

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

@@ -546,7 +546,6 @@ export default class Store extends EventEmitter<{
   getElementByID(id: number): Element | null {
     const element = this._idToElement.get(id);
     if (element === undefined) {
-      console.warn(`No element found with id "${id}"`);
       return null;
     }
 

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

@@ -217,12 +217,7 @@ export default function Tree(props: Props): React.Node {
   const handleFocus = useCallback(() => {
     setTreeFocused(true);
 
-    if (selectedElementIndex === null && numElements > 0) {
-      dispatch({
-        type: 'SELECT_ELEMENT_AT_INDEX',
-        payload: 0,
-      });
-    }
+    // REPLAY Removed auto-selection of index 0, as that creates annoying behavior in our UI
   }, [dispatch, numElements, selectedElementIndex]);
 
   const handleKeyPress = useCallback(

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

@@ -12,8 +12,6 @@ import {Component, Suspense} from 'react';
 import Store from 'react-devtools-shared/src/devtools/store';
 import UnsupportedBridgeOperationView from './UnsupportedBridgeOperationView';
 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';
@@ -191,13 +189,19 @@ export default class ErrorBoundary extends Component<Props, State> {
               canDismissProp || canDismissState ? this._dismissError : null
             }
             errorMessage={errorMessage}>
-            <Suspense fallback={<SearchingGitHubIssues />}>
-              <SuspendingErrorView
-                callStack={callStack}
-                componentStack={componentStack}
-                errorMessage={errorMessage}
-              />
-            </Suspense>
+            We caught an error. Please report this to the Replay team via:
+            <ul>
+              <li>
+                Discord:{' '}
+                <a href="https://replay.io/discord">replay.io/discord</a>
+              </li>
+              <li>
+                Github:{' '}
+                <a href="https://github.com/replayio/devtools">
+                  github.com/replayio/devtools
+                </a>
+              </li>
+            </ul>
           </ErrorView>
         );
       }