1

我正在使用 React 进行 SPA。

目前，在生产中，当应用程序崩溃时，用户只会看到一个空白页面。

所以，我正在尝试设置一个自定义错误页面。

因为我在我的反应应用程序中使用 BugSnag 进行错误监控；我使用了 BugSnag 提供的 ErrorBoundary。

以下是初始化和放置 ErrorBoundary 的代码。

const bugsnagClient = bugsnag('8XXXXXXXXXXXXXXXbac')
bugsnagClient.use(bugsnagReact, React)
const ErrorBoundary = bugsnagClient.getPlugin('react')

ReactDOM.render(
<ErrorBoundary FallbackComponent={FallBack}>
    <IntlProvider locale={language} messages={messages[language]}>
        <Provider store={store}>
            <App />
        </Provider>
    </IntlProvider>
</ErrorBoundary>,
document.getElementById('root')
);

以下是自定义错误代码：

import React, { Component } from 'react';
import fallbackVector from '../assets/500-error-vector.svg';
import { Link } from "react-router-dom";

export default class FallBack extends Component{

    render(){

        return(
            <div className="container-fluid mt-3 mb-3 mt-md-5 mb-md-5">
                <div className="row">
                    <div className="col-12 col--404 text-center">
                        <img src={fallbackVector} alt="page not found" />
                        <p className="mt-5 font-weight-bold">Something went wrong!</p>
                        <Link to="/">
                            <button className="btn btn-primary mt-3">GO TO HOME</button>
                        </Link>
                    </div>
                </div>
            </div>
        )
    }
}

不知何故，它仍然显示空白页。

错误可能发生在 React 组件树之外，因此 ErrorBoundry 不会捕获它。

关于如何解决这个问题的任何想法？

4

1 回答 1

2

如果错误发生在 React 组件树之外，则 ErrorBoundary 不会捕获它，并且不会呈现 Fallback 组件。

如果你有一个复制案例触发了 React 组件树中的错误，而这不起作用，那么请通过 Bugsnag 支持联系我们，我们会看看。

谢谢！

于 2019-12-13T09:11:00.103 回答