feat[devtools]: support x_google_ignoreList source maps extension (fa…

…cebook#26951)

## Summary
This was originally implemented by Mengdi @mondaychen in
facebook#26506.

Because we patch console methods (to append components stack and some
other features), errors in console will include
`react_devtools_backend-....js` in its stack traces. Example:
<img width="763" alt="Screenshot 2023-06-15 at 13 31 49"
src="https://github.com/facebook/react/assets/28902667/fa9c3d26-b6c5-4965-af71-62d100cd806d">

Using https://github.com/mondaychen/devtools-ignore-webpack-plugin to
support [x_google_ignoreList source maps
extension](https://developer.chrome.com/blog/devtools-better-angular-debugging/#the-x_google_ignorelist-source-map-extension).

@mondaychen created a react app, which throws an error via
`console.error`, when user click on the button -
https://3owqsn.csb.app/.

Stack trace with these changes: 
<img width="759" alt="Screenshot 2023-06-14 at 14 26 38"
src="https://github.com/facebook/react/assets/28902667/b118b168-3200-4a47-9718-39fc455ea993">

packages/react-devtools-extensions/package.json

@@ -39,6 +39,7 @@
     "chrome-launch": "^1.1.4",
     "crx": "^5.0.0",
     "css-loader": "^1.0.1",
+    "devtools-ignore-webpack-plugin": "^0.1.1",
     "file-loader": "^6.1.0",
     "filesize": "^6.0.1",
     "find": "^0.3.0",
@@ -57,6 +58,7 @@
     "parse-filepath": "^1.0.2",
     "process": "0.11.10",
     "raw-loader": "^3.1.0",
+    "rimraf": "^5.0.1",
     "source-map-js": "^0.6.2",
     "sourcemap-codec": "^1.4.8",
     "style-loader": "^0.23.1",

packages/react-devtools-extensions/src/__tests__/xGoogleIgnoreList-test.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {exec} from 'child-process-promise';
+import {readFileSync} from 'fs';
+import path from 'path';
+import {rimrafSync} from 'rimraf';
+
+describe('x_google_ignoreList source map extension', () => {
+  jest.setTimeout(30 * 1000);
+
+  const pathToExtensionsPackage = path.resolve(__dirname, '..', '..');
+  const pathToChromeExtensionBuild = path.join(
+    pathToExtensionsPackage,
+    'chrome/build',
+  );
+  const pathToSourceMap = path.resolve(
+    pathToChromeExtensionBuild,
+    'unpacked/build/react_devtools_backend_compact.js.map',
+  );
+
+  afterAll(() => {
+    rimrafSync(pathToChromeExtensionBuild);
+  });
+
+  describe('for dev builds', () => {
+    it('should include only sources with /node_modules/ and /webpack/ in path', async () => {
+      await exec('yarn build:chrome:local', {
+        cwd: pathToExtensionsPackage,
+      });
+
+      const sourceMapJSON = readFileSync(pathToSourceMap);
+      const sourceMap = JSON.parse(sourceMapJSON);
+
+      const {sources, x_google_ignoreList} = sourceMap;
+
+      const expectedIgnoreList = [];
+      for (let sourceIndex = 0; sourceIndex < sources.length; ++sourceIndex) {
+        const source = sources[sourceIndex];
+
+        if (source.includes('/node_modules/') || source.includes('/webpack/')) {
+          expectedIgnoreList.push(sourceIndex);
+        }
+      }
+
+      expect(x_google_ignoreList).toEqual(expectedIgnoreList);
+    });
+  });
+
+  describe('for production builds', function () {
+    it('should include every source', async () => {
+      await exec('yarn build:chrome', {cwd: pathToExtensionsPackage});
+
+      const sourceMapJSON = readFileSync(pathToSourceMap);
+      const sourceMap = JSON.parse(sourceMapJSON);
+
+      const {sources, x_google_ignoreList} = sourceMap;
+
+      expect(sources.length).toBe(x_google_ignoreList.length);
+    });
+  });
+});

packages/react-devtools-extensions/webpack.backend.js

@@ -2,6 +2,9 @@
 
 const {resolve} = require('path');
 const Webpack = require('webpack');
+const DevToolsIgnorePlugin = require('devtools-ignore-webpack-plugin');
+
+const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
 const {
   DARK_MODE_DIMMED_WARNING_COLOR,
   DARK_MODE_DIMMED_ERROR_COLOR,
@@ -12,7 +15,6 @@ const {
   GITHUB_URL,
   getVersionString,
 } = require('./utils');
-const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
@@ -78,6 +80,15 @@ module.exports = {
       'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
       'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
     }),
+    new DevToolsIgnorePlugin({
+      shouldIgnorePath: function (path) {
+        if (!__DEV__) {
+          return true;
+        }
+
+        return path.includes('/node_modules/') || path.includes('/webpack/');
+      },
+    }),
   ],
   module: {
     rules: [

packages/react-devtools-shared/src/__tests__/utils.js

@@ -152,7 +152,7 @@ export function getRendererID(): number {
     return rendererInterface.renderer.rendererPackageName === 'react-dom';
   });
 
-  if (ids == null) {
+  if (id == null) {
     throw Error('Could not find renderer.');
   }
 

scripts/jest/config.build-devtools.js

@@ -69,7 +69,7 @@ module.exports = Object.assign({}, baseConfig, {
     '/__compiled__/',
     '/__untransformed__/',
   ],
-  testRegex: 'packages/react-devtools-shared/.+/__tests__/[^]+.test.js$',
+  testRegex: 'packages/react-devtools(-(.+))?/.+/__tests__/[^]+.test.js$',
   snapshotSerializers: [
     require.resolve(
       '../../packages/react-devtools-shared/src/__tests__/__serializers__/dehydratedValueSerializer.js'