Skip to content

Commit da50985

Browse files
committed
fix: error overlay could fail by itself
1 parent 67e8fbc commit da50985

File tree

2 files changed

+39
-33
lines changed

2 files changed

+39
-33
lines changed

README.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export default hot(App);
5555
module.exports = {
5656
entry: ['react-hot-loader/patch', './src'],
5757
// ...
58-
}
58+
};
5959
```
6060

6161
4. If you need hooks support, use [`@hot-loader/react-dom`](#hot-loaderreact-dom)
@@ -123,10 +123,10 @@ module.exports = {
123123
// ...
124124
resolve: {
125125
alias: {
126-
'react-dom': '@hot-loader/react-dom'
127-
}
128-
}
129-
}
126+
'react-dom': '@hot-loader/react-dom',
127+
},
128+
},
129+
};
130130
```
131131

132132
### Old API

src/errorReporter.js

+34-28
Original file line numberDiff line numberDiff line change
@@ -68,39 +68,45 @@ const errorHeader = (component, componentStack) => {
6868
return null;
6969
};
7070

71-
const mapError = ({ error, errorInfo, component }) => (
72-
<React.Fragment>
73-
<p style={{ color: 'red' }}>
74-
{errorHeader(component, errorInfo && errorInfo.componentStack)}{' '}
75-
{error.toString ? error.toString() : (error && error.message) || 'undefined error'}
76-
</p>
77-
{errorInfo && errorInfo.componentStack ? (
78-
<div>
79-
<div>Stack trace:</div>
80-
<ul style={{ color: 'red', marginTop: '10px' }}>
81-
{error.stack
82-
.split('\n')
83-
.slice(1, 2)
84-
.map((line, i) => <li key={String(i)}>{line}</li>)}
85-
<hr />
86-
{errorInfo.componentStack
87-
.split('\n')
88-
.filter(Boolean)
89-
.map((line, i) => <li key={String(i)}>{line}</li>)}
90-
</ul>
91-
</div>
92-
) : (
93-
error.stack && (
71+
const mapError = ({ error, errorInfo, component }) => {
72+
if (!error) {
73+
error = { message: 'undefined error' };
74+
}
75+
76+
return (
77+
<React.Fragment>
78+
<p style={{ color: 'red' }}>
79+
{errorHeader(component, errorInfo && errorInfo.componentStack)}{' '}
80+
{error.toString ? error.toString() : (error && error.message) || 'undefined error'}
81+
</p>
82+
{errorInfo && errorInfo.componentStack ? (
9483
<div>
9584
<div>Stack trace:</div>
9685
<ul style={{ color: 'red', marginTop: '10px' }}>
97-
{error.stack.split('\n').map((line, i) => <li key={String(i)}>{line}</li>)}
86+
{error.stack
87+
.split('\n')
88+
.slice(1, 2)
89+
.map((line, i) => <li key={String(i)}>{line}</li>)}
90+
<hr />
91+
{errorInfo.componentStack
92+
.split('\n')
93+
.filter(Boolean)
94+
.map((line, i) => <li key={String(i)}>{line}</li>)}
9895
</ul>
9996
</div>
100-
)
101-
)}
102-
</React.Fragment>
103-
);
97+
) : (
98+
error.stack && (
99+
<div>
100+
<div>Stack trace:</div>
101+
<ul style={{ color: 'red', marginTop: '10px' }}>
102+
{error.stack.split('\n').map((line, i) => <li key={String(i)}>{line}</li>)}
103+
</ul>
104+
</div>
105+
)
106+
)}
107+
</React.Fragment>
108+
);
109+
};
104110

105111
class ErrorOverlay extends React.Component {
106112
state = {

0 commit comments

Comments
 (0)