Introduction to JavaScript Fetch Errors
Fetch errors are a type of error commonly seen in code related to making network requests. It occurs when JavaScript code calls the Fetch Method to make an HTTP request to a remote URL, and the fetch method fails.
These errors are often dismissed as unfixable or outside the control of site developers, but this may not always be the case, and the error deserves further investigation. This article explains this error in-depth, including its potential causes and solutions.
JavaScript Fetch Error Signatures
Due to slight differences in error signatures between browsers, Noibu detects three different types of fetch errors.
JS Error: Load failed on url {URL}
JS Error: Failed to fetch on url {URL}
JS Error: Type error on url {URL}
These errors are all triggered by the same failure of the fetch method and have the same potential causes. Therefore, all variations should be investigated in the same way.
Fetch Use Cases
The fetch method is a way to make HTTP web requests to remote URLs within JavaScript code. We’ve seen fetch requests used for a wide variety of purposes on eCommerce websites, including:
- Analytics
- Customer Experience (Recommendations, Loyalty Programs, Live Chat)
- Error Reporting
- Product Data
- Social Media Integrations
- Payment Integrations
- Reviews
Regardless of purpose, these fetch requests can be grouped into two main categories of request types: first-party fetch requests and third-party fetch requests.
First-Party Fetch Requests
First-party refers to any fetch requests made by a site within its own domain. This usually involves the front end of the site requesting or updating core site data, such as product information and customer information, from the back end.
Example: The user clicks to view all desks on a furniture website and the site needs to load the product details for all of the company’s desks.
Third-Party Fetch Requests
This covers all requests made by a site to remote domains and includes most of the common use cases listed above. Almost all third-party integrations on a site need to interact with their own remote APIs to function as expected. In addition, sites themselves may also make remote requests if they have native functionality that relies on third-party APIs.
Example: The user clicks to view a specific desk and the product page opens up. On this product page, there is a third-party integration showing recommendations of similar desks, and a different integration shows several alternative payment options available for the desk.
Potential Impact of JavaScript Fetch Errors
The impact of a fetch error depends on the purpose of the fetch request. As we’ve seen, fetch requests are used in a variety of contexts, so it is essential to understand what is being requested or updated, and what impact this fetch failure would have on the site and to the user.
Causes of JavaScript Fetch Errors
Fetch errors are NOT caused by HTTP errors.
As MDN’s Fetch API Reference explains, the fetch method will not fail if it receives an HTTP error response–HTTP-404, HTTP-500, etc. The response will have its ok property set to false but will not cause the fetch request to fail.
Fetch failures occur when a communication issue between the client and server occurs and disrupts the standard send-receive HTTP process. This issue can have several causes:
Cause 1: User Network Issues
The most straightforward culprit is the user’s internet connection, and this is what most developers consider first when diagnosing a fetch error. However, we caution against this assumption.
While network issues are the most likely cause, ask yourself the following questions and use Noibu to investigate:
How often is the error occurring?
Check the error occurrence numbers. If the same fetch error occurs hundreds or thousands of times a day with consistency, there may be more at play than the user’s internet connection.
What/where/when/to whom is this error happening most often? Is there a pattern?
If the error is based on random user network issues alone, we would expect to see a random spread of occurrences in operating systems and browsers, and a variety of user circumstances that align with the average visitor demographics.
If this issue is only occurring in specific cases to a specific type of user, a coincidence seems unlikely.
Example: If the typical breakdown of visitors to your site is 60% Chrome, it would be strange for 90%+ instances of a fetch error to occur on the Safari browser.
Are there other symptoms of a faulty internet that support this theory?
In Noibu, you can access recorded videos and session data of all user sessions on this site. By examining sessions related to a fetch error, you can look for key pieces of evidence that point to a problematic internet connection:
A: ALL HTTP calls recorded in the sessions have high latency (500-1000ms+). B: Noibu has automatically tagged the session with the Slow Session insight tag. C: Multiple other fetch errors occur in the same sessions.
Cause 2: Fetch Unexpectedly Cancelled
Another cause of fetch errors is when the fetch call is initiated but the connection is unexpectedly closed before a response was received. This can be caused by:
User interaction:
If the user navigates away from a page or otherwise interacts with the site in such a way that cancels the fetch result, an error may occur. In this case, there may not be anything you can do to resolve the error. However, if the error is occurring frequently, it is worth investigating further to validate its cause.
Timeout:
By default, the fetch function has a timeout based on the browser’s default timeout. For certain browsers, such as Chrome, this can be as long as 300 seconds. However, if the code calling the fetch function has a shorter connection timeout and does not close the connection gracefully, a fetch error may occur. This is something to be cautious about, especially for third-party integration code, as the fetch requests may be artificially limited with an unexpected timeout.
Automatic page refresh/redirect:
If the site contains logic or code that causes a page to reload or the user to be redirected while one or more fetch requests are in progress, fetch errors will occur. In this case, the error is a symptom of potentially faulty or inefficient logic on the site.
Cause 3: Fetch Target Issues
In widespread fetch error situations, it can be worth further investigating the target of the fetch requests. Below are a few potential causes that can result in a fetch error:
Server Unavailable:
The fetch target server could be experiencing issues preventing a connection from being established. The server may be offline or otherwise unavailable, and therefore unable to establish a connection.
Server Security Policies:
There could be security policies preventing the server from accepting the request. For example, as outlined in this StackOverflow Discussion, if the server returns inaccurate CORS response headers, the fetch request fails with an error even though the server received and responded to the request.
DNS Lookup failure:
This is an unlikely scenario. However, it’s possible that the DNS lookup on the fetch target URL failed, which prevented it from connecting to a remote server.
Unfortunately, it isn’t possible to directly investigate fetch errors involving third-party domains. Instead, submit a request to the third-party support team to investigate the issue.
How to Investigate JavaScript Fetch Errors
Fetch Origin Code
A good starting point is to locate the line(s) of code that triggered the fetch request. On many eCommerce sites, this origin is often code within a third-party integration that functions through interactions with the third party’s own remote APIs.
Understanding how, when, and why this code calls the fetch request can provide helpful insights that can assist in your investigation.
Remote Fetch URL
Another key area to investigate is the fetch request’s target URL. This often tells you how the fetch request was being used and what effect its failure would have. If the fetch failure is on the server side, you may even discover that this remote URL is inaccessible, thus uncovering the source of the fetch error.
Detect and Resolve JavaScript Fetch Errors Efficiently with Noibu
Noibu is an eCommerce error and health monitoring platform that proactively detects all HTML and JavaScript errors on your site and flags them in real-time. From Fetch errors to Illegal Invocation to Apple Pay checkout errors, Noibu alerts your team of each and every bug causing friction in your customer experiences and potentially impacting cart abandonment.
Along with real-time alerts, Noibu provides you with all the technical details you need to efficiently resolve errors without having to spend hours replicating them. From the exact user session to the exact line of code that needs fixing, Noibu equips you with all the information you require to resolve errors in record time and boost your team’s efficiency.
To experience how Noibu could potentially work for your business and help you eliminate revenue-impacting bugs, sign up for a free checkout audit of your site to uncover all errors that could be lurking behind your digital storefront.
