Реакция: использование границ ошибок для выделения сломанных компонентов
Я использую React 16.3, который поддерживает границы ошибок через переопределения функции ComponentDidCatch(). Я тоже использую машинописный текст.
Для облегчения будущей отладки я хочу каким-то образом отлавливать любые ошибки / исключения на уровне компонента, чтобы выделить (нарисовать желтый квадрат) в пользовательском интерфейсе, указывая на возможность поломки компонента.
Как я могу сделать это без явного объявления границы ошибки вокруг каждого компонента, который я использую?
Возможно, их можно обернуть во время сборки? Я также предполагаю, что граница ошибки должна каким-то образом получить реквизиты сломанного компонента, чтобы знать, где нарисовать желтый квадрат. Как я мог этого добиться?
Я новичок в React, поэтому заранее спасибо.
Ответы 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;
}
}
Я также, вероятно, должен отметить, что я также использую пару пользовательских базовых компонентов (Text / View / Image), которые не наследуются от компонентов React.