Stack trace options (#612)

* Implement tracing in the examples

* External editor settings for trace stacks

* Implement opening options page for Firefox

* Implement "trace" feature

* Support tracing non-redux actions

* Add docs for trace actions calls

* Update webpack and use terser instead of uglify

* Fix tests

Author: zalmoxisus

README.md

@@ -178,6 +178,8 @@ See [integrations](docs/Integrations.md) and [the blog post](https://medium.com/
   - [Methods (advanced API)](docs/API/Methods.md)
   - [Create Redux store for debugging](docs/API/CreateStore.md)
   - [FAQ](docs/FAQ.md)
+  - Features
+    - [Trace actions calls](/docs/Features/Trace.md)
   - [Troubleshooting](docs/Troubleshooting.md)
   - [Articles](docs/Articles.md)
   - [Videos](docs/Videos.md)

docs/API/Arguments.md

@@ -29,6 +29,12 @@ The `options` object is optional, and can include any of the following.
 ### `maxAge`
 *number* (>1) - maximum allowed actions to be stored in the history tree. The oldest actions are removed once maxAge is reached. It's critical for performance. Default is `50`.
 
+### `trace`
+*boolean* or *function* - if set to `true`, will include stack trace for every dispatched action, so you can see it in trace tab jumping directly to that part of code ([more details](../Features/Trace.md)). You can use a function (with action object as argument) which should return `new Error().stack` string, getting the stack outside of reducers. Default to `false`.
+
+### `traceLimit`
+*number* - maximum stack trace frames to be stored (in case `trace` option was provided as `true`). By default it's `10`. Note that, because extension's calls are excluded, the resulted frames could be 1 less. If `trace` option is a function, `traceLimit` will have no effect, as it's supposed to be handled there.
+
 ### `serialize`
 *boolean* or *object* which contains:
 

docs/Features/Trace.md

@@ -0,0 +1,13 @@
+## Trace actions calls
+
+![trace-demo](https://user-images.githubusercontent.com/7957859/50161148-a1639300-02e3-11e9-80e7-18d3215a0bf8.gif)
+
+One of the features of Redux DevTools is to select an action in the history and see the callstack that triggered it. It aims to solve the problem of finding the source of events in the event list.
+
+By default it's disabled as, depending of the use case, generating and serializing stack traces for every action can impact the performance. To enable it, set `trace` option to `true` as in [examples](https://github.com/zalmoxisus/redux-devtools-extension/commit/64717bb9b3534ff616d9db56c2be680627c7b09d). See [the API](../API/Arguments.md#trace) for more details.
+
+For some edge cases where stack trace cannot be obtained with just `Error().stack`, you can pass a function as `trace` with your implementation. It's useful for cases where the stack is broken, like, for example, [when calling `setTimeout`](https://github.com/zalmoxisus/redux-devtools-instrument/blob/e7c05c98e7e9654cb7db92a2f56c6b5f3ff2452b/test/instrument.spec.js#L735-L737). It takes `action` object as argument and should return `stack` string. This way it can be also used to provide stack conditionally only for certain actions.
+
+There's also an optional `traceLimit` parameter, which is `10` by default, to prevent consuming too much memory and serializing large stacks. It prevents consuming too much memory and serializing large stacks, also allows you to get larger stacks than limited by the browser (it will overpass default limit of `10` imposed by Chrome in `Error.stackTraceLimit`). If `trace` option is a function, `traceLimit` will have no effect, that should be handled there like so: `trace: () => new Error().stack.split('\n').slice(0, limit+1).join('\n')` (`+1` is needed for Chrome where's an extra 1st frame for `Error\n`).
+
+Apart from opening resources in Chrome DevTools, as seen in the demo above, it can open the file (and jump to the line-column) right in your editor. Pretty useful for debugging, and also as an alternative when it's not possible to use openResource (for Firefox or when using the extension from window or for remote debugging). You can click Settings button and enable that, also adding the path to your project root directory to use. It works out of the box for VSCode, Atom, Webstorm/Phpstorm/IntelliJ, Sublime, Emacs, MacVim, Textmate on Mac and Windows. For Linux you can use [`atom-url-handler`](https://github.com/eclemens/atom-url-handler).

docs/README.md

@@ -8,6 +8,8 @@
   * [Options (arguments)](/docs/API/Arguments.md)
   * [Methods (advanced API)](/docs/API/Methods.md)
   * [Create Redux store for debugging](/docs/API/CreateStore.md)
+* Features
+  * [Trace actions calls](/docs/Features/Trace.md)
 * [Integrations](/docs/Integrations.md)
 * [FAQ](/docs/FAQ.md)
 * [Troubleshooting](/docs/Troubleshooting.md)

examples/counter/store/configureStore.js

@@ -7,7 +7,7 @@ import * as actionCreators from '../actions/counter';
 
 export let isMonitorAction;
 export default function configureStore(preloadedState) {
-  const composeEnhancers = composeWithDevTools({ actionCreators });
+  const composeEnhancers = composeWithDevTools({ actionCreators, trace: true, traceLimit: 25 });
   const store = createStore(reducer, preloadedState, composeEnhancers(
     applyMiddleware(invariant(), thunk)
   ));

examples/counter/webpack.config.js

@@ -2,7 +2,7 @@ var path = require('path');
 var webpack = require('webpack');
 
 module.exports = {
-  devtool: 'cheap-module-eval-source-map',
+  devtool: 'source-map',
   entry: [
     'webpack-hot-middleware/client',
     './index'

examples/saga-counter/src/main.js

@@ -13,7 +13,8 @@ import rootSaga from './sagas'
 
 
 const sagaMiddleware = createSagaMiddleware(/* {sagaMonitor} */)
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
+  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ trace: true, traceLimit: 25 }) || compose;
 const store = createStore(
   reducer,
   composeEnhancers(applyMiddleware(sagaMiddleware))

examples/saga-counter/webpack.config.js

@@ -2,7 +2,7 @@ var path = require('path')
 var webpack = require('webpack')
 
 module.exports = {
-  devtool: 'cheap-module-eval-source-map',
+  devtool: 'source-map',
   entry: [
     'webpack-hot-middleware/client',
     path.join(__dirname, 'src', 'main')

examples/todomvc/store/configureStore.js

@@ -4,7 +4,7 @@ import * as actionCreators from '../actions';
 
 export default function configureStore(preloadedState) {
   const enhancer = window.__REDUX_DEVTOOLS_EXTENSION__ &&
-    window.__REDUX_DEVTOOLS_EXTENSION__({ actionCreators, serialize: true });
+    window.__REDUX_DEVTOOLS_EXTENSION__({ actionCreators, serialize: true, trace: true });
   if (!enhancer) {
     console.warn('Install Redux DevTools Extension to inspect the app state: ' +
       'https://github.com/zalmoxisus/redux-devtools-extension#installation')

examples/todomvc/webpack.config.js

@@ -2,7 +2,7 @@ var path = require('path');
 var webpack = require('webpack');
 
 module.exports = {
-  devtool: 'cheap-module-eval-source-map',
+  devtool: 'source-map',
   entry: [
     'webpack-hot-middleware/client',
     './index'

package.json

@@ -81,8 +81,8 @@
     "react-redux": "^4.4.5",
     "redux": "^3.5.2",
     "redux-devtools": "^3.4.1",
-    "redux-devtools-instrument": "^1.9.3",
-    "remotedev-app": "^0.10.12",
+    "redux-devtools-instrument": "^1.9.4",
+    "remotedev-app": "^0.10.13-beta",
     "remotedev-monitor-components": "^0.0.5",
     "remotedev-serialize": "^0.1.7",
     "remotedev-slider": "^1.1.1",

src/app/api/index.js

@@ -72,11 +72,42 @@ function post(message) {
   window.postMessage(message, '*');
 }
 
-function amendActionType(action) {
-  if (typeof action === 'string') return { action: { type: action }, timestamp: Date.now() };
-  if (!action.type) return { action: { type: 'update' }, timestamp: Date.now() };
-  if (action.action) return action;
-  return { action, timestamp: Date.now() };
+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 stack;
+}
+
+function amendActionType(action, config, toExcludeFromTrace) {
+  let timestamp = Date.now();
+  let stack = getStackTrace(config, toExcludeFromTrace);
+  if (typeof action === 'string') return { action: { type: action }, timestamp, stack };
+  if (!action.type) return { action: { type: 'update' }, timestamp, stack };
+  if (action.action) return stack ? { stack, ...action } : action;
+  return { action, timestamp, stack };
 }
 
 export function toContentScript(message, serializeState, serializeAction) {
@@ -103,7 +134,7 @@ export function sendMessage(action, state, config, instanceId, name) {
   if (typeof config !== 'object') {
     // Legacy: sending actions not from connected part
     config = {}; // eslint-disable-line no-param-reassign
-    if (action) amendedAction = amendActionType(action);
+    if (action) amendedAction = amendActionType(action, config, sendMessage);
   }
   const message = {
     type: action ? 'ACTION' : 'STATE',
@@ -224,7 +255,7 @@ export function connect(preConfig) {
         }
       }
       else if (config.actionSanitizer) amendedAction = config.actionSanitizer(action);
-      amendedAction = amendActionType(amendedAction);
+      amendedAction = amendActionType(amendedAction, config, send);
       if (latency) {
         delayedActions.push(amendedAction);
         delayedStates.push(amendedState);

src/app/containers/App.js

@@ -31,6 +31,13 @@ class App extends Component {
   openWindow = (position) => {
     chrome.runtime.sendMessage({ type: 'OPEN', position });
   };
+  openOptionsPage = () => {
+    if (navigator.userAgent.indexOf('Firefox') !== -1) {
+      chrome.runtime.sendMessage({ type: 'OPEN_OPTIONS' });
+    } else {
+      chrome.runtime.openOptionsPage();
+    }
+  };
 
   render() {
     const {
@@ -126,10 +133,10 @@ class App extends Component {
             onClick={() => { this.openWindow('remote'); }}
           >Remote</Button>
           }
-          {chrome.runtime.openOptionsPage &&
+          {(chrome.runtime.openOptionsPage || navigator.userAgent.indexOf('Firefox') !== -1) &&
           <Button
             Icon={SettingsIcon}
-            onClick={() => { chrome.runtime.openOptionsPage(); }}
+            onClick={this.openOptionsPage}
           >Settings</Button>
           }
         </div>

src/app/middlewares/api.js

@@ -87,6 +87,10 @@ function messaging(request, sender, sendResponse) {
     }
     return;
   }
+  if (request.type === 'OPEN_OPTIONS') {
+    chrome.runtime.openOptionsPage();
+    return;
+  }
   if (request.type === 'GET_OPTIONS') {
     window.syncOptions.get(options => {
       sendResponse({ options });

src/app/stores/enhancerStore.js

@@ -13,6 +13,8 @@ export default function configureStore(next, monitorReducer, config) {
       monitorReducer,
       {
         maxAge: config.maxAge,
+        trace: config.trace,
+        traceLimit: config.traceLimit,
         shouldCatchErrors: config.shouldCatchErrors || window.shouldCatchErrors,
         shouldHotReload: config.shouldHotReload,
         shouldRecordChanges: config.shouldRecordChanges,

src/browser/extension/chromeAPIMock.js

@@ -3,11 +3,13 @@
 window.isElectron = window.navigator &&
   window.navigator.userAgent.indexOf('Electron') !== -1;
 
+const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
+
 // Background page only
 if (
   window.isElectron &&
   location.pathname === '/_generated_background_page.html' ||
-  navigator.userAgent.indexOf('Firefox') !== -1
+  isFirefox
 ) {
   chrome.runtime.onConnectExternal = {
     addListener() {}
@@ -84,3 +86,7 @@ if (window.isElectron) {
     return originSendMessage(...arguments);
   };
 }
+
+if (isFirefox) {
+  chrome.storage.sync = chrome.storage.local;
+}

src/browser/extension/options/EditorGroup.js

@@ -0,0 +1,59 @@
+import React from 'react';
+
+export default ({ options, saveOption }) => {
+  const EditorState = {
+    BROWSER: 0,
+    EXTERNAL: 1
+  };
+
+  return (
+    <fieldset className="option-group">
+      <legend className="option-group__title">Editor for stack traces</legend>
+
+      <div className="option option_type_radio">
+        <input className="option__element"
+               id="editor-browser"
+               name="useEditor"
+               type="radio"
+               checked={options.useEditor === EditorState.BROWSER}
+               onChange={() => saveOption('useEditor', EditorState.BROWSER)}/>
+        <label className="option__label" htmlFor="editor-browser">{
+          navigator.userAgent.indexOf('Firefox') !== -1 ?
+            'Don\'t open in external editor' :
+            'Use browser\'s debugger (from Chrome devpanel only)'
+        }</label>
+      </div>
+
+      <div className="option option_type_radio" style={{ display: 'flex', alignItems: 'center' }}>
+        <input className="option__element"
+               id="editor-external"
+               name="useEditor"
+               type="radio"
+               checked={options.useEditor === EditorState.EXTERNAL}
+               onChange={() => saveOption('useEditor', EditorState.EXTERNAL)}/>
+        <label className="option__label" htmlFor="editor-external">External editor:&nbsp;</label>
+        <input className="option__element"
+               id="editor"
+               type="text"
+               size="33"
+               maxLength={30}
+               placeholder="vscode, atom, webstorm, sublime..."
+               value={options.editor}
+               disabled={options.useEditor !== EditorState.EXTERNAL}
+               onChange={(e) => saveOption('editor', e.target.value.replace(/\W/g, ''))}/>
+      </div>
+      <div className="option option_type_radio">
+        <label className="option__label" htmlFor="editor-external" style={{marginLeft: '20px'}}>
+          Absolute path to the project directory to open:
+        </label>
+        <br/>
+        <textarea className="option__textarea"
+                  placeholder="/home/user/my-awesome-app"
+                  value={options.projectPath}
+                  disabled={options.useEditor !== EditorState.EXTERNAL}
+                  onChange={(e) => saveOption('projectPath', e.target.value.replace('\n', ''))} />
+        <div className="option__hint">Run `pwd` in your project root directory to get it</div>
+      </div>
+    </fieldset>
+  );
+};

src/browser/extension/options/Options.js

@@ -1,15 +1,17 @@
 import React from 'react';
+import EditorGroup from './EditorGroup';
 import FilterGroup from './FilterGroup';
 import AllowToRunGroup from './AllowToRunGroup';
 import MiscellaneousGroup from './MiscellaneousGroup';
 import ContextMenuGroup from './ContextMenuGroup';
 
 export default (props) => (
   <div>
-    <div style={{ color: 'red' }}>Setting options here is discouraged, and will not be possible in the next major release. Please <a href="https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md" target="_blank" style={{ color: 'red' }}>specify them as parameters</a>. See <a href="https://github.com/zalmoxisus/redux-devtools-extension/issues/296" target="_blank" style={{ color: 'red' }}>the issue</a> for more details.<br /> <hr /></div>
+    <EditorGroup {...props} />
     <FilterGroup {...props} />
     <AllowToRunGroup {...props} />
     <MiscellaneousGroup {...props} />
     <ContextMenuGroup {...props} />
+    <div style={{ color: 'red' }}><br /><hr />Setting options here is discouraged, and will not be possible in the next major release. Please <a href="https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md" target="_blank" style={{ color: 'red' }}>specify them as parameters</a>. See <a href="https://github.com/zalmoxisus/redux-devtools-extension/issues/296" target="_blank" style={{ color: 'red' }}>the issue</a> for more details.</div>
   </div>
 );

src/browser/extension/options/syncOptions.js

@@ -33,6 +33,9 @@ const get = callback => {
   if (options) callback(options);
   else {
     chrome.storage.sync.get({
+      useEditor: 0,
+      editor: '',
+      projectPath: '',
       maxAge: 50,
       filter: FilterState.DO_NOT_FILTER,
       whitelist: '',

test/app/inject/api.spec.js

@@ -1,4 +1,3 @@
-import 'babel-polyfill';
 import expect from 'expect';
 import { insertScript, listenMessage } from '../../utils/inject';
 import '../../../src/browser/extension/inject/pageScript';

test/app/setup.js

@@ -1,4 +1,5 @@
 require('babel-register')();
+require('babel-polyfill');
 global.chrome = require('sinon-chrome');
 var jsdom = require('jsdom').jsdom;