From 41009119646712a53e0de8a904dc9e03012c05e4 Mon Sep 17 00:00:00 2001
From: Jon Ursenbach <erunion@users.noreply.github.com>
Date: Sat, 8 Feb 2020 22:10:41 -0800
Subject: [PATCH] fix: setting `x-readme-api-explorer` instead of a custom UA
 (#472)

---
 packages/api-explorer/package-lock.json |  6 +++---
 packages/api-explorer/package.json      |  2 +-
 packages/api-explorer/src/Doc.jsx       | 13 +++++++++++--
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/api-explorer/package-lock.json b/packages/api-explorer/package-lock.json
index f51608069..18b677809 100644
--- a/packages/api-explorer/package-lock.json
+++ b/packages/api-explorer/package-lock.json
@@ -4516,9 +4516,9 @@
       }
     },
     "fetch-har": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/fetch-har/-/fetch-har-2.2.0.tgz",
-      "integrity": "sha512-7QXY711Vnr4nInGqn4b+26keGHkmy0dSXTCMTGH8YzVRvLI99fHzU/yNu+9cYXruu9uK4/ASVA3IAsM6qXw7xg=="
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/fetch-har/-/fetch-har-2.2.1.tgz",
+      "integrity": "sha512-DrujvjZu0lMhL19ZlP6vaL3pOsP5V+JITGIRNDxRAPSjiQqJv2Q0y74wtn4NWYbgZSD8VVroaOunH/2LXllGAA=="
     },
     "figgy-pudding": {
       "version": "3.5.1",
diff --git a/packages/api-explorer/package.json b/packages/api-explorer/package.json
index 3a493710b..9a6d1c05e 100644
--- a/packages/api-explorer/package.json
+++ b/packages/api-explorer/package.json
@@ -10,7 +10,7 @@
     "@readme/syntax-highlighter": "^4.16.0",
     "@readme/variable": "^4.16.0",
     "classnames": "^2.2.5",
-    "fetch-har": "^2.2.0",
+    "fetch-har": "^2.2.1",
     "httpsnippet": "^1.19.1",
     "js-cookie": "^2.1.4",
     "lodash.kebabcase": "^4.1.1",
diff --git a/packages/api-explorer/src/Doc.jsx b/packages/api-explorer/src/Doc.jsx
index 6f8ef73e7..240d7374c 100644
--- a/packages/api-explorer/src/Doc.jsx
+++ b/packages/api-explorer/src/Doc.jsx
@@ -1,6 +1,6 @@
 const React = require('react');
 const PropTypes = require('prop-types');
-const fetchHar = require('fetch-har');
+const { constructRequest } = require('fetch-har');
 const extensions = require('@readme/oas-extensions');
 const markdown = require('@readme/markdown');
 const Waypoint = require('react-waypoint');
@@ -72,7 +72,16 @@ class Doc extends React.Component {
       proxyUrl: true,
     });
 
-    return fetchHar(har, `ReadMe API Explorer/${pkg.version}`).then(async res => {
+    const request = constructRequest(har);
+
+    // There's a bug in Firefox and Chrome where they don't respect setting a custom User-Agent on fetch() requests,
+    // so instead to let API metrics know that this request came from the Explorer, we're setting a vendor header
+    // instead.
+    //
+    // https://stackoverflow.com/questions/42815087/sending-a-custom-user-agent-string-along-with-my-headers-fetch
+    request.headers.append('x-readme-api-explorer', pkg.version);
+
+    return fetch(request).then(async res => {
       this.props.tryItMetrics(har, res);
 
       this.setState({