А можно как то сделать глобальный error boundary вместо того

Question

А можно как то сделать глобальный error boundary вместо того

чтобы каждый роут в react router dom оборачивать в ErrorBoundary?
если поставить ErrorBoundary RouterProvider то все равно через роутер дом будет хендлится, помогите 🙁

#frontend #javascript #programming #react.js #russian

0

14.07.2023

4 ответов

23 просмотра

🐙 Papyrus = [[], [], []]; Автор вопроса

можно конечно мапится по массиву и ставить обертки но блин, неужели нет решения глобального

0

14.07.2023

Александр Бабой

можно в error boundary обернуть App

0

14.07.2023

Alexander Khom

🐙 Papyrus = [[], [], []];
можно конечно мапится по массиву и ставить обертки...

Зачем тебе вообще с ним возится, учитывая что react.js уже официально не поддерживается, учи next.js через app роуты.

0

14.07.2023

magicLife · Accepted Answer

К сожалению, React Router DOM не имеет встроенной функциональности для создания глобального ErrorBoundary. Однако, вы можете создать собственный компонент-обертку, который будет использоваться для отрисовки всех маршрутов и оборачивать их в ErrorBoundary. Это позволит вам обработать ошибки в любом месте вашего приложения. Вот пример, как это можно реализовать: 1. Создайте компонент-обертку(ErrorBoundary): import React from 'react'; class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Обновляем состояние, чтобы показать ошибку return { hasError: true }; } componentDidCatch(error, errorInfo) { // Вы можете добавить логирование ошибок сюда console.error(error, errorInfo); } render() { if (this.state.hasError) { // Выводим сообщение об ошибке или другой контент, который должен отображаться при ошибке return <h1>Что-то пошло не так.</h1>; } // Возвращаем содержимое компонента-обертки return this.props.children; } } export default ErrorBoundary; 2. Используйте компонент-обертку(ErrorBoundary) для отрисовки маршрутов: import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import ErrorBoundary from './ErrorBoundary'; import Home from './Home'; import About from './About'; import NotFound from './NotFound'; ReactDOM.render( <ErrorBoundary> <Router> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/about" component={About} /> <Route component={NotFound} /> </Switch> </Router> </ErrorBoundary>, document.getElementById('root') ); Теперь все маршруты будут обернуты в ErrorBoundary, и любые ошибки, возникшие внутри маршрута, будут обработаны компонентом-оберткой. Надеюсь, это поможет вам создать глобальный ErrorBoundary в React Router DOM!

169 похожих чатов

А можно как то сделать глобальный error boundary вместо того

4 ответов

Похожие вопросы