Skip to main content

Javascript: Fetch Errors

  • Updated

Introduction

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 a 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.

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 thefetchmethod 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
  • Payment Integrations
  • Social Media 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

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 to the site and to the user.

Fetch Error Causes

Fetch errors are NOT caused by HTTP errors.

As MDN’s Fetch API Reference explains, the fetch method will not fail if it receives a 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:

  1. 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.

  2. 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.

  3. 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's support team to investigate the issue.

Investigation Start Points

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 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.

FAQ

Why am I seeing fetch errors on Noibu? These errors don’t appear on my site.

As you can see from our Error Sources Guide, Noibu employs several strategies to ensure that it captures as many otherwise unnoticed errors as possible. Among those are fetch exceptions which may not otherwise be surfaced, especially if the fetch function occurs in a third-party integration which does not report the failure.

Articles in this section