Show a hint with link to docs when no stack provided

This commit is contained in:
Zalmoxisus 2018-12-18 19:26:17 +02:00
parent 2ac0e90ece
commit 29ae3034cc
3 changed files with 83 additions and 3 deletions

View File

@ -4,6 +4,8 @@ import {getStackFrames} from './react-error-overlay/utils/getStackFrames';
import StackTrace from './react-error-overlay/containers/StackTrace'; import StackTrace from './react-error-overlay/containers/StackTrace';
import openFile from './openFile'; import openFile from './openFile';
const rootStyle = {padding: '5px 10px'};
export default class StackTraceTab extends Component { export default class StackTraceTab extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -47,7 +49,10 @@ export default class StackTraceTab extends Component {
}); });
} }
else { else {
this.setState({stackFrames: []}); this.setState({
stackFrames: [],
showDocsLink: liftedAction.action && liftedAction.action.type && liftedAction.action.type !== '@@INIT'
});
} }
} }
@ -76,14 +81,27 @@ export default class StackTraceTab extends Component {
openFile(fileName, lineNumber, matchingStackFrame); openFile(fileName, lineNumber, matchingStackFrame);
} }
} }
}
openDocs = (e) => {
e.stopPropagation();
window.open('https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Features/Trace.md');
} }
render() { render() {
const {stackFrames} = this.state; const {stackFrames, showDocsLink} = this.state;
if (showDocsLink) {
return (
<div style={rootStyle}>
To enable tracing action calls, you should set `trace` option to `true` for Redux DevTools enhancer.
Refer to <a href="#" onClick={this.openDocs}>this page</a> for more details.
</div>
);
}
return ( return (
<div style={{padding: '5px 10px'}}> <div style={rootStyle}>
<StackTrace <StackTrace
stackFrames={stackFrames} stackFrames={stackFrames}
errorName={"N/A"} errorName={"N/A"}

View File

@ -38,6 +38,15 @@ describe('StackTraceTab component', () => {
genAsyncSnapshot(component, done); genAsyncSnapshot(component, done);
}); });
it('should render the link to docs', (done) => {
const component = mount(
<StackTraceTab
actions={actions} action={actions[1].action}
/>
);
genAsyncSnapshot(component, done);
});
it('should render with trace stack', (done) => { it('should render with trace stack', (done) => {
const component = mount( const component = mount(
<StackTraceTab <StackTraceTab

View File

@ -1,5 +1,58 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StackTraceTab component should render the link to docs 1`] = `
<StackTraceTab
action={
Object {
"type": "INCREMENT_COUNTER",
}
}
actions={
Object {
"0": Object {
"action": Object {
"type": "@@INIT",
},
"type": "PERFORM_ACTION",
},
"1": Object {
"action": Object {
"type": "INCREMENT_COUNTER",
},
"type": "PERFORM_ACTION",
},
"2": Object {
"action": Object {
"type": "INCREMENT_COUNTER",
},
"stack": "Error
at fn1 (app.js:72:24)
at fn2 (app.js:84:31)
at fn3 (chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/page.bundle.js:1269:80)",
"type": "PERFORM_ACTION",
},
}
}
>
<div
style={
Object {
"padding": "5px 10px",
}
}
>
To enable tracing action calls, you should set \`trace\` option to \`true\` for Redux DevTools enhancer. Refer to
<a
href="#"
onClick={[Function]}
>
this page
</a>
for more details.
</div>
</StackTraceTab>
`;
exports[`StackTraceTab component should render with no props 1`] = ` exports[`StackTraceTab component should render with no props 1`] = `
<StackTraceTab> <StackTraceTab>
<div <div