1 | import React, {Component, PropTypes} from 'react'
|
2 | import style from './style.js'
|
3 | import ErrorStackParser from 'error-stack-parser'
|
4 | import assign from 'object-assign'
|
5 | import {isFilenameAbsolute, makeUrl, makeLinkText} from './lib'
|
6 |
|
7 | export default class RedBox extends Component {
|
8 | static propTypes = {
|
9 | error: PropTypes.instanceOf(Error).isRequired,
|
10 | filename: PropTypes.string,
|
11 | editorScheme: PropTypes.string,
|
12 | useLines: PropTypes.bool,
|
13 | useColumns: PropTypes.bool
|
14 | }
|
15 | static displayName = 'RedBox'
|
16 | static defaultProps = {
|
17 | useLines: true,
|
18 | useColumns: true
|
19 | }
|
20 | render () {
|
21 | const {error, filename, editorScheme, useLines, useColumns} = this.props
|
22 | const {redbox, message, stack, frame, file, linkToFile} = assign({}, style, this.props.style)
|
23 |
|
24 | const frames = ErrorStackParser.parse(error).map((f, index) => {
|
25 | let text
|
26 | let url
|
27 |
|
28 | if (index === 0 && filename && !isFilenameAbsolute(f.fileName)) {
|
29 | url = makeUrl(filename, editorScheme)
|
30 | text = makeLinkText(filename)
|
31 | } else {
|
32 | let lines = useLines ? f.lineNumber : null
|
33 | let columns = useColumns ? f.columnNumber : null
|
34 | url = makeUrl(f.fileName, editorScheme, lines, columns)
|
35 | text = makeLinkText(f.fileName, lines, columns)
|
36 | }
|
37 |
|
38 | return (
|
39 | <div style={frame} key={index}>
|
40 | <div>{f.functionName}</div>
|
41 | <div style={file}>
|
42 | <a href={url} style={linkToFile}>{text}</a>
|
43 | </div>
|
44 | </div>
|
45 | )
|
46 | })
|
47 | return (
|
48 | <div style={redbox}>
|
49 | <div style={message}>{error.name}: {error.message}</div>
|
50 | <div style={stack}>{frames}</div>
|
51 | </div>
|
52 | )
|
53 | }
|
54 | }
|