.

static/debug_toolbar/js/history.js

@@ -7,21 +7,30 @@ $$.on(djDebug, "click", ".switchHistory", function (event) {
     const newStoreId = this.dataset.storeId;
     const tbody = this.closest("tbody");
 
-    tbody
-        .querySelector(".djdt-highlighted")
-        .classList.remove("djdt-highlighted");
+    const highlighted = tbody.querySelector(".djdt-highlighted");
+    if (highlighted) {
+        highlighted.classList.remove("djdt-highlighted");
+    }
     this.closest("tr").classList.add("djdt-highlighted");
 
     ajaxForm(this).then(function (data) {
         djDebug.setAttribute("data-store-id", newStoreId);
-        Object.keys(data).forEach(function (panelId) {
-            const panel = document.getElementById(panelId);
-            if (panel) {
-                panel.outerHTML = data[panelId].content;
-                document.getElementById("djdt-" + panelId).outerHTML =
-                    data[panelId].button;
-            }
-        });
+        // Check if response is empty, it could be due to an expired store_id.
+        if (Object.keys(data).length === 0) {
+            const container = document.getElementById("djdtHistoryRequests");
+            container.querySelector(
+                'button[data-store-id="' + newStoreId + '"]'
+            ).innerHTML = "Switch [EXPIRED]";
+        } else {
+            Object.keys(data).forEach(function (panelId) {
+                const panel = document.getElementById(panelId);
+                if (panel) {
+                    panel.outerHTML = data[panelId].content;
+                    document.getElementById("djdt-" + panelId).outerHTML =
+                        data[panelId].button;
+                }
+            });
+        }
     });
 });
 
@@ -29,12 +38,14 @@ $$.on(djDebug, "click", ".refreshHistory", function (event) {
     event.preventDefault();
     const container = document.getElementById("djdtHistoryRequests");
     ajaxForm(this).then(function (data) {
+        // Remove existing rows first then re-populate with new data
+        container
+            .querySelectorAll("tr[data-store-id]")
+            .forEach(function (node) {
+                node.remove();
+            });
         data.requests.forEach(function (request) {
-            if (
-                !container.querySelector('[data-store-id="' + request.id + '"]')
-            ) {
-                container.innerHTML = request.content + container.innerHTML;
-            }
+            container.innerHTML = request.content + container.innerHTML;
         });
     });
 });