Какая есть стратегия обработки ошибок в React-приложении?

Question

[kamelot43]

Ребята, приветствую ) В разработке сервис. Помимо основного приложения есть раздел со статистикой, где можно с помощью календаря отправлять запрос на статистику.Например при отправки неправильного запроса необходимо показывать на странице popup с текстом ошибки. Если ошибок несколько - соответственно должно быть несколько popup. Возник вопрос как правильно обрабатывать приложение и показывать ошибки ?
Все приложение должен оборачивать компонент, который обрабатывает ошибки всего приложения (предохранитель вроде) . при получении пустого ответа или ошибки в запросе мы генерируем throw new error ? не уверен, что такой вариант будет работать в axios-запросах , где используются промисы.
Или второй вариант - просто есть компонент (popup), в который мы передаем статус , если возникает ошибка в axios-запросах ?

В общем как правильно работать с ошибками в React-приложении (обработка ошибок в axios-запросах и обработка ошибок в UI) ? Есть похожие примеры или статьи, которые можно почитать на эту тему ? Заранее спасибо )

Answer 1

[profesor08]

Ну расположи где-то компонент контейнер для твоих нотисов. Создай некий store, где будешь хранить нотисы. В компоненты ты их выводишь, а любыми другими средствами добавляешь. Проще некуда, это базовые вещи реакта.

Answer 2

[Алексей]

если я правильно понял то тебе нужно выводить пользователю сообщения в случае возникновения ошибок. Тогда выручит react-toastify, у них очень понятная документация, ты ими по сути оборачиваешь все приложение и выводишь тогда когда где либо возникает ошибка. Если ошибок несколько - будет несколько уведомлений.
Вот что типа такого:

if (res.data.success) {
notifySuccess(res.data.messages)
}
if (!res.data.success) {
Object.values(res.data.errors).map((error) =>
notifyError({error})
)
}