@timofeus91
Junior Frontend Developer

Как отследить конкретную ошибку и отобразить её только один раз?

Всем доброго дня! Есть следующая ситуация - при открытии определенной страницы выполняется несколько запросов через useEffect. Эти запросы идут параллельно друг другу и используется interceptor. В случае возникновения ошибки по запросу мы её визуализируем всплывающим окном посредством react-toastify. Все хорошо до того момента пока не приходит определенная ошибка доступа. В этом случае визуализируется 3 окна с одной и той-же ошибкой так как запросы отправлялись одновременно. Задача стоит в том чтобы визуализировать данную ошибку только один раз, вместо 3. При этом необходимо сохранить асинхронность запросов и постараться избежать костылей. Как подобное можно было бы реализовать? Или может не нужно трогать сами запросы, а нужно продумать архитектуру показа ошибок? Буду рад любым советам!

Ниже привожу пример кода.

const instance = axios.create({
  baseURL: BASE_URL,
  headers: {
    "Content-Type": "application/json",
    "Access-Control-Expose-Headers": "Content-Disposition",
  },
  timeout: 3600000,
});

instance.interceptors.request.use(
  (config) => {
    const configDes = { ...config };
    const token = 12345678;
    if (token) {
      configDes.headers.Authorization = `Bearer ${token}`;
    }
    return configDes;
  },
  (error) => Promise.reject(error)
);

instance.interceptors.response.use(
  (response) => response,
  (error) => Promise.reject(error)
);

const api1 = () => instance.get("api/api1");
const api2 = () => instance.get("api/api2");
const api3 = () => instance.get("api/api2");

const api1Action = () =>
  api1()
    .then((res) => console.log(res))
    .catch((err) => console.log(err));

const api2Action = () =>
  api2()
    .then((res) => console.log(res))
    .catch((err) => console.log(err));

const api3Action = () =>
  api3()
    .then((res) => console.log(res))
    .catch((err) => console.log(err));

useEffect(() => {
  dispatch(api1Action());
  dispatch(api2Action());
  dispatch(api3Action());
}, []);
  • Вопрос задан
  • 46 просмотров
Решения вопроса 1
@timofeus91 Автор вопроса
Junior Frontend Developer
Библиотека react-toastify позволяет поставить toast элементу значение toastId . Если же айди у двух контейнеров будет одинаковое, то покажется только один контейнер. Библиотека сама отслеживает дубли своих контейнеров.

const notifyError = (errorMessage: string | Error) =>
  toast.error(errorMessage, {
    position: "bottom-center",
    autoClose: 5000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined,
    toastId: errorMessage as string,
  });
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@LEXA_JA
Тут можно сделать по разному, зависит желаемого результата.
Если все ошибка ловить через интерсептор и вы не хотите дублировать ошибки из разных компонент, то я бы сделал буфер для ошибок по времени. Схема работы такая:
Для каждой ошибки можно получить ключ, для одинаковых ошибок ключ должен быть одинаковым. За основу можно взять код ошибки или что-то в этом роде
При получении ошибки получаем ключ, ключи складываем в Set. Set может быть как глобальный так и ограниченный
Если в Set уже есть такой ключ, то ошибку игнорируем. Опционально можно не игнорировать, а обновлять существующий тост, например показать счетчик
Если ключа нет, то показываем уведомление
Ключи из Set пропадают по таймеру/событию, тут уже как вам удобнее, например можно использовать onClose из react-toastify.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы