perf: drain background outbox concurrently (#297)

frontend/background-issue-sync.js

@@ -96,6 +96,32 @@ function createIssueSyncStore({ transaction, indexedDB = globalThis.indexedDB, n
     });
   }
 
+  async function claimBatch(ownerLogin, limit = 70) {
+    return transact(async records => {
+      const timestamp = Number(now());
+      const eligible = (await records.getAll()).filter(candidate =>
+        candidate.recordType !== 'receipt-preference' &&
+        candidate.ownerLogin === ownerLogin &&
+        (candidate.status === 'queued' || candidate.status === 'sending') &&
+        (candidate.status !== 'sending' || Number(candidate.claimUntil) <= timestamp));
+      const lanes = {
+        issue: eligible.filter(item => (item.outboxLane || 'issue') !== 'authored'),
+        authored: eligible.filter(item => item.outboxLane === 'authored'),
+      };
+      const selected = [];
+      const maximum = Math.max(0, Number(limit) || 0);
+      while (selected.length < maximum && (lanes.issue.length || lanes.authored.length)) {
+        if (lanes.issue.length) selected.push(lanes.issue.shift());
+        if (selected.length < maximum && lanes.authored.length) selected.push(lanes.authored.shift());
+      }
+      const claimed = selected.map(item => ({
+        ...item, status: 'sending', claimUntil: timestamp + claimMs,
+      }));
+      for (const item of claimed) await records.put(item);
+      return claimed;
+    });
+  }
+
   async function claim(id, ownerLogin) {
     return transact(async records => {
       const timestamp = Number(now());
@@ -153,6 +179,7 @@ function createIssueSyncStore({ transaction, indexedDB = globalThis.indexedDB, n
     upsert,
     claim,
     claimNext,
+    claimBatch,
     complete: id => update(id, item => ({ ...item, status: 'sent', claimUntil: 0 })),
     release: id => update(id, item => ({ ...item, status: 'queued', claimUntil: 0 })),
     fail: (id, error) => update(id, item => ({ ...item, status: 'attention', claimUntil: 0, error })),
@@ -167,7 +194,10 @@ function createIssueSyncStore({ transaction, indexedDB = globalThis.indexedDB, n
   };
 }
 
-function createBackgroundIssueSync({ store, fetchJson, base = '' }) {
+function createBackgroundIssueSync({
+  store, fetchJson, base = '', maxConcurrency = 3, batchSize = 70,
+  batch = work => work(),
+}) {
   let purgeRequested = false;
   let activeFlush = null;
   function receiptFor(item, status, delivered = {}) {
@@ -272,14 +302,41 @@ function createBackgroundIssueSync({ store, fetchJson, base = '' }) {
     const receipts = [];
     let attention = 0;
     if (!login) return { confirmed, blocked: 0, attention, login, receipts };
-    while (true) {
-      const item = await store.claimNext(login);
-      if (!item) break;
-      const result = await deliver(item);
+    const collect = result => {
       if (result.issue) confirmed.push(result.issue);
       if (result.message) confirmed.push(result.message);
       if (result.attention) attention += 1;
       if (result.receipt) receipts.push(result.receipt);
+    };
+    if (store.claimBatch) {
+      const claimed = await store.claimBatch(login, batchSize);
+      let next = 0;
+      let authenticationError = null;
+      let transientError = null;
+      const worker = async () => {
+        while (!authenticationError && next < claimed.length) {
+          const item = claimed[next++];
+          try {
+            collect(await deliver(item));
+          } catch (error) {
+            if (Number(error?.status || 0) === 401) authenticationError = error;
+            else if (!transientError) transientError = error;
+          }
+        }
+      };
+      const concurrency = Math.max(1, Math.min(Number(maxConcurrency) || 1, claimed.length));
+      await Promise.all(Array.from({ length: concurrency }, worker));
+      if (authenticationError) {
+        await Promise.all(claimed.slice(next).map(item => store.release(item.id)));
+        throw authenticationError;
+      }
+      if (transientError) throw transientError;
+    } else {
+      while (true) {
+        const item = await store.claimNext(login);
+        if (!item) break;
+        collect(await deliver(item));
+      }
     }
     const blocked = store.countBlocked ? await store.countBlocked(login) : 0;
     return { confirmed, blocked, attention, login, receipts };
@@ -288,7 +345,7 @@ function createBackgroundIssueSync({ store, fetchJson, base = '' }) {
   function flush() {
     if (purgeRequested) return Promise.resolve({ confirmed: [], blocked: 0, attention: 0, login: '', receipts: [] });
     if (activeFlush) return activeFlush;
-    activeFlush = runFlush().finally(() => { activeFlush = null; });
+    activeFlush = Promise.resolve().then(() => batch(runFlush)).finally(() => { activeFlush = null; });
     return activeFlush;
   }
 

frontend/service-worker.js

@@ -1,6 +1,6 @@
 const BASE = new URL('./', self.location.href).pathname;
 importScripts(BASE + 'static/background-issue-sync.js');
-const CACHE = 'stackchain-dashboard-shell-v26';
+const CACHE = 'stackchain-dashboard-shell-v27';
 const OUTAGE_STATUSES = new Set([500, 502, 503, 504]);
 const SHELL = [
   BASE,
@@ -45,12 +45,22 @@ async function sessionCsrf() {
   return typeof payload.csrf_token === 'string' ? payload.csrf_token : '';
 }
 
+let batchedCsrf = null;
+async function withSessionCsrf(work) {
+  batchedCsrf = sessionCsrf();
+  try {
+    return await work();
+  } finally {
+    batchedCsrf = null;
+  }
+}
+
 async function fetchJson(url, options = {}) {
   const requestOptions = { ...options };
   const method = String(options.method || 'GET').toUpperCase();
   if (!['GET', 'HEAD', 'OPTIONS'].includes(method)) {
     const headers = new Headers(options.headers || {});
-    const csrf = await sessionCsrf();
+    const csrf = await (batchedCsrf || sessionCsrf());
     if (csrf) headers.set('X-CSRF-Token', csrf);
     requestOptions.headers = headers;
   }
@@ -65,7 +75,7 @@ async function fetchJson(url, options = {}) {
 }
 
 const issueSync = self.__issueSync || createBackgroundIssueSync({
-  store: createIssueSyncStore(), fetchJson, base: BASE,
+  store: createIssueSyncStore(), fetchJson, base: BASE, batch: withSessionCsrf,
 });
 
 async function flushAndNotify() {