Debugging Async JavaScript
Asynchronous Bugs
Async bugs are difficult because the code runs later.
This chapter shows practical ways to debug fetch(), promises,
async and await.
Note
Async debugging is about finding where the code stops.
Then you find why it stopped.
Why Async Bugs Feel Invisible
Async code often fails after your function has already returned.
This makes it feel like nothing happened.
Example
async function loadData() {
let response = await fetch("missing.json");
let data = await response.json();
console.log(data);
}
loadData();
console.log("Done");
The Done message prints even if the fetch fails later.
Rule 1: Always Handle Errors
Unhandled promise rejections confuse beginners.
Handle errors early and clearly.
Example
async function loadData() {
try {
let response = await fetch("missing.json");
let data = await response.json();
console.log(data);
} catch (error) {
console.log(error);
}
}
This catches network errors and JSON parsing errors.
Rule 2: Check response.ok
Fetch does not reject on HTTP errors like 404.
You must check response.ok.
Example
async function loadData() {
try {
let response = await fetch("missing.json");
if (!response.ok) {
console.log("HTTP Error:", response.status);
return;
}
let data = await response.json();
console.log(data);
} catch (error) {
console.log("Network error");
}
}
This separates HTTP errors from network errors.
Rule 3: Log the Right Things
Logging a promise is not the same as logging the data.
Log the response and status first.
Example
async function loadData() {
let response = await fetch("data.json");
console.log(response.status);
console.log(response.headers.get("content-type"));
}
This tells you if the server returned what you expected.
Use the Network Tab
The Network tab shows every request.
This is the fastest way to debug fetch problems.
- Check the request URL.
- Check the status code.
- Check the response body.
- Check the response content type.
Most fetch bugs are not JavaScript bugs.
They are URL and server response bugs.
Breakpoints on await
You can set breakpoints on await lines.
This lets you inspect values before and after async steps.
Example
async function loadData() {
let response = await fetch("data.json");
let data = await response.json();
console.log(data);
}
Set a breakpoint on the first await line.
Step over and inspect response.
Common Async Errors
Forgetting await is the most common beginner mistake.
Example
async function loadData() {
let response = await fetch("data.json");
let data = response.json();
console.log(data);
}
This logs a promise, not the JSON.
Example
async function loadData() {
let response = await fetch("data.json");
let data = await response.json();
console.log(data);
}
Debugging Promise Chains
Promises can fail anywhere in the chain.
Add logs between steps to find where it fails.
Example
fetch("data.json")
.then(function(response) {
console.log("Got response");
return response.json();
})
.then(function(data) {
console.log("Got data");
console.log(data);
})
.catch(function(error) {
console.log("Failed");
console.log(error);
});
This shows which step is failing.
Debugging Checklist
- Check the console for errors.
- Add
try...catcharound awaited code. - Check
response.okandresponse.status. - Use the Network tab.
- Use breakpoints on
awaitlines.
Next Chapter
Asynchronous Reference
The tutorial pages teach the concepts.
The reference pages list details and methods.
