为什么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 (将#修改为@)