global axios instance breaking with other packages that use it

[LeTamanoir]

Versions:

• @inertiajs/core version: 1.2.0
• @inertiajs/react version: 1.2.0

Describe the problem:

If I add a custom error interceptor to the global Axios instance in my project that changes the shape of the error it will break Inertia's error handling (handling of 409 Conflict etc...).

for example, the following code from @notabene/pii-sdk adds an error interceptor to the global axios instance:
https://gitlab.com/notabene/open-source/pii-sdk/-/blob/master/src/utils/create-client.ts?ref_type=heads#L42-63

I've opened an issue (https://gitlab.com/notabene/open-source/pii-sdk/-/issues/2) on their repo to ask them if they can create their own instance and not add interceptor to the global one.
But I believe this could also be done in Inertia as it also represent a security risk:
if a package is compromised and adds custom interceptor to perform malicious actions (e.g. steal credentials, etc...) inertia won't be protected and will send all of its request through it.

Steps to reproduce:

I created an example repo: https://github.com/LeTamanoir/inertia-axios-bug

I added interceptors to the global axios instance here: https://github.com/LeTamanoir/inertia-axios-bug/blob/main/resources/js/app.tsx

then you can do the following to reproduce:

• run npm run build

• open the website in your browser and open the console and network tab

• add a div in https://github.com/LeTamanoir/inertia-axios-bug/blob/5f3d9542fa521007920e4d9695666fa23718f83a/resources/js/Pages/Dashboard.tsx#L13-L14 (the file is not important, we just want to trigger a new build with new file names)

• run npm run build

• go back to the tab with the website without reloading it and click on any inertia link

normally you should see the request error with a 409 Conflict status code, which will not be handled by inertia to trigger the full page reload as the added interceptor changes the shape of the error which causes this part of the code

inertia/packages/core/src/router.ts

Lines 418 to 425 in efc3cc8

	} else if (this.isLocationVisitResponse(error.response)) {
	const locationUrl = hrefToUrl(error.response.headers['x-inertia-location'])
	const requestUrl = url
	if (requestUrl.hash && !locationUrl.hash && urlWithoutHash(requestUrl).href === locationUrl.href) {
	locationUrl.hash = requestUrl.hash
	}
	this.locationVisit(locationUrl, preserveScroll === true)
	} else if (error.response) {

to not trigger as the response key is not present on the error rejected in the custom interceptor.

To fix this I think creating a local axios instance in inertia's core package should be enough, happy to submit a fix PR if you want 🙏

[LeTamanoir]

here is an example PR: #2104

[LeTamanoir]

Hey @reinink, any chance this could be added in v2 ?
I can update the PR if you want

[pascalbaljet]

I've comment on this issue at the PR: #2104 (comment)

[pascalbaljet]

I'm closing this issue as it's not a bug, but Inertia is intentionally built this way to use the global Axios instance (see #2104).