Question

我正在使用React 16.3，它通过ComponentDidCatch()函数覆盖支持错误边界。我也在使用打字稿。

为了便于将来调试，我想以某种方式捕获组件级别的任何错误/异常，以便在UI中突出显示（绘制黄色方块），指示组件损坏的可能性。

如果不必在我使用的每个组件周围明确声明错误边界，我怎么能这样做呢？

也许可以在构建期间包装它们？我还假设错误边界需要以某种方式从破碎的组件中获取道具，以便知道在哪里绘制黄色方块。我怎么能做到这一点？

我对React很新，所以提前感谢。

Answer 1

我认为如果你想使用错误边界，那么在dom渲染中使用它。

import * as ReactDOM from 'react-dom';
import {ErrorBoundary} from 'your-path';

    ReactDOM.render(
        <ErrorBoundary>
           //Router or other stuff
        </ErrorBoundary>,
        document.getElementById('root') as HTMLElement
    );

像这样创建ErrorBoundary组件。

import * as React from 'react';

interface IErrorBoundaryState {
    isError: boolean;
    error: React.ErrorInfo;
}

export class ErrorBoundary extends React.Component<{}, IErrorBoundaryState> {

    this.state = {isError: false, error: null};

    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
        this.setState({ isError: true, error: errorInfo });
    }

    render(): any {
        if (this.state.isError) {
            return <div>{this.state.error.componentStack}</div>;
        }

        return this.props.children;
    }
}

React：使用错误边界来突出破坏的组件

1 个答案: