continuing-cyan

Showing 404 error, not unexpected end of JSON input

I have the following useQuery code in a react app and I'm testing my error handling. I entered an invalid URL so this will 404, and it does in the console. rq tries again a few times but ultimately the error thrown isn't a 404 error, it's "Unexpected end of json input" How can I get it to the show the http error, not the JSON parsing error? The http error is far more useful for users to report issues.

const { data, status } = useQuery<IExampleData[]>(
  ['viewLogsMainGrid', treeNode?.text],
  () => fetch('/mock/grid/groups.jon').then(response => response.json()),
  {
    enabled: Boolean(treeNode),
    useErrorBoundary: true
  }
)

const { data, status } = useQuery<IExampleData[]>(
  ['viewLogsMainGrid', treeNode?.text],
  () => fetch('/mock/grid/groups.jon').then(response => response.json()),
  {
    enabled: Boolean(treeNode),
    useErrorBoundary: true
  }
)

7 Replies

fascinating-indigo•3y ago

fetch will not fail the promise on a 404 error, so it errors when calling response.json() if the response body has no json. That's why you get retries

fascinating-indigo•3y ago

https://tanstack.com/query/v4/docs/react/guides/query-functions#usage-with-fetch-and-other-clients-that-do-not-throw-by-default

Query Functions | TanStack Query Docs

A query function can be literally any function that returns a promise. The promise that is returned should either resolve the data or throw an error. All of the following are valid query function configurations:

continuing-cyanOP•3y ago

thanks for the info! we're actually switching our code to axios anyway so that makes sense, hopefully axios will work better.

fascinating-indigo•3y ago

I'm a fan of ky: https://github.com/sindresorhus/ky built on fetch but with an axios-like api

GitHub

GitHub - sindresorhus/ky: 🌳 Tiny & elegant JavaScript HTTP client b...

🌳 Tiny & elegant JavaScript HTTP client based on the browser Fetch API - GitHub - sindresorhus/ky: 🌳 Tiny & elegant JavaScript HTTP client based on the browser Fetch API

continuing-cyanOP•3y ago

is there a specific reason to use that over axios? we have already started using axios but we're still very early in the project

fascinating-indigo•3y ago

axios is based on xmlhttprequest while ky is based on fetch https://stackoverflow.com/questions/35549547/fetch-api-vs-xmlhttprequest

Stack Overflow

Fetch API vs XMLHttpRequest

I know that Fetch API uses Promises and both of them allow you to do AJAX requests to a server. I have read that Fetch API has some extra features, which aren't available in XMLHttpRequest (and in...

continuing-cyanOP•3y ago

ok I don't immediately see anything on that list that seems like it would matter much for this project but I'll look into this more. I'll see if I can find some more recent comparisons looks like there are a lot of reasons fetch is better, like async json parsing. ky does look like it'd be a good alternative. it's smaller than axios too. looks like it allows global headers and afterResponse hooks (aka interceptors) which is what we need

Gaming

Programming

Showing 404 error, not unexpected end of JSON input

Did you find this page helpful?