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

Question

[tron21]

Всем доброго дня! Есть следующая ситуация - при открытии определенной страницы выполняется несколько запросов через 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());
}, []);

Answer 1

[tron21]

Библиотека 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,
  });

Answer 2

[LEXA_JA]

Тут можно сделать по разному, зависит желаемого результата.
Если все ошибка ловить через интерсептор и вы не хотите дублировать ошибки из разных компонент, то я бы сделал буфер для ошибок по времени. Схема работы такая:
Для каждой ошибки можно получить ключ, для одинаковых ошибок ключ должен быть одинаковым. За основу можно взять код ошибки или что-то в этом роде
При получении ошибки получаем ключ, ключи складываем в Set. Set может быть как глобальный так и ограниченный
Если в Set уже есть такой ключ, то ошибку игнорируем. Опционально можно не игнорировать, а обновлять существующий тост, например показать счетчик
Если ключа нет, то показываем уведомление
Ключи из Set пропадают по таймеру/событию, тут уже как вам удобнее, например можно использовать onClose из react-toastify.

Comments

[tron21]

Хм. Я хотел избежать хранения ошибки где либо так как думал о следующей ситуации - мы храним код ошибки и если эта ошибка хранится, то значит уже показывали и повторно выводить не будем. Но при этом вдруг пользователь сразу после данной ситуации попробует перейти куда-либо где он снова попадёт на такую ошибку - тогда она не будет визуализирована. А нам нужно это контролировать внутри компонента одного. Но я не знал о событии onClose в react-toastify. Попробую через него посмотреть что можно реализовать. Плюс я увидел что у них в доке есть контроль активных уже контейнеров , которые мы показывает. В то русло тоже хочу посмотреть что могу реализовать. Спасибо большое за совет!

[LEXA_JA]

tron21, Если нужно ограничить это одним компонентом, то можно хранить ошибку локально. Или при навигации сбрасывать все ошибки из сета

[tron21]

LEXA_JA, да , отличный вариант! Правда все оказалось ещё проще. Библиотека react-toastify. позволяет передать в toast айдишник. Если какой-то контейнер уже активирован, то следующий тост с таким-же айдишником не отработает и не будет показываться. А айдишником можно поставить текст ошибки чтобы не ставить костыльный статус ошибки. Осталось только оттестировать этот вариант и потом закрыть этот вопрос если все отработает корректно. Но ещё раз спасибо за советы! Очень пригодятся в будущем