Debugging: "Failed to construct 'Request': Invalid Argument." in Edge
Tags: javascript, webdev, microsoftedge, debugging
Published: 2019-09-05 15:18:50

---
title: Debugging: "Failed to construct 'Request': Invalid Argument." in Edge
published: true
tags: javascript,webdev,microsoft edge,debugging
canonical_url: https://trackjs.com/blog/debugging-edge-failed-to-construct-request-invalid-argument/
cover_image: https://trackjs.com/assets/images/blog/2019-09-debugging-edge-failed-to-construct.png
description: "On August 28th, 2019, many TrackJS customers saw a sudden surge in errors from Microsoft Edge browsers: `Failed to construct 'Request': Invalid Argument.`"

---

Nothing changed in your code. All of a sudden, a tidal wave of errors start happening for Microsoft Edge users. What the heck happened?

On August 28th, 2019, many TrackJS customers saw a sudden surge in errors from Microsoft Edge browsers: `Failed to construct 'Request': Invalid Argument.`


The spark that set off this error was a change in the Facebook sdk. Specifically, this snippet of code from their `sdk.js`:

```javascript
fetch(url, { 
  referrerPolicy:"origin", 
  mode:"cors", 
  credentials:"include" 
});
```

In this of call to [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Syntax), facebook is passing `referrerPolicy`. However, as noted in the [compatibility table](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Browser_compatibility), the `referrerPolicy` has "No Support" on Microsoft Edge.

**“No Support” is an understatement.**

## Root Cause

`fetch` can be called with a [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) object. However, all known versions of Microsoft Edge, through 18.18975, this will throw an error if `referrerPolicy` is passed as an option.

For example, this snippet of code will throw an error in Edge:

```javascript
var req = new Request("https://example.com/", { referrerPolicy: "origin" });
```

`Failed to construct 'Request': Invalid Argument.`

The `referrerPolicy` property was added to the standard in June 2018, so it is understandable that Edge does not yet support it. However, the fact that Edge throws indicates that Microsoft’s implementation of `Request` is leaking out.

We have opened [an issue with Microsoft](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/23391036/) about this issue. However, as they will soon be [switching to the Chromium engine](https://www.zdnet.com/article/heres-microsofts-updated-roadmap-for-chromium-based-edge-features-for-the-enterprise/), we expect it to go unresolved.

## Workaround

[ReferrerPolicy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy) specifies whether the current URL will be provided on the `Referer` header for the request. [MDN has some great examples](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy#Examples) of how this will be applied.

While Facebook will need to resolve the issue on their sdk, you may still have this error in your own code. Fortunately, the most common use cases for the policy can still be achieved.


### Option #1: Don't Use `Request`

The issue only manifests itself using the `Request` object as an argument to `fetch`. You can pass the same parameters directly the `fetch`. For example,

```javascript
fetch(new Request('/', {/*options*/}))
// becomes
fetch('/', {/*options*/})
```

### Option #2: Use Default `referrerPolicy`

Simply don’t set the `referrerPolicy` for the request. This will default to the page’s policy and send along appropriate information. You will need to set the `referrerPolicy` header appropriate when serving your web pages.


### Option #3: Explicit Set Referrer

Rather than relying on the policy to decide what to send as the origin value, you can control how much information is passed along with the [`referrer`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Syntax) property.

For example, if you want to replicate the `"origin"` referrerPolicy, you can use the following code to strip path information out of the referrer by setting it to the root of your domain.

```javascript
fetch("https://example.com/", { referrer: "/" });
```

Another example, if you want to replicate the `"no-referrer"` referrerPolicy, you can remove the referrer all together by setting it to empty string.

```javascript
fetch("https://example.com/", { referrer: "" });
```

* * *

Browsers and third-parties can create errors on your website when you least expect them. [Production error monitoring from TrackJS](https://trackjs.com/) will let you know when someone breaks your site. Give it a try and let’s build a better web, together.