Welcome to a beginner’s tutorial on how to debug Javascript fetch. So you have just picked up AJAX, but ran into a problem with it “not working properly? How do we debug and find out what has gone wrong?
The easiest way to debug Javascript fetch is to set it to report all errors.
fetch("URL").then(res => { console.log(res); return res.text(); }).then(txt => console.log(txt)).catch(err => console.error(err));
Yep, if you do not already know – Just hit F12 in most major browsers, and that will open the developer’s console. Logging a simple error message will give you more directions on what went wrong. Read on for more details!
TLDR – QUICK SLIDES
[web_stories_embed url=”https://code-boxx.com/web-stories/javascript-debug-fetch/” title=”Javascript Debug Fetch” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]
Fullscreen Mode – Click Here
TABLE OF CONTENTS
DEBUGGING FETCH
Logging the error message is the first step. But what’s next? Let’s get into more details and examples.
DIVIDE & CONQUER
After looking at an error message, some beginners foam in the mouth and go into a “cannot be fixed” trance. There’s no need to do that. Now, fetch() essentially does an AJAX call from the user’s computer to the server. We only need to figure out the point of failure.
- Before the fetch call is even made.
- During the fetch call.
- After the fetch call.
EXAMPLE 1) ERRORS BEFORE FETCH CALL
// (A) ERROR - FUNCTION DOES NOT EXIST
notexist();
// (B) FETCH CALL
console.log("Fetch started");
fetch("notexist.txt")
.then(res => { console.log(res); return res.text(); })
.then(txt => console.log(txt))
.catch(err => console.error(err));Yep, this happens. Why is the fetch() call not working? Because it did not even start.
EXAMPLE 2) FETCH ERROR
// (A) FETCH CALL TO NON EXISTING FILE
console.log("Fetch started");
fetch("notexist.txt")
// (B) ERROR 404
.then(res => {
console.log(res.status);
return res.text();
})
// (C) TXT - 404 NOT FOUND
.then(txt => console.log(txt))
.catch(err => console.error(err));We made a fetch() call to the server now, but it is “not processing”. What is wrong with it?
- Take note of the first
.then(res => ...), this is the “raw server response”. - In this section, we can do a
console.log(res.status)to get the server HTTP response code. - Beginners commonly point to a wrong URL, ending up with a 404 not found.
- Other common response codes include 403 (forbidden, trying to access a protected file) and 500 (internal server error, something wrong on the server-side).
EXAMPLE 3) JSON PARSE ERROR
// (A) FETCH CALL TO GET JSON DATA
console.log("Fetch started");
fetch("3b-dummy.json")
// (B) SYNTAX ERROR - CANNOT PARSE JSON
.then(res => {
console.log(res);
return res.json();
// return res.text();
})
// (C) RECOMMENDED - RETURN AS TEXT & SEE THE SERVER RESPONSE
.then(data => console.log(data))
.catch(err => console.error(err));{"foo":"bar"]If you are working with JSON, don’t just stare at “JSON parse error”. Return the response as text, see for yourself what the server returned. Most of the time, it is errors such as:
- Badly formed JSON string.
- Another error message messed up the JSON response.
- Another text output messed up the JSON response.
- The server is not even responding at all.
EXAMPLE 4) POST FETCH ERRORS
// (A) FETCH CALL TO GET JSON DATA
console.log("Fetch started");
fetch("4b-dummy.json")
// (B) SYNTAX ERROR - CANNOT PARSE JSON
.then(res => {
console.log(res);
return res.json();
// return res.text();
})
// (C) RECOMMENDED - RETURN AS TEXT & SEE THE SERVER RESPONSE
.then(data => {
let sum = 123 + data.num;
console.log(sum); // WRONG - 123123, SHOULD BE 246
// let sum = 123 + +data.num; // CORRECT - PARSE INT
})
.catch(err => console.error(err));{"num":"123"}Well, I won’t call this a “fetch error” since it technically worked. But if it is not producing the result that you want, something is wrong with your processing somewhere.
DOWNLOAD & NOTES
Here is the download link to the example code, so you don’t have to copy-paste everything.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
EXTRA BITS & LINKS
That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.
LINKS & REFERENCES
- Fetch API – MDN
- HTTP Response Codes – MDN
- How To Debug Javascript – Code Boxx
INFOGRAPHIC CHEAT SHEET
THE END
Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
