Network request error creates non-serializable action

[ghost]

I'm using redux-toolkit which includes custom middleware that checks if Redux actions are serializable. When a RequestError occurs, it looks like redux-api-middleware creates a non-serializable Redux action, which it probably shouldn't:

A non-serializable value was detected in an action, in the path: `payload`. Value:, [RequestError: Network request failed], 
Take a look at the logic that dispatched this action: , Object {
  "error": true,
  "meta": undefined,
  "payload": [RequestError: Network request failed],
  "type": "auth/authFailure",
}, 
(See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants)
- node_modules/expo/build/logs/LogSerialization.js:166:14 in _captureConsoleStackTrace
- node_modules/expo/build/logs/LogSerialization.js:41:24 in serializeLogDataAsync
- ... 9 more stack frames from framework internals

[iamandrewluca]

Actually it will throw this warning in more cases for all this errors InvalidRSAA, RequestError, InternalError.

I think that this errors can be replaced with some raw objects. But this will imply a breaking change, because this errors a part of public API

https://github.com/agraboso/redux-api-middleware/blob/master/src/errors.js

[Goszu]

I am using redux toolkit with react native and custom fetch implementation and I've noticed something similar. It fails intermittently with the non-serializable error complaining about the provided fetch property. It is really hard to debug cause It happens like 2% of the times.

[iamandrewluca]

A solution would be to implement toJSON for each non-serializable. But then we should also take care for reviving that non-serializable?!

[alolis]

Same setup here although react-native is not the cause of the problem but the redux-toolkit serializability middleware which is enabled by default.

I am experiencing the same issue but with ApiError which is provided by redux-api-middleware and occurs on request failure type (401 HTTP status in my case).

@ghost, I know that this is bad and I prefer not to do it either, but you can disable the serialization check with the following:

import {apiMiddleware} from 'redux-api-middleware';
import {configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: rootReducer,
  middleware: [
    apiMiddleware,
    ...getDefaultMiddleware({
        serializableCheck: false
    }),
  ]
});

A better solution is probably to handle the failure type and return a plain object if you want to keep the serializable checker on:
https://www.npmjs.com/package/redux-api-middleware#failure-type-descriptors

It would be nice if by default the raw objects where returned from the errors or all of them to have a toJSON() implemented and by default to call that or via flag.

[Goszu]

I actually solved the problem. In my case it was my token refresh functionality and custom fetch attached to every action. After receiving 401 (expired token) I was getting new token and retrying all queued requests. All re-tries were getting non-serializable action warning. I simply passed my custom fetch implementation to createMiddleware() instead of passing to each action as a prop.