如何解决为什么React开发工具正在劫持我的日志级别函数调用?
我已经设置loglevel
和loglevel-remote-plugin
来将客户端日志发送到服务器,以便对客户端问题进行故障排除。效果很好。
我还创建了一个<ErrorBoundary>
组件来捕获React组件冒泡时的错误。
我的问题是,当我注销componentDidCatch
函数中的错误时,日志消息仅出现在本地控制台中,而没有发送到服务器。
此外,通过render
函数,错误信息没有出现在屏幕上;因此,代码中的空条件处理。
如何停止react-devtools-backend.js处理对error
的调用? (以及关于如何使错误显示在屏幕上的奖励积分:)
谢谢
import React from 'react';
import log from 'loglevel';
// eslint-disable-next-line react/prefer-stateless-function
export default class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
componentDidCatch(error,errorInfo) {
// mmm sometimes this was being swallowed by react-dev-tools
// but users probably won't be running this hopefully?
log.getLogger('ErrorBoundary').error(
`error=${error}; errorInfo=${JSON.stringify(errorInfo)}`,);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return (
<div>
<h1>Oops,something went wrong :(</h1>
<p>
The error:
{this.state.error ? this.state.error.toString() : ' was not captured!'}
</p>
<p>
Where it occured:
{this.state.info ? this.state.info.componentStack : ' is unkNown'}
</p>
</div>
);
}
return this.props.children;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。