Auto-update History panel with JavaScript fetch requests. (#1685)

* Auto-update History panel with JavaScript fetch requests.

The fetch and XHR requests don't share internals in JavaScript. We should
automatically capture both sets of requests as they occur.

* Include XHR increment button to test both sets of auto update functionality.

Author: tim-schilling

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -261,6 +261,15 @@ const djdt = {
             document.getElementById("djDebug").dataset.sidebarUrl;
         const slowjax = debounce(ajax, 200);
 
+        function handleAjaxResponse(storeId) {
+            storeId = encodeURIComponent(storeId);
+            const dest = `${sidebar_url}?store_id=${storeId}`;
+            slowjax(dest).then(function (data) {
+                replaceToolbarState(storeId, data);
+            });
+        }
+
+        // Patch XHR / traditional AJAX requests
         const origOpen = XMLHttpRequest.prototype.open;
         XMLHttpRequest.prototype.open = function () {
             this.addEventListener("load", function () {
@@ -270,16 +279,25 @@ const djdt = {
                 if (
                     this.getAllResponseHeaders().indexOf("djdt-store-id") >= 0
                 ) {
-                    let store_id = this.getResponseHeader("djdt-store-id");
-                    store_id = encodeURIComponent(store_id);
-                    const dest = `${sidebar_url}?store_id=${store_id}`;
-                    slowjax(dest).then(function (data) {
-                        replaceToolbarState(store_id, data);
-                    });
+                    handleAjaxResponse(this.getResponseHeader("djdt-store-id"));
                 }
             });
             origOpen.apply(this, arguments);
         };
+
+        const origFetch = window.fetch;
+        window.fetch = function () {
+            const promise = origFetch.apply(this, arguments);
+            promise.then(function (response) {
+                if (response.headers.get("djdt-store-id") !== null) {
+                    handleAjaxResponse(response.headers.get("djdt-store-id"));
+                }
+                // Don't resolve the response via .json(). Instead
+                // continue to return it to allow the caller to consume as needed.
+                return response;
+            });
+            return promise;
+        };
     },
     cookie: {
         get(key) {

docs/changes.rst

@@ -4,6 +4,9 @@ Change log
 Pending
 -------
 
+* Auto-update History panel for JavaScript ``fetch`` requests.
+
+
 3.7.0 (2022-09-25)
 ------------------
 

example/templates/index.html

@@ -18,18 +18,30 @@ <h1>Index of Tests</h1>
     <p>
       <span>Value </span>
       <span id="session-value">{{ request.session.value|default:0 }}</span>
-      <button id="increment" data-url="{% url 'ajax_increment' %}" type="button">Increment</button>
+      <button id="incrementFetch" data-url="{% url 'ajax_increment' %}" type="button">Increment via fetch</button>
+      <button id="incrementXHR" data-url="{% url 'ajax_increment' %}" type="button">Increment via XHR</button>
     </p>
   <script>
-    const increment = document.querySelector("#increment");
+    const incrementFetch = document.querySelector("#incrementFetch");
+    const incrementXHR = document.querySelector("#incrementXHR");
     const value = document.querySelector("#session-value");
-    increment.addEventListener("click", function () {
-      fetch(increment.dataset.url).then( function (response) {
+    incrementFetch.addEventListener("click", function () {
+      fetch(incrementFetch.dataset.url).then( function (response) {
         response.json().then(function(data) {
           value.innerHTML = data.value;
         });
       });
     });
+    incrementXHR.addEventListener("click", function () {
+      const xhr = new XMLHttpRequest();
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+          value.innerHTML = JSON.parse(xhr.response).value;
+        }
+      }
+      xhr.open('GET', incrementXHR.dataset.url, true);
+      xhr.send('');
+    });
   </script>
   </body>
 </html>