Revert "Use fetch over XMLHttpRequest in plausible.js (#5025)"

This reverts commit de62f80.
plausible · Feb 4, 2025 · d6da6b4 · d6da6b4
1 parent b4ec09c
commit d6da6b4
Show file tree

Hide file tree

Showing 14 changed files with 30 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,7 +19,6 @@ All notable changes to this project will be documented in this file.
 - Filters appear in the search bar as ?f=is,page,/docs,/blog&f=... instead of ?filters=((is,page,(/docs,/blog)),...) for Plausible links sent on various platforms to work reliably.
 - Details modal search inputs are now case-insensitive.
 - Improved report performance in cases where site has a lot of unique pathnames
-- Plausible script now uses `fetch` with keepalive flag as default over `XMLHttpRequest`. This will ensure more reliable tracking. Reminder to use `compat` script variant if tracking Internet Explorer is required.
 
 ### Fixed
 

diff --git a/lib/plausible_web/templates/layout/_tracking.html.heex b/lib/plausible_web/templates/layout/_tracking.html.heex
@@ -5,6 +5,7 @@
       data-api={PlausibleWeb.Dogfood.api_destination()}
       data-domain={PlausibleWeb.Dogfood.domain(@conn)}
       src={PlausibleWeb.Dogfood.script_url()}
+      data-allow-fetch
     >
     </script>
     <script>

diff --git a/tracker/src/plausible.js b/tracker/src/plausible.js
@@ -11,6 +11,7 @@
   {{/if}}
   var endpoint = scriptEl.getAttribute('data-api') || defaultEndpoint(scriptEl)
   var dataDomain = scriptEl.getAttribute('data-domain')
+  var allowFetch = scriptEl.hasAttribute('data-allow-fetch')
 
   function onIgnoredEvent(eventName, reason, options) {
     if (reason) console.warn('Ignoring Event: ' + reason);
@@ -247,20 +248,8 @@
   }
 
   function sendRequest(endpoint, payload, options) {
-    {{#if compat}}
-    var request = new XMLHttpRequest();
-    request.open('POST', endpoint, true);
-    request.setRequestHeader('Content-Type', 'text/plain');
-
-    request.send(JSON.stringify(payload));
-
-    request.onreadystatechange = function() {
-      if (request.readyState === 4) {
-        options && options.callback && options.callback({status: request.status})
-      }
-    }
-    {{else}}
-    if (window.fetch) {
+    {{#if pageleave}}
+    if (allowFetch && window.fetch) {
       fetch(endpoint, {
         method: 'POST',
         headers: {
@@ -271,8 +260,23 @@
       }).then(function(response) {
         options && options.callback && options.callback({status: response.status})
       })
+
+      return
     }
     {{/if}}
+
+    var request = new XMLHttpRequest();
+    request.open('POST', endpoint, true);
+    request.setRequestHeader('Content-Type', 'text/plain');
+
+    request.send(JSON.stringify(payload));
+
+    request.onreadystatechange = function() {
+      if (request.readyState === 4) {
+        options && options.callback && options.callback({status: request.status})
+      }
+    }
+
   }
 
   var queue = (window.plausible && window.plausible.q) || []

diff --git a/tracker/test/fixtures/pageleave-hash-exclusions.html b/tracker/test/fixtures/pageleave-hash-exclusions.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Plausible Playwright tests</title>
-  <script defer data-exclude='/*#*/hash/**/ignored' src="/tracker/js/plausible.exclusions.hash.local.pageleave.js"></script>
+  <script defer data-exclude='/*#*/hash/**/ignored' src="/tracker/js/plausible.exclusions.hash.local.pageleave.js" data-allow-fetch></script>
 </head>
 
 <body>

diff --git a/tracker/test/fixtures/pageleave-hash-pageview-props.html b/tracker/test/fixtures/pageleave-hash-pageview-props.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Plausible Playwright tests</title>
-  <script id="plausible-script" defer src="/tracker/js/plausible.hash.local.pageleave.pageview-props.js"></script>
+  <script id="plausible-script" defer src="/tracker/js/plausible.hash.local.pageleave.pageview-props.js" data-allow-fetch></script>
 </head>
 
 <body>

diff --git a/tracker/test/fixtures/pageleave-hash.html b/tracker/test/fixtures/pageleave-hash.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Plausible Playwright tests</title>
-  <script defer src="/tracker/js/plausible.hash.local.pageleave.js"></script>
+  <script defer src="/tracker/js/plausible.hash.local.pageleave.js" data-allow-fetch></script>
   <script>
 
   </script>

diff --git a/tracker/test/fixtures/pageleave-manual.html b/tracker/test/fixtures/pageleave-manual.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Plausible Playwright tests</title>
-  <script defer src="/tracker/js/plausible.local.manual.pageleave.js"></script>
+  <script defer src="/tracker/js/plausible.local.manual.pageleave.js" data-allow-fetch></script>
   <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
 </head>
 

diff --git a/tracker/test/fixtures/pageleave-pageview-props.html b/tracker/test/fixtures/pageleave-pageview-props.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Plausible Playwright tests</title>
-  <script defer event-author="John" src="/tracker/js/plausible.local.pageleave.pageview-props.js"></script>
+  <script defer event-author="John" src="/tracker/js/plausible.local.pageleave.pageview-props.js" data-allow-fetch></script>
 </head>
 
 <body>

diff --git a/tracker/test/fixtures/pageleave.html b/tracker/test/fixtures/pageleave.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Plausible Playwright tests</title>
-  <script defer src="/tracker/js/plausible.local.pageleave.js"></script>
+  <script defer src="/tracker/js/plausible.local.pageleave.js" data-allow-fetch></script>
 </head>
 
 <body>

diff --git a/tracker/test/fixtures/scroll-depth-content-onscroll.html b/tracker/test/fixtures/scroll-depth-content-onscroll.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Plausible Playwright tests</title>
-  <script defer src="/tracker/js/plausible.local.pageleave.js"></script>
+  <script defer src="/tracker/js/plausible.local.pageleave.js" data-allow-fetch></script>
 </head>
 
 <body>

diff --git a/tracker/test/fixtures/scroll-depth-dynamic-content-load.html b/tracker/test/fixtures/scroll-depth-dynamic-content-load.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
-  <script defer src="/tracker/js/plausible.local.pageleave.js"></script>
+  <script defer src="/tracker/js/plausible.local.pageleave.js" data-allow-fetch></script>
 </head>
 <body>
   <br>

diff --git a/tracker/test/fixtures/scroll-depth-hash.html b/tracker/test/fixtures/scroll-depth-hash.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Plausible Playwright tests</title>
-  <script defer src="/tracker/js/plausible.hash.local.pageleave.js"></script>
+  <script defer src="/tracker/js/plausible.hash.local.pageleave.js" data-allow-fetch></script>
 </head>
 
 <body>

diff --git a/tracker/test/fixtures/scroll-depth-slow-window-load.html b/tracker/test/fixtures/scroll-depth-slow-window-load.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
-  <script defer src="/tracker/js/plausible.local.pageleave.js"></script>
+  <script defer src="/tracker/js/plausible.local.pageleave.js" data-allow-fetch></script>
 </head>
 <body>
   <a id="navigate-away" href="/manual.html">

diff --git a/tracker/test/fixtures/scroll-depth.html b/tracker/test/fixtures/scroll-depth.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script defer src="/tracker/js/plausible.local.pageleave.js"></script>
+  <script defer src="/tracker/js/plausible.local.pageleave.js" data-allow-fetch></script>
   <title>Document</title>
 </head>
 <body>