Redux-devtools-extension: Displaying (new) Error objects.

[luisherranz]

I'm loving the devtools so far.

The only problem I found is that when the app catches an error and pass it to the action, devtools doesn't display that object.

With redux-saga is usually something like this:

try {
  const data = yield fetch('http://someapiurl...');
  yield put({ type: 'FETCH_SUCCEED', data });
} catch (error) {
  yield put({ type: 'FETCH_FAILED', error });
}

If I debug the app in that point, the error is fine. I can print it in the console. For example:

TypeError: Cannot read property 'something' of undefined

But in the devtools panel, the error object of that action is empty:

Is there a way the devtools can display error objects (coming from new Error)?

[zalmoxisus]

Yes, I noticed it as well. The problem is that the Error object cannot be serialized, so you should transform it into a plain object directly from your app. Like yield put({ type: 'FETCH_FAILED', error: error.message });. Or if you need all the object: yield put({ type: 'FETCH_FAILED', error: { ...error } }).

Another solution would be to specify a custom serializeAction / serializeState function.

I have in mind a solution to pass the data to the extension without serializing it via shared workers, but not sure it will work. I'll leave this issue open till get a chance to check that approach.

[luisherranz]

Ok, thanks! We'll use the workarounds until then.

[zalmoxisus]

In 2.8.4 it's possible now to serialize dates, regexes, undefined, error objects, and functions. Just set serializeState parameter to true. See the release notes for details.

[luisherranz]

Awesome, thank you!

[dorian-marchal]

Is there a way to use serializeState and serializeAction with composeWithDevTools?
Also, I don't find documentation for serializeState and serializeAction other than https://github.com/zalmoxisus/redux-devtools-extension/releases/tag/v2.8.4.

[dorian-marchal]

Found it. This option is now named serialize and can be used like that:

const composeEnhancer = composeWithDevTools({
  serialize: { replacer: (key, value) => /* newValue */ },
});
const store = createStore(reducer, composeEnhancer(applyMiddleware(/* middlewares */)));

As documented here: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#serialize