RTK errors lose cause (the page editor HTTP error log is broken)

[fregante]

Something (presumably RTK) is only partially serializing errors, not serialize-errors. This is an example I'm seeing in the page editor:

The error is thrown when I try to expand this, which then crashes the app because it expects cause:

The only place where we generate a RemoteServiceError has a cause:

pixiebrix-extension/src/utils/enrichAxiosErrors.ts

Line 67 in e1c4679

throw new RemoteServiceError(getErrorMessage(error), { cause: error });

Possible solution

RTK appears to expose a serializeError option but I didn't immediately find a way to implement this in our codebase.

• createAsyncThunk: serializeError option reduxjs/redux-toolkit#812
• https://redux-toolkit.js.org/api/createAsyncThunk#options

Related

Recently we've encountered errors that somehow lacked a cause property. Maybe around this time, but I'm not sure:

• High rate of un-enriched network errors  #3020

Found while looking into:

• Error improvements #3372

This worked three months ago:

• #2856 Improve ContextError display in Page Editor output panel #2860

RTK docs:

• https://redux-toolkit.js.org/api/createAsyncThunk#handling-thunk-errors

[fregante]

I bisected the cause back to this:

• #3372: Use only Error#cause, even outside ContextError #3073

I'm guessing it's because cause is ignored by RTK now since it's non-enumerable. In practice RTK never supported non-string properties:

https://github.com/reduxjs/redux-toolkit/blob/64a30d83384d77bcbc59231fa32aa2f1acd67020/packages/toolkit/src/createAsyncThunk.ts#L98

I opened an issue upstream, but I think we should still use the custom serializeError with our own serialize-error version.

• Use serialize-error module (Error#cause support) reduxjs/redux-toolkit#2392

[twschiller]

Something (presumably RTK) is only partially serializing errors, not serialize-errors. This is an example I'm seeing in the page editor:

Not sure if I'm understanding, but the network errors are serialized here:

pixiebrix-extension/src/services/api.ts

Line 97 in 37d8b1b

error: serializeError(error, { useToJSON: false }),

It's using the serializeError method from serialize-error

[twschiller]

Something (presumably RTK) is only partially serializing errors, not serialize-errors

The HTTP error log show bricks errors, which aren't calls made via RTK Query. They would be made through the background worker's proxyService method with Axios

The serialization would happen at either: 1) the messenger boundary, and/or 2) storing the error in IDB with recordLog, 3) when the log record is read from IDB and placed in the Redux Slice (which we use RTK to write)

In cases 1/2, I would imagine any non-enumerable/serialized props would get dropped. For 3, Redux puts whatever you throw at it in the Redux Store, but has middleware that will show a warning.

My hunch is it's probably No 2. not accounting for it right now.

IDB contents currently: