mirror of
				https://github.com/reduxjs/redux-devtools.git
				synced 2025-11-04 09:57:26 +03:00 
			
		
		
		
	Show a hint with link to docs when no stack provided
This commit is contained in:
		
							parent
							
								
									2ac0e90ece
								
							
						
					
					
						commit
						29ae3034cc
					
				| 
						 | 
					@ -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"}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue
	
	Block a user