RTK Interceptor Query Throwing "FETCH_ERROR" with no additional information.

[steventnorris]

I am using RTKQuery with React Native and Webpack. I have an interceptor query set up that does some processing of errors and other logic prior to returning the response. In this interceptor query, I call out to a static method in a util. However, the interceptor query throws a "FETCH_ERROR" with a very non-descriptive error whenever I include my util static method code. It never actually reaches the code, but just having it in there causes it to fail. If I comment the code out, it runs fine. Then, if I uncomment it and allow it to hot-swap the code in, it still runs fine. I only ever get the error on the initial app load when a query runs.

Some things I've tested and known for certain:

• The app builds and only errors when an api call is made
• The app works flawlessly if I comment out my Util static method code
• The app works flawlessly if I comment out my Util static method code, run the app, then comment back in the code via a hot-swap
• The app fails if I leave the code uncommented on initial load. Throws the "FETCH_ERROR" on the very first api call and any subsequent calls.

I have a link here for a general idea of how I have my api setup: codesandbox

Two questions:

1. Has anyone encountered this before and what issue/solve did you find?
2. Is there a way to get a better error message from this? This is obviously a red-herring error that is giving me very little to go off of for debugging.

[phryneas]

Have you tried wrapping your util calls in try catch blocks and console.logging any errors?

[markerikson]

Out of curiosity, what is an "interceptor query"? I'm not sure I've heard that term before.

[steventnorris]

@markerikson It's basically just a wrapper around the base query for additional logic like error processing or token refresh. It's a borrowed term from other libraries I've used in the past. In the codepen I believe I named it interceptorQuery as well.

[phryneas]

I fear with the current information we won't be able to do anything, since the CodeSandbox doesn't seem to show the error.

If it were a circular reference I would think it would fail with a true crash, not a fetch error.

redux-toolkit/packages/toolkit/src/query/fetchBaseQuery.ts

Lines 280 to 292 in a10e10f

	try {
	response = await fetchFn(request)
	} catch (e) {
	return {
	error: {
	status: timedOut ? 'TIMEOUT_ERROR' : 'FETCH_ERROR',
	error: String(e),
	},
	meta,
	}
	} finally {
	if (timeoutId) clearTimeout(timeoutId)
	}

Yes, a FETCH_ERROR indicates an error during execution of fetch, so outside of RTK Query. But tbh., I don't see how external code could ever do that, so I'm grasping for straws here.

Maybe switch fetchFn out for a variant that logs more info?

[steventnorris]

@phryneas Thanks for the thoughts. This one is difficult to trace down and difficult to give you a good example for since it seems pretty tightly tied to my particular setup of code and build process. I may try swapping out the fetchBaseQuery for a custom one so I can step through a bit easier. It's odd to me as well that fetch is failing due to some outside code being included.

[phryneas]

You can swap out the fetchFn for the existing base query, I'd try that first.