0
334
ViewsHow to pinpoint root cause of sporadic XHR error 0 (Network Error)?
I run a SaaS, and we use LogRocket to monitor customers' screens so it's easier to troubleshoot issues when things go wrong. One issue that's been really elusive lately is an "error 0".
All that Sentry logs is "Network Error" which isn't helpful, and a 0 response from an XHR PATCH request. Here's what the API calls made from the customer's browser look like in LogRocket:
This is what I find baffling: there are previous successful calls to the API (AWS API Gateway, by the way). And when I watch the user's screen at the time of that error, there's no kind of interruption such as a page reload, or the user closing the tab, which I think are typical reasons for error 0.
This is totally sporadic. I'm looking for any advice on how to find out what's causing this, because I'm at a loss here. Thanks!
1 answers
Answer question0
If it's actually an abort that's causing this, this may help you capture it.
const trigger = document.getElementById("trigger");
const display = document.getElementById("display");
const toggle = document.getElementById("toggle");
const url = "https://api.coingecko.com/api/v3/exchanges?per_page=500";
trigger.addEventListener("click", sendRequest);
async function sendRequest() {
const controller = new AbortController();
const { signal } = controller;
let timerId;
if (toggle.checked) timerId = setTimeout(() => controller.abort(), 20);
try {
const response = await fetch(url, { signal });
console.log(response);
display.innerText = response.status;
} catch (err) {
console.log(err);
display.innerText = err;
}
if (timerId) clearTimeout(timerId);
}<button id="trigger">Start</button>
<label for="toggle">Show abort</label><input type="checkbox" id="toggle" />
<div id="display"></div>