redux-devtools/packages/redux-devtools-trace-monitor/src/StackTraceTab.js

import React, { Component, PropTypes } from 'react';

import {getStackFrames} from "./react-error-overlay/utils/getStackFrames";
import StackTrace from "./react-error-overlay/containers/StackTrace";

export default class StackTraceTab extends Component {
    constructor(props) {
        super(props);

        this.state = {
            stackFrames : []
        };
    }
    componentDidMount() {
        //console.log("StackTraceTab mounted");
        this.checkForStackTrace();
    }

    componentDidUpdate(prevProps) {
        const {action, actions} = prevProps;

        if(action !== this.props.action || actions !== this.props.actions) {
            this.checkForStackTrace();
        }
    }

    checkForStackTrace() {
        const {action, actions : liftedActionsById} = this.props;

        if(!action) {
            return;
        }

        const liftedActions = Object.values(liftedActionsById);
        const liftedAction = liftedActions.find(liftedAction => liftedAction.action === action);

        if(liftedAction && typeof liftedAction.stack === 'string') {
            const deserializedError = Object.assign(new Error(), {stack: liftedAction.stack});

            getStackFrames(deserializedError)
                .then(stackFrames => {
                    console.log("Stack frames: ", stackFrames);
                    this.setState({stackFrames, currentError : deserializedError});
                })
        }
        else {
            this.setState({stackFrames : []})
        }
    }

    onStackLocationClicked = (fileLocation = {}) => {
        //console.log("Stack location args: ", ...args);

        const {fileName, lineNumber} = fileLocation;

        if(fileName && lineNumber) {
            const matchingStackFrame = this.state.stackFrames.find(stackFrame => {
                const matches = (
                    (stackFrame._originalFileName === fileName && stackFrame._originalLineNumber === lineNumber) ||
                    (stackFrame.fileName === fileName && stackFrame.lineNumber === lineNumber)
                );
                return matches;
            })

            //console.log("Matching stack frame: ", matchingStackFrame);

            if(matchingStackFrame) {
                /*
                const frameIndex = this.state.stackFrames.indexOf(matchingStackFrame);
                const originalStackFrame = parsedFramesNoSourcemaps[frameIndex];
                console.log("Original stack frame: ", originalStackFrame);
                */
                const adjustedLineNumber = Math.max(lineNumber - 1, 0);


                chrome.devtools.panels.openResource(fileName, adjustedLineNumber, (result) => {
                    //console.log("openResource callback args: ", callbackArgs);
                    //console.log("Testing");
                    if(result.isError) {
                        const {fileName : finalFileName, lineNumber : finalLineNumber} = matchingStackFrame;
                        const adjustedLineNumber = Math.max(finalLineNumber - 1, 0);
                        chrome.devtools.panels.openResource(finalFileName, adjustedLineNumber, (result) => {
                            //console.log("openResource result: ", result);
                        });
                    }
                });
            }
        }

    }


    render() {
        const {stackFrames} = this.state;

        return (
            <div style={{backgroundColor : "white", color : "black"}}>
                <h2>Dispatched Action Stack Trace</h2>
                <div style={{display : "flex", flexDirection : "column"}}>
                    <StackTrace
                        stackFrames={stackFrames}
                        errorName={"N/A"}
                        contextSize={3}
                        editorHandler={this.onStackLocationClicked}
                    />
                </div>
            </div>
        )
    }
}