微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

为什么React开发工具正在劫持我的日志级别函数调用?

如何解决为什么React开发工具正在劫持我的日志级别函数调用?

我已经设置loglevelloglevel-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;
    }
}

screenshot from chrome dev tools showing that react_devtools_backend is hijacking

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。