fix: setting x-readme-api-explorer instead of a custom UA (#472)

readmeio · Feb 9, 2020 · 4100911 · 4100911
1 parent fa67fdc
commit 4100911
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/packages/api-explorer/package-lock.json b/packages/api-explorer/package-lock.json
diff --git 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
@@ -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({