This repository has been archived by the owner on Mar 16, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.js
72 lines (62 loc) · 1.94 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import React, { Component, PropTypes } from 'react';
import ErrorStackParser from 'error-stack-parser';
import styles from './styles';
class DelicateErrorReporter extends Component {
static displayName = 'DelicateErrorReporter';
static propTypes = {
error: PropTypes.instanceOf(Error).isRequired
};
constructor(props) {
super(props);
this.state = {
beQuiet: true // means to be small and not to disturb the user
};
}
changeBehavior() {
this.setState({
beQuiet: !this.state.beQuiet
});
}
renderFrames() {
console.log('error', this.props.error);
console.log('parsed error', ErrorStackParser.parse(this.props.error));
return ErrorStackParser.parse(this.props.error).map((f) => {
const link = `${ f.fileName }:${ f.lineNumber }:${ f.columnNumber }`;
return (
<div className={ styles.frame }>
<div>{ f.functionName }</div>
<div className={ styles.file }>
<a href={ link } className={ styles.fileLink }>{ link }</a>
</div>
</div>
);
});
}
render() {
return (
<div>
<style>{ styles.valueOf() }</style>
<div
className={ this.state.beQuiet ? styles.flag : styles.hidden }
onClick={ ::this.changeBehavior }>
<span className={ styles.flagContent }>!</span>
</div>
<div className={ this.state.beQuiet ?
styles.hidden :
styles.container }>
<a
href="#"
onClick={ ::this.changeBehavior }
className={ styles.closeButton }
dangerouslySetInnerHTML={ { __html: '×' } } />
<h1 className={ styles.message }>
{ this.props.error.name }: { this.props.error.message }
</h1>
<hr className={ styles.line } />
<div className={ styles.stack }>{ this.renderFrames() }</div>
</div>
</div>
);
}
}
export default DelicateErrorReporter;