Error displays as an empty object

[Glinkis]

When my query function throws an error, the devtools displays it as an empty object. I would expect it to display the message and maybe stack string properties that the object contains.

If I throw a custom error with additional properties, such as status, it shows up just fine in the devtools. So it seems to only be the default error properties that are not being shown.

[tannerlinsley]

While this is important, I think it's merely a UX upgrade to the devtools rather than an issue. Closing for now (I would love to convert it to an "Idea" discussion, but for whatever reason, Github doesn't allow it for this issue, maybe because it's transfered?)

[TkDodo]

@tannerlinsley the feature is currently disabled because of some bugs - see: https://twitter.com/adamwathan/status/1347194195442851846

[felire]

@tannerlinsley This probably should be open again. The string/object or whatever that is inside of the exception that is being thrown on the service called on the query is not appearing on the error object returned by the query

[felire]

@tannerlinsley I had to throw this on the exception to make it work:

throw { asd: `${error}\n${result.originalError}` };

instead of

throw new Error('content');

If I throw the error, I am not able to access to the content

[kaueDM]

Can confirm, just run into this using axios interceptors:

Interceptor:

const testInterceptor = (error) => {
  throw new Error("Oh snap!")
}

Axios:

instance
      .request(requestParams)
      .then((response) => response.data)
      .catch((error) => Promise.reject(error))
      
 instance.interceptors.response.use((response) => response, (error) => testInterceptor(error))

isError is updated, but error is always an empty object. If I throw an object like @felire pointed out, error is updated:

const testInterceptor = (error) => {
 throw {
    error: "Oh snap!",
    code: error?.code
  }
}

[teenjuna]

@tannerlinsley shouldn't this be reopened? I'm on v3.39, and I still get {} as error from useQuery when an instance of Error is thrown inside a fetch function. As @felire has said, if you throw some custom object like {error: "some error"}, it's displayed correctly.

[TkDodo]

yeah let's reopen this and fix it for v4. We initially only used JSON.stringify to display the values, but lots of things (Error included) is not json serializable. That's why an object works, but an Error instance does not. Now, we have a custom function that serializes BigInt differently already:

https://github.com/TanStack/query/blob/1b918c2e8897e970a471624f7f075026db24e15b/packages/react-query-devtools/src/utils.ts#L117-L126

My idea would be to just use superjson here to cover all cases.

[aboqasem]

Hi @TkDodo! Could you please elaborate more on how exactly to use superjson? Replacing JSON.stringify with SuperJSON.stringify outputs:

export const displayValue = (value: unknown) => SuperJSON.stringify(value)

displayValue(new Error('my message')) // {"json":{"name":"Error","message":"my message"},"meta":{"values":["Error"]}}
displayValue(1n) // {"json":"1","meta":{"values":["bigint"]}}

[TkDodo]

Replacing JSON.stringify with SuperJSON.stringify outputs:

I think we can do:

const { json, meta } = superjson.serialize(value)

and then just ignore the meta ?

https://github.com/blitz-js/superjson#advanced-usage