How to gracefully handle errors in responses on a component level with Axios and Vue 3?

I am sorry if it is obvious/well-covered elsewhere, but my google-fu has been failing me for over a full day by now. What I would like to achieve is a rich component-level handling of request errors: toaster notifications, status bars, you name it. The most obvious use case is auth guards/redirects, but there may be other scenarios as well (e.g. handling 500 status codes). For now, app-wide interceptors would do, but there is an obvious (to me, at least) benefit in being able to supplement or override higher-level interceptors. For example, if I have interceptors for 403 and 500 codes app-wide, I might want to override an interceptor for 403, but leave an interceptor for 500 intact on a component level.

This would require access to component properties: I could then pass status messages in child components, create toaster notifications with custom timeouts/animations and so on. Naively, for my current app-wide problem, this functionality belongs in App.vue, but I can not figure out how to get access to App in axios.interceptors.response using the current plugin arrangement and whether it is okay to use a single axios instance app-wide in the first place.

The trimmed down code I have tried so far (and which seems the most ubiquitous implementation found online) can be found below. It works with redirects, producing Error: getTranslators: detection is already running in the process (maybe because another 401 happens right after redirect with my current testing setup). However, import Vue, both with curly brackets and without, fails miserably, and, more importantly, I have no way of accessing app properties and child components from the plugin.

// ./plugins/axios.js
import axios from 'axios';
import { globalStorage } from '@/store.js';
import router from '../router';
// Uncommenting this import gives Uncaught SyntaxError: ambiguous indirect export: default.
// Circular dependency?..
// import Vue from 'vue';

const api = axios.create({
  baseURL: import.meta.env.VUE_APP_API_URL,
});

api.interceptors.response.use(response => response,
error => {
 if (error.response.status === 401) {
   //Vue.$toast("Your session has expired. You will be redirected shortly");
   delete globalStorage.userInfo;
   localStorage.setItem('after_login', router.currentRoute.value.name);
   localStorage.removeItem('user_info');
   router.push({ name: 'login' });
 }
 return Promise.reject(error);
});

export default api;

// --------------------------------------------------------------------------

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from './plugins/axios'
import VueAxios from 'vue-axios'

const app = createApp(App)

app.use(router)
  .use(VueAxios, axios)
  .mount('#app')

So, then, how do I get access to component properties in interceptors? If I need them to behave differently for different components, would I then need multiple axios instances (assuming the behavior is not achieved by pure composition)? If so, where to put the relevant interceptor configuration and how to ensure some parts of global configuration such as baseURL apply to all of these instances?

I would prefer not having more major external dependencies such as Vuex as a complete replacement for the existing solution, but this is not a hill to die on, of course.

Solution

Instead of using axios's interceptors, you should probably create a composable. Consider the following:

composables/useApiRequest.js

import axios from 'axios';
import { useToast } from "vue-toastification";

const useApiRequest = () => {
  const toast = useToast();

  const fetch = async (url) => {
    try {
      await axios.get(url);
    } catch (error) {
      if (error.response.status === 403) {
        toast.error("Your session has expired", {
          timeout: 2000
        });
      }
    }
  };

  return {
    fetch,
  };
};

export default useApiRequest;

Here we're creating a composable called useApiRequest that serves as our layer for the axios package where we can construct our api requests and create generic behaviors for certain response attributes. Take note that we can safely use Vue's Composition API functions and also components such as the vue-toastification directly in this composable:

if (error.response.status === 403) {
  toast.error("Your session has expired", {
    timeout: 2000
  });
}

We can import this composable in the component and use the fetch function to send a GET request to whatever url that we supply:

<script setup>
  import { ref } from 'vue';
  import useApiRequest from '../composables/useApiRequest';

  const searchBar = ref('');
  const request = useApiRequest();

  const retrieveResult = async () => {
    await request.fetch(`https://api.ebird.org/v2/data/obs/${searchBar.value}/recent`);
  }
</script>

And that's it! You can check the example here.

Now, you mentioned that you want to access component properties. You can accomplish this by letting your composable accept arguments containing the component properties:

// `props` is our component props
const useApiRequest = (props) => {
  // add whatever logic you plan to implement for the props
}

<script setup>
  import { ref } from 'vue';
  import useApiRequest from '../composables/useApiRequest';
  import { DEFAULT_STATUS } from '../constants';
 
  const status = ref(DEFAULT_STATUS);
  const request = useApiRequest({ status });
</script>

Just try to experiment and think of ways to make the composable more reusable for other components.

Note

I've updated the answer to change "hook" to "composable" as this is the correct term.