Capture 400's and 500's under Axios interceptors for sentry

user_10235939 0
Viewed 2630

Using Axios interceptors to handle the 400's and 500's in a generic manner by showing an Error Popup. Usually, Sentry calls are triggered when the custom _error.js page is rendered due to a JS error. How do I log the API call errors in sentry?

sentry next.js
1 Answers

You can either use an axios interceptor or write it in the catch() of your axios call itself.

Interceptor

axios.interceptors.response.use(
  (response: AxiosResponse) => response,
  (error: AxiosError) => {
    Sentry.captureException(error);
    return Promise.reject(error);
  },
);

Axios Call

axios({
      url,
      method,
      ...
    })
      .then(async (response: AxiosResponse) => {
        resolve(response.data);
      })
      .catch(async (error: AxiosError) => {
        Sentry.captureException(error);
        reject(error);
      });
user_164172990
Related