From: Ardis Lu <ardisglu@gmail.com>
Date: Wed, 1 May 2024 05:10:52 +0000 (-0700)
Subject: Add logic to abort stale requests
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=ddea5d4a0f1849b2e550f28619e545a6afb3993e;p=erc-1967-inspector

Add logic to abort stale requests

Requests will abort after 30 seconds or if a new lookup from the user comes in.
---

diff --git a/index.html b/index.html
index 6fabb16..22884dd 100644
--- a/index.html
+++ b/index.html
@@ -80,6 +80,8 @@
   </main>
 
   <script type="module">
+    let controller;
+
     async function slotLookup(rpc, contract) {
       const slots = {
         // ERC-1967
@@ -109,7 +111,11 @@
       const response = await fetch(rpc, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(slotPayload)
+        body: JSON.stringify(slotPayload),
+        signal: AbortSignal.any([
+          AbortSignal.timeout(30000),
+          controller.signal
+        ])
       }).then(r => r.json());
 
       const output = [];
@@ -153,7 +159,11 @@
       const response = await fetch(rpc, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(eventPayload)
+        body: JSON.stringify(eventPayload),
+        signal: AbortSignal.any([
+          AbortSignal.timeout(30000),
+          controller.signal
+        ])
       }).then(r => r.json());
 
       const output = [];
@@ -183,6 +193,8 @@
       slotOutput.innerHTML = '';
       eventOutput.innerHTML = '';
 
+      controller?.abort(); // Abort any previous in-flight requests
+      controller = new AbortController();
       slotLookup(rpc, contract).then(arr => arr.forEach(i => slotOutput.insertAdjacentHTML('beforeend', `<p>${i.id}: ${i.data}</p>`)));
       eventLookup(rpc, contract).then(arr => arr.forEach(i => eventOutput.insertAdjacentHTML('beforeend', `<p>${i.id} (block ${i.blockNumber}): ${i.data}</p>`)));
     });