How to handle fetch errors?

[msawired]

Hi, I am using d3 extensively on OpenProcessing.org, and recently upgraded to v5. However, I am trying to understand how to manage the potential fetch errors, which is not much documented in the docs.
I noticed that if I add .catch(function(error){}) to d3.json, all unexpected responses (404, 403, 500...) are actually caught via catch (which is in contrast to the standard fetch API). I think it is great, but "error" only includes a text in the form of "Error: 500 Internal Server Error" at Zo (d3.v5.min.js:2) and not much else. Is there a way to get the original response object, so that I can access response.status, etc.?

Example format I am using is below:

d3.json('url')
.then(function (response) { 
        //code goes here
}).catch(function (error) {
	console.log(error);
});

[mbostock]

d3.json is a tiny wrapper around the Fetch API. If you want to deal with responses, you should just use Fetch directly. You can see the entire implementation of d3.json here:

https://github.com/d3/d3-fetch/blob/master/src/json.js

So in your example, you would say:

fetch(url).then(response => {
  if (!response.ok) {
    console.log(response);
    throw new Error("unable to fetch");
  }
  return response.json();
}).then(data => {
  …
})

Or using await:

const response = await fetch(url);
if (!response.ok) {
  console.log(response);
  throw new Error("unable to fetch");
}
const data = await response.json();

Also note that in the Promise API, you can pass two callbacks to promise.then.

If you have further questions, please use Stack Overflow tag d3.js to ask for help. Stack Overflow provides a better collaborative forum: thousands of D3-related questions have been asked there, and some answers may be relevant to you.

When asking for help, please include a link to demonstrate the issue, preferably as an Observable notebook. It is often impossible to debug from code snippets alone. Isolate the issue and reduce your code as much as possible before asking for help. The less code you post, the easier it is for someone to debug, and the more likely you are to get a helpful response.

If you have a question about D3’s behavior and want to discuss it with other users, also consider the d3-js Google Group or joining the d3-js Slack.

Thank you! 🤗