Axios interceptor repeats previous loop and incrementally adds new loops per new request

Thore 0
Viewed 16

In my react app I use an axios interceptor for my global error handling. Because I use React Context to show and handle my notifications I had to move the interceptor part to a functional component where I can use the React useContext hook.

const Interceptor = ({ children }) => {
  const { addNotification } = useContext(NotificationContext);

  apiClient.interceptors.request.use(
    (config) => {
      return config;
    },
    (error) => {
      return Promise.reject(error);
    }
  );

  apiClient.interceptors.response.use(
    (response) => {
      return response;
    },
    (error) => {
      if (error.message === "Network Error") {
        if (error?.response?.status === 504) {
          addNotification("error", "Oops!", "gateway_timeout");
        } else {
          addNotification("error", "Oops!", "server_down");
        }
      } else {
        if (error?.response?.config?.url !== "/me") {
          addNotification("error", "Oops!", error.response.data.message);
        }
      }

      return Promise.reject(error);
    }
  );

  return <>{children}</>;
};

This works - errors are being caught and a notification is shown - for the first response with an error. The second time the first notification is shown again and two new notification are being made. The third time the previous three notifications are shown again and three new ones are being made and so on. The problem seems to come from the interceptor which is being ran incrementally (1,3,6,...)

Demo (hit the login button twice or more to see)

interceptor axios javascript
1 Answers

Problem

You are adding a new interceptor every render, but you only want to do it once.

Solution

Wrap your code in useEffect

useEffect(() => {
  apiClient.interceptors.request.use(
    // ...
  )
  apiClient.interceptors.response.use(
    // ...
  )
}, [])
Konrad Linkowski0
Related