Redux devtools trace + source map (#524)

* Implement trace feature of redux-devtools

* Implement sourceMap for redux-devtools trace

* Feat: Add patch redux-devtools-trace-monitor to open file

Co-authored-by: Jhen <developer@jhen.me>

Author: StanislavMayorov

app/worker/reduxAPI.js

@@ -15,6 +15,7 @@ import {
   filterStagedActions,
   filterState,
 } from 'redux-devtools-core/lib/utils/filters';
+import { updateStackWithSourceMap } from './utils';
 
 function configureStore(next, subscriber, options) {
   return instrument(subscriber, options)(next);
@@ -30,6 +31,41 @@ let listenerAdded;
 let locked;
 let paused;
 
+function getStackTrace(config, toExcludeFromTrace) {
+  if (!config.trace) return undefined;
+  if (typeof config.trace === 'function') return config.trace();
+
+  let stack;
+  let extraFrames = 0;
+  let prevStackTraceLimit;
+  const traceLimit = config.traceLimit;
+  const error = Error();
+  if (Error.captureStackTrace) {
+    if (Error.stackTraceLimit < traceLimit) {
+      prevStackTraceLimit = Error.stackTraceLimit;
+      Error.stackTraceLimit = traceLimit;
+    }
+    Error.captureStackTrace(error, toExcludeFromTrace);
+  } else {
+    extraFrames = 3;
+  }
+  stack = error.stack;
+  if (prevStackTraceLimit) Error.stackTraceLimit = prevStackTraceLimit;
+  if (
+    extraFrames ||
+    typeof Error.stackTraceLimit !== 'number' ||
+    Error.stackTraceLimit > traceLimit
+  ) {
+    const frames = stack.split('\n');
+    if (frames.length > traceLimit) {
+      stack = frames
+        .slice(0, traceLimit + extraFrames + (frames[0] === 'Error' ? 1 : 0))
+        .join('\n');
+    }
+  }
+  return updateStackWithSourceMap(stack);
+}
+
 function getLiftedState(store, filters) {
   return filterStagedActions(store.liftedStore.getState(), filters);
 }
@@ -67,6 +103,7 @@ function relay(type, state, instance, action, nextActionId) {
         );
   }
   if (type === 'ACTION') {
+    action.stack = getStackTrace(instance, true);
     message.action = stringify(
       !actionSanitizer ? action : actionSanitizer(action.action, nextActionId - 1),
       serializeAction
@@ -236,6 +273,8 @@ export default function devToolsEnhancer(options = {}) {
     deserializeAction,
     serialize,
     predicate,
+    trace,
+    traceLimit,
   } = options;
   const id = generateId(options.instanceId);
 
@@ -269,6 +308,8 @@ export default function devToolsEnhancer(options = {}) {
       serializeAction,
       serialize,
       predicate,
+      trace,
+      traceLimit,
     };
 
     start(instances[id]);

app/worker/utils.js

@@ -138,3 +138,19 @@ export const ignoreRNDIntervalSpy = async (
     }
   };
 };
+
+
+const RN_DEBUGGER_URL_PART = 'RNDebuggerWorker.js';
+const BUNDLE_URL_REGEXP = /(http[\S]*?index\.bundle\?[\S]*?)(:\d+:?\d?)/;
+
+const addInlineSourceMap = (_, urlGroup1, urlGroup2) =>
+  `${urlGroup1}&inlineSourceMap=true${urlGroup2}`;
+const mapStackLines = line => line.replace(BUNDLE_URL_REGEXP, addInlineSourceMap);
+const filterRnDebuggerLines = line => !line.includes(RN_DEBUGGER_URL_PART);
+
+export function updateStackWithSourceMap(stack) {
+  const lines = stack.split('\n');
+  const linesWithoutRNDebugger = lines.filter(filterRnDebuggerLines);
+  const lineWithSourceMap = linesWithoutRNDebugger.map(mapStackLines);
+  return lineWithSourceMap.join('\n');
+}

package.json

@@ -91,11 +91,11 @@
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.7",
     "redux": "^3.7.2",
-    "redux-devtools": "^3.4.1",
+    "redux-devtools": "^3.5.0",
     "redux-devtools-core": "^0.2.1",
-    "redux-devtools-instrument": "^1.9.0",
+    "redux-devtools-instrument": "^1.9.4",
     "redux-persist": "^4.10.2",
-    "remotedev-app": "^0.10.8",
+    "remotedev-app": "^0.10.13-beta",
     "remotedev-monitor-components": "^0.0.5",
     "remotedev-slider": "^1.1.3"
   },

patches/redux-devtools-trace-monitor+0.1.1.patch

@@ -0,0 +1,39 @@
+diff --git a/node_modules/redux-devtools-trace-monitor/lib/openFile.js b/node_modules/redux-devtools-trace-monitor/lib/openFile.js
+index 3d6cc6a..e4d1f87 100644
+--- a/node_modules/redux-devtools-trace-monitor/lib/openFile.js
++++ b/node_modules/redux-devtools-trace-monitor/lib/openFile.js
+@@ -97,33 +97,5 @@ function openInEditor(editor, path, stackFrame) {
+ }
+
+ function openFile(fileName, lineNumber, stackFrame) {
+-  if (process.env.NODE_ENV === 'development') // eslint-disable-next-line no-console
+-    console.log(fileName, lineNumber, stackFrame);
+-  if (!chrome || !chrome.storage) return; // TODO: Pass editor settings for using outside of browser extension
+-
+-  var storage = isFF ? chrome.storage.local : chrome.storage.sync || chrome.storage.local;
+-  storage.get(['useEditor', 'editor', 'projectPath'], function (_ref) {
+-    var useEditor = _ref.useEditor,
+-        editor = _ref.editor,
+-        projectPath = _ref.projectPath;
+-
+-    if (useEditor && projectPath && typeof editor === 'string' && /^\w{1,30}$/.test(editor)) {
+-      openInEditor(editor.toLowerCase(), projectPath, stackFrame);
+-    } else {
+-      if (chrome.devtools && chrome.devtools.panels && chrome.devtools.panels.openResource) {
+-        openResource(fileName, lineNumber, stackFrame);
+-      } else if (chrome.runtime && (chrome.runtime.openOptionsPage || isFF)) {
+-        if (chrome.devtools && isFF) {
+-          chrome.devtools.inspectedWindow.eval('confirm("Set the editor to open the file in?")', function (result) {
+-            if (!result) return;
+-            chrome.runtime.sendMessage({
+-              type: 'OPEN_OPTIONS'
+-            });
+-          });
+-        } else if (confirm('Set the editor to open the file in?')) {
+-          chrome.runtime.openOptionsPage();
+-        }
+-      }
+-    }
+-  });
++  window.openInEditor(fileName, lineNumber)
+ }

yarn.lock

@@ -14,6 +14,13 @@
   dependencies:
     "@babel/highlight" "7.0.0-beta.44"
 
+"@babel/code-frame@^7.0.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
+  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
 "@babel/code-frame@^7.0.0-beta.35":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
@@ -55,6 +62,11 @@
   dependencies:
     "@babel/types" "7.0.0-beta.44"
 
+"@babel/helper-validator-identifier@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+
 "@babel/highlight@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5"
@@ -73,6 +85,15 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
+  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/runtime@^7.1.2":
   version "7.7.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
@@ -522,6 +543,11 @@ almost-equal@^1.1.0:
   resolved "https://registry.yarnpkg.com/almost-equal/-/almost-equal-1.1.0.tgz#f851c631138757994276aa2efbe8dfa3066cccdd"
   integrity sha1-+FHGMROHV5lCdqou++jfowZszN0=
 
+anser@^1.4.7:
+  version "1.4.9"
+  resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.9.tgz#1f85423a5dcf8da4631a341665ff675b96845760"
+  integrity sha512-AI+BjTeGt2+WFk4eWcqbQ7snZpDBt8SaLlj0RT2h5xfdWaiy51OjYvqwMrNzJLGy8iOAL6nKDITWO+rd4MkYEA==
+
 ansi-colors@^3.0.0:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
@@ -8971,6 +8997,15 @@ react@^15.1.0, react@^15.6.1:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
+react@^16.4.0:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
+  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
 react@^16.8.2:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
@@ -9145,7 +9180,7 @@ redux-devtools-core@^0.2.1:
     nanoid "^2.0.0"
     remotedev-serialize "^0.1.8"
 
-redux-devtools-instrument@^1.9.0:
+redux-devtools-instrument@^1.9.0, redux-devtools-instrument@^1.9.4:
   version "1.9.6"
   resolved "https://registry.yarnpkg.com/redux-devtools-instrument/-/redux-devtools-instrument-1.9.6.tgz#6b412595f74b9d48cfd4ecc13e585b1588ed6e7e"
   integrity sha512-MwvY4cLEB2tIfWWBzrUR02UM9qRG2i7daNzywRvabOSVdvAY7s9BxSwMmVRH1Y/7QWjplNtOwgT0apKhHg2Qew==
@@ -9184,7 +9219,20 @@ redux-devtools-themes@^1.0.0:
   dependencies:
     base16 "^1.0.0"
 
-redux-devtools@^3.0.0, redux-devtools@^3.4.1:
+redux-devtools-trace-monitor@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/redux-devtools-trace-monitor/-/redux-devtools-trace-monitor-0.1.1.tgz#a7847424a742d00d2bd31cb971a27f31f3e0cf6f"
+  integrity sha512-DtcOi/hxo5W4nyBScmuDCShso1EfsjZ8DubylGlkZ1vnU84rN2NUBZCyhrFyskoC2rpXbwdbgp/D6MAE0cUQlg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    anser "^1.4.7"
+    chalk "^2.4.1"
+    html-entities "^1.2.1"
+    react "^16.4.0"
+    redux-devtools-themes "^1.0.0"
+    settle-promise "^1.0.0"
+
+redux-devtools@^3.0.0, redux-devtools@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/redux-devtools/-/redux-devtools-3.5.0.tgz#d69ab76d4f0f8abdf6d24bcf5954d7a1aa2b6827"
   integrity sha512-pGU8TZNvWxPaCCE432AGm6H6alQbAz80gQM5CzM3SjX9/oSNu/HPF17xFdPQJOXasqyih1Gv167kZDTRe7r0iQ==
@@ -9293,10 +9341,10 @@ regjsparser@^0.1.4:
   dependencies:
     jsesc "~0.5.0"
 
-remotedev-app@^0.10.8:
-  version "0.10.12"
-  resolved "https://registry.yarnpkg.com/remotedev-app/-/remotedev-app-0.10.12.tgz#0f46847635c4cade6b925749fcf6c3c5d4f050c9"
-  integrity sha512-hwgL0ik5La9Ct2Juwgej9xixuT1VBLEosWih68zzipatN4K6Pw5PEJ9cSCdrGzbHjETzejisRE615xtm337T4Q==
+remotedev-app@^0.10.13-beta:
+  version "0.10.13-beta"
+  resolved "https://registry.yarnpkg.com/remotedev-app/-/remotedev-app-0.10.13-beta.tgz#e240a10c9184fdca5fee68a36078eed313883aa7"
+  integrity sha512-QtbHdZg9kcVIH1/jBvq8jOd5okA+mRnx6zLP2O7eN3PTYpRvzRKpHKavNUTcFfjJgo94URqeAqpf/ZJ+y+SKhg==
   dependencies:
     chrome-storage-local "^0.1.6"
     d3-state-visualizer "^1.3.1"
@@ -9315,6 +9363,7 @@ remotedev-app@^0.10.8:
     redux-devtools-log-monitor "^1.2.0"
     redux-devtools-test-generator "^0.4.0"
     redux-devtools-themes "^1.0.0"
+    redux-devtools-trace-monitor "^0.1.0"
     remotedev-inspector-monitor "^0.11.0"
     remotedev-monitor-components "^0.0.5"
     remotedev-slider "1.1.3"
@@ -9883,6 +9932,11 @@ setprototypeof@1.1.1:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
   integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
 
+settle-promise@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/settle-promise/-/settle-promise-1.0.0.tgz#697adb58b821f387ce2757c06efc9de5f0ee33d8"
+  integrity sha1-aXrbWLgh84fOJ1fAbvyd5fDuM9g=
+
 sha.js@^2.4.0, sha.js@^2.4.8:
   version "2.4.11"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"