解决方案:
使用错误边界:
import React, { Component } from 'react'
//错误边界
//https://zh-hans.reactjs.org/docs/error-boundaries.html#gatsby-focus-wrapper
export default class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { error: null, errorInfo: null };
}
componentDidCatch(error, errorInfo) {
// Catch errors in any components below and re-render with error message
this.setState({
error: error,
errorInfo: errorInfo
})
// You can also log error messages to an error reporting service here
}
render() {
if (this.state.errorInfo) {
// Error path
return (
<div className="m-error-wrap">
<div className="m-error-img-wrap">
<div className="m-error-img"></div>
</div>
<div className="m-error-text">网页出错了,请尝试刷新一下~</div>
<details style={{ whiteSpace: 'pre-wrap' }}>
{this.state.error && this.state.error.toString()}
<br />
{this.state.errorInfo.componentStack}
</details>
</div>
);
}
// Normally, just render children
return this.props.children;
}
}
本文摘自 :https://blog.51cto.com/x