Patch console to append component stacks (#348)

* Patch console.warn and console.error to auto-append owners-only component stacks.

This setting is enabled by default and will work for React Native even if no front-end DevTools shell is being used. The setting can be disabled via a new, persisted user preference though.

flow-typed/npm/react-test-renderer_v16.x.x.js

@@ -66,7 +66,7 @@ declare module 'react-test-renderer' {
     options?: TestRendererOptions
   ): ReactTestRenderer;
 
-  declare function act(callback: () => void): Thenable;
+  declare function act(callback: () => ?Thenable): Thenable;
 }
 
 declare module 'react-test-renderer/shallow' {

package.json

@@ -138,18 +138,18 @@
     "opener": "^1.5.1",
     "prettier": "^1.16.4",
     "prop-types": "^15.6.2",
-    "react": "^0.0.0-50b50c26f",
+    "react": "^0.0.0-424099da6",
     "react-15": "npm:react@^15",
     "react-color": "^2.11.7",
-    "react-dom": "^0.0.0-50b50c26f",
+    "react-dom": "^0.0.0-424099da6",
     "react-dom-15": "npm:react-dom@^15",
-    "react-is": "^0.0.0-50b50c26f",
-    "react-test-renderer": "^0.0.0-50b50c26f",
+    "react-is": "0.0.0-424099da6",
+    "react-test-renderer": "^0.0.0-424099da6",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "./vendor/react-window",
     "request-promise": "^4.2.4",
     "rimraf": "^2.6.3",
-    "scheduler": "^0.0.0-50b50c26f",
+    "scheduler": "^0.0.0-424099da6",
     "semver": "^5.5.1",
     "serve-static": "^1.14.1",
     "style-loader": "^0.23.1",

packages/react-devtools-core/src/standalone.js

@@ -9,7 +9,7 @@ import {
 } from 'react-dom';
 import Bridge from 'src/bridge';
 import Store from 'src/devtools/store';
-import { getSavedComponentFilters } from 'src/utils';
+import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
 import { Server } from 'ws';
 import { existsSync, readFileSync } from 'fs';
 import { installHook } from 'src/hook';
@@ -241,12 +241,16 @@ function startServer(port?: number = 8097) {
     // because they are generally stored in localStorage within the context of the extension.
     // Because of this it relies on the extension to pass filters, so include them wth the response here.
     // This will ensure that saved filters are shared across different web pages.
-    const savedFiltersString = `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
-      getSavedComponentFilters()
-    )};`;
+    const savedPreferencesString = `
+      window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
+        getSavedComponentFilters()
+      )};
+      window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
+        getAppendComponentStack()
+      )};`;
 
     response.end(
-      savedFiltersString +
+      savedPreferencesString +
         '\n;' +
         backendFile.toString() +
         '\n;' +

shells/browser/shared/src/main.js

@@ -6,7 +6,7 @@ import Bridge from 'src/bridge';
 import Store from 'src/devtools/store';
 import inject from './inject';
 import { createViewElementSource, getBrowserTheme } from './utils';
-import { getSavedComponentFilters } from 'src/utils';
+import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
 import {
   localStorageGetItem,
   localStorageRemoveItem,
@@ -22,16 +22,23 @@ let panelCreated = false;
 // The renderer interface can't read saved component filters directly,
 // because they are stored in localStorage within the context of the extension.
 // Instead it relies on the extension to pass filters through.
-function initializeSavedComponentFilters() {
+function syncSavedPreferences() {
   const componentFilters = getSavedComponentFilters();
   chrome.devtools.inspectedWindow.eval(
     `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
       componentFilters
     )};`
   );
+
+  const appendComponentStack = getAppendComponentStack();
+  chrome.devtools.inspectedWindow.eval(
+    `window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
+      appendComponentStack
+    )};`
+  );
 }
 
-initializeSavedComponentFilters();
+syncSavedPreferences();
 
 function createPanelIfReactLoaded() {
   if (panelCreated) {
@@ -286,7 +293,7 @@ function createPanelIfReactLoaded() {
       chrome.devtools.network.onNavigated.addListener(function onNavigated() {
         // Re-initialize saved filters on navigation,
         // since global values stored on window get reset in this case.
-        initializeSavedComponentFilters();
+        syncSavedPreferences();
 
         // It's easiest to recreate the DevTools panel (to clean up potential stale state).
         // We can revisit this in the future as a small optimization.
@@ -302,7 +309,7 @@ function createPanelIfReactLoaded() {
 
 // Load (or reload) the DevTools extension when the user navigates to a new page.
 function checkPageForReact() {
-  initializeSavedComponentFilters();
+  syncSavedPreferences();
   createPanelIfReactLoaded();
 }
 

shells/dev/src/devtools.js

@@ -8,7 +8,7 @@ import { installHook } from 'src/hook';
 import { initDevTools } from 'src/devtools';
 import Store from 'src/devtools/store';
 import DevTools from 'src/devtools/views/DevTools';
-import { getSavedComponentFilters } from 'src/utils';
+import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
 
 const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
 
@@ -18,6 +18,7 @@ const { contentDocument, contentWindow } = iframe;
 // because they are stored in localStorage within the context of the extension.
 // Instead it relies on the extension to pass filters through.
 contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getSavedComponentFilters();
+contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = getAppendComponentStack();
 
 installHook(contentWindow);