[v3.x] How to globally catch errors from useHttp()

[max13fr]

Hello,

I would like to know how to globally catch errors when doing HTTP requests using useHttp().

Unfortunately, using router.on('networkError', ...) and router.on('httpException', ...) not working with error on useHttp(). Is that any other solution ?

In addition, it would be awesome to add same callbacks options on useHttp() & useForm() like we have on router.visit() : onHttpException and onNetworkError.

Thanks in advance

Ps : perhaps add some documentations about each Event Callbacks on router.visit() would be well because I wasn't understanding that onError doesn't catch all errors (like the most of other librairies) but only validation errors 422 (if I understood well).

[SantosVilanculos]

You can intercept requests or responses before they are handled by by using axios. Has shown in the docs.

1. add resources/js/lib/axios.ts:

import Axios, { type AxiosError } from 'axios';

const { VITE_APP_DEBUG, VITE_APP_URL } = import.meta.env

const axios = Axios.create({
    baseURL: VITE_APP_URL,
    headers: {
        Accept: 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
    },
    withCredentials: true,
    withXSRFToken: true
});

axios.interceptors.request.use(
    configuration => {
        if (VITE_APP_DEBUG) console.log('InternalAxiosRequestConfig', configuration);

        return configuration;
    },
    (error: AxiosError) => {
        if (VITE_APP_DEBUG) console.error('AxiosError', error);

        return Promise.reject(error);
    }
);

axios.interceptors.response.use(
    response => {
        if (VITE_APP_DEBUG) console.log('AxiosResponse', response);

        return response;
    },
    (error: AxiosError) => {
        if(VITE_APP_DEBUG) console.error('AxiosError', error);

        return Promise.reject(error);
    }
);

export { axios };

2. the in your resources/js/app.tsx, add:

import { axios } from '@/lib/axios'
import { axiosAdapter } from '@inertiajs/core'

createInertiaApp({
  http: axiosAdapter(axios),
  // ...
})

[max13fr]

Thanks for the solution. Currently I'm using the new implementation in v3 beta that doesn't use axios anymore so I hope an additional feature if missing.

Best regards

[SantosVilanculos]

It's already here. See my latest comment edit.

[max13fr]

Oh it's perfect thanks, I didn't think to recheck installation part of the doc