@usero/sdk 1.1.0 → 1.1.2

package/dist/plugins/user-test.js

@@ -623,12 +623,15 @@ function showMuteToast(store) {
   toast.setAttribute("role", "status");
   toast.innerHTML = `<strong>Mic off.</strong> Screen is still recording. Tap to unmute.`;
   slot.appendChild(toast);
-  window.setTimeout(() => {
+  const outer = window.setTimeout(() => {
+    if (!toast.isConnected) return;
     toast.setAttribute("data-leaving", "true");
-    window.setTimeout(() => {
-      toast.remove();
+    const inner = window.setTimeout(() => {
+      if (toast.isConnected) toast.remove();
     }, 260);
+    store.muteToastTimers.push(inner);
   }, 3e3);
+  store.muteToastTimers.push(outer);
 }
 function openNotePopover(store, onSave, onCancel) {
   const root = store.indicatorRoot;
@@ -756,6 +759,17 @@ function showThanksScreen(root, opts) {
     sent.textContent = message;
     card.appendChild(sent);
   };
+  const ERROR_CLASS = "end-error";
+  const showError = (message) => {
+    const prior = form.querySelector(`.${ERROR_CLASS}`);
+    if (prior) prior.remove();
+    const err = document.createElement("p");
+    err.className = ERROR_CLASS;
+    err.textContent = message;
+    err.setAttribute("role", "alert");
+    err.style.cssText = "margin:10px 0 0;font-size:12.5px;color:#b91c1c;text-align:center;";
+    form.appendChild(err);
+  };
   const submit = async () => {
     const text = ta.value.trim();
     ta.disabled = true;
@@ -763,10 +777,21 @@ function showThanksScreen(root, opts) {
     const submitBtn = form.querySelector("button.primary");
     if (submitBtn) submitBtn.disabled = true;
     if (text) {
-      await opts.onSubmitNote(text);
-      swapToSent("Thanks. You can close this tab.");
+      try {
+        await Promise.race([
+          Promise.resolve(opts.onSubmitNote(text)),
+          new Promise((_, reject) => {
+            window.setTimeout(() => reject(new Error("timeout")), 3e4);
+          })
+        ]);
+        swapToSent("Thanks. You can close this tab.");
+      } catch {
+        ta.disabled = false;
+        skipBtn.disabled = false;
+        if (submitBtn) submitBtn.disabled = false;
+        showError("Couldn't save your note. Try again?");
+      }
     } else {
-      opts.onSkip();
       swapToSent("All good. You can close this tab.");
     }
   };
@@ -823,6 +848,16 @@ async function finaliseSession(apiUrl, sessionId, durationSeconds, extras = {})
     }
     const trimmedEndNote = extras.endNote?.trim();
     if (trimmedEndNote) body.endNote = trimmedEndNote;
+    if (extras.notes && extras.notes.length > 0) {
+      body.notes = extras.notes.slice(0, 200).map((n) => ({
+        atMs: Math.max(0, Math.round(n.atMs)),
+        text: n.text
+      }));
+    }
+    if (extras.sdkSessionId) body.sdkSessionId = extras.sdkSessionId;
+    if (typeof extras.replayOffsetMs === "number") {
+      body.replayOffsetMs = Math.max(0, Math.round(extras.replayOffsetMs));
+    }
     const res = await fetch(`${apiUrl.replace(/\/$/, "")}/api/user-test-sessions/${encodeURIComponent(sessionId)}/finalise`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -834,7 +869,7 @@ async function finaliseSession(apiUrl, sessionId, durationSeconds, extras = {})
     return false;
   }
 }
-async function postNote(apiUrl, sessionId, atMs, text, logger) {
+async function postNoteOnce(apiUrl, sessionId, atMs, text, logger) {
   try {
     const res = await fetch(`${apiUrl.replace(/\/$/, "")}/api/user-test-sessions/${encodeURIComponent(sessionId)}/notes`, {
       method: "POST",
@@ -844,14 +879,26 @@ async function postNote(apiUrl, sessionId, atMs, text, logger) {
     });
     if (!res.ok) {
       logger.warn(`note POST rejected with ${res.status}`);
-      return false;
+      return { ok: false, transient: res.status >= 500 || res.status === 408 || res.status === 429 };
     }
-    return true;
+    let id;
+    try {
+      const json = await res.json();
+      if (typeof json.id === "string") id = json.id;
+    } catch {
+    }
+    return { ok: true, id, transient: false };
   } catch (err) {
     logger.warn("note POST failed", err);
-    return false;
+    return { ok: false, transient: true };
   }
 }
+async function postNoteWithRetry(apiUrl, sessionId, atMs, text, logger) {
+  const first = await postNoteOnce(apiUrl, sessionId, atMs, text, logger);
+  if (first.ok || !first.transient) return first;
+  await new Promise((resolve) => setTimeout(resolve, 400 + Math.floor(Math.random() * 200)));
+  return postNoteOnce(apiUrl, sessionId, atMs, text, logger);
+}
 async function flushPendingFromIdb(store, ctx) {
   if (!store.sessionId) return;
   const pending = await idbListChunks(store.sessionId);
@@ -972,7 +1019,9 @@ function stopRecording(store) {
 }
 async function finishFlow(store, ctx, opts) {
   if (store.cancelled) return;
+  if (store.finishFlowRan) return;
   if (store.indicatorState === "finishing" || store.indicatorState === "done") return;
+  store.finishFlowRan = true;
   store.indicatorState = "finishing";
   flushMuteIfActive(store);
   renderIndicatorState(store);
@@ -980,10 +1029,24 @@ async function finishFlow(store, ctx, opts) {
   await store.uploadQueue;
   await flushPendingFromIdb(store, ctx);
   const durationSeconds = (Date.now() - store.startedAt) / 1e3;
+  const replayLinkage = {};
+  const linkageSdkSessionId = ctx.getSdkSessionId ? ctx.getSdkSessionId() : void 0;
+  if (linkageSdkSessionId) replayLinkage.sdkSessionId = linkageSdkSessionId;
+  if (store.replayOffsetAtStartMs !== null) {
+    replayLinkage.replayOffsetMs = store.replayOffsetAtStartMs;
+  }
   if (store.sessionId) {
+    const unackedNotes = store.notes.filter((n) => !n.acked).map((n) => ({ atMs: n.atMs, text: n.text }));
     const ok = await finaliseSession(store.options.apiUrl, store.sessionId, durationSeconds, {
-      mutedSegments: store.mutedSegments
+      mutedSegments: store.mutedSegments,
+      notes: unackedNotes,
+      ...replayLinkage
     });
+    if (ok) {
+      for (const n of store.notes) {
+        if (!n.acked) n.acked = true;
+      }
+    }
     store.indicatorState = ok ? "done" : "error";
   } else {
     store.indicatorState = "error";
@@ -994,10 +1057,16 @@ async function finishFlow(store, ctx, opts) {
       onSubmitNote: async (text) => {
         if (!store.sessionId) return;
         store.endNote = text;
-        await finaliseSession(store.options.apiUrl, store.sessionId, durationSeconds, {
-          mutedSegments: store.mutedSegments,
-          endNote: text
+        const stillUnacked = store.notes.filter((n) => !n.acked).map((n) => ({ atMs: n.atMs, text: n.text }));
+        const ok = await finaliseSession(store.options.apiUrl, store.sessionId, durationSeconds, {
+          endNote: text,
+          notes: stillUnacked,
+          ...replayLinkage
         });
+        if (!ok) throw new Error("finalise failed");
+        for (const n of store.notes) {
+          if (!n.acked) n.acked = true;
+        }
       },
       onSkip: () => {
       }
@@ -1044,10 +1113,13 @@ function userTest(options = {}) {
         mutedSinceMs: null,
         mutedSegments: [],
         muteToastShown: false,
+        muteToastTimers: [],
         notes: [],
         notesPopoverOpen: false,
         notePopoverAtMs: null,
-        endNote: ""
+        endNote: "",
+        finishFlowRan: false,
+        replayOffsetAtStartMs: null
       };
       ctx.setStore(store);
       const onFinish = () => {
@@ -1077,11 +1149,19 @@ function userTest(options = {}) {
           store,
           (text) => {
             const atMs = store.notePopoverAtMs ?? Math.max(0, Date.now() - store.startedAt);
-            store.notes.push({ atMs, text });
+            const note = { atMs, text, acked: false };
+            store.notes.push(note);
             closeNote();
             renderNotesCount(store);
             if (store.sessionId) {
-              void postNote(store.options.apiUrl, store.sessionId, atMs, text, ctx.logger);
+              const sessionId = store.sessionId;
+              void (async () => {
+                const result = await postNoteWithRetry(store.options.apiUrl, sessionId, atMs, text, ctx.logger);
+                if (result.ok) {
+                  note.acked = true;
+                  if (result.id) note.serverId = result.id;
+                }
+              })();
             }
           },
           () => closeNote()
@@ -1134,6 +1214,8 @@ function userTest(options = {}) {
         }
         store.sessionId = created.sessionId;
         store.clientId = created.clientId;
+        const replayStartMs = ctx.getReplayStartMs ? ctx.getReplayStartMs() : null;
+        store.replayOffsetAtStartMs = replayStartMs === null ? null : Math.max(0, store.startedAt - replayStartMs);
         store.tasks = created.tasks;
         if (store.tasks.length > 0 && store.indicatorRoot && !merged.hideIndicator) {
           const bar = store.indicatorRoot.querySelector(".bar");
@@ -1164,6 +1246,13 @@ function userTest(options = {}) {
         document.removeEventListener("keydown", store.keydownHandler);
         store.keydownHandler = null;
       }
+      for (const id of store.muteToastTimers) {
+        try {
+          window.clearTimeout(id);
+        } catch {
+        }
+      }
+      store.muteToastTimers = [];
       if (store.indicator && store.indicator.parentNode) {
         store.indicator.parentNode.removeChild(store.indicator);
       }