@sphoro/bugcatch-web-sdk 0.15.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sphoro/bugcatch-web-sdk",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "description": "Drop-in browser SDK — report bugs with console, network and environment context, without the extension.",
   "type": "module",
   "main": "dist/bugcatch.es.js",

package/src/agent-issues.js

@@ -0,0 +1,30 @@
+/**
+ * The predefined issues: questions the project's assistant can answer from the
+ * reporter's own account and close, offered in the widget as one-tap choices.
+ *
+ * The API decides the list (GET /ingest/agent-issues) — it is empty unless the
+ * project has the Sphoro Agent answering questions and a data source that can
+ * answer them. Every failure is an empty list: the tiles are a shortcut, and a
+ * widget that could not load them is still a widget that files reports.
+ *
+ * The agent ends its answer with SOLVED_QUESTION's wording; the widget draws
+ * Yes / No under it (widget.js messageHtml). Keep this pattern in step with
+ * agent-issues.ts SOLVED_QUESTION in the API and workers.
+ */
+export const SOLVED_PROMPT = /Did this answer your question\?/i;
+
+export async function fetchAgentIssues({ apiBase, apiKey, projectId }) {
+  try {
+    const res = await fetch(
+      `${apiBase}/ingest/agent-issues?projectId=${encodeURIComponent(projectId)}`,
+      { headers: { 'X-BugCatch-Key': apiKey } },
+    );
+    if (!res.ok) return [];
+    const body = await res.json();
+    return (Array.isArray(body?.issues) ? body.issues : [])
+      .filter((i) => i && typeof i.key === 'string' && typeof i.title === 'string')
+      .map((i) => ({ key: i.key, title: i.title, hint: typeof i.hint === 'string' ? i.hint : '' }));
+  } catch {
+    return [];
+  }
+}

package/src/identity.js

@@ -202,7 +202,7 @@ export const KNOWN_OPTIONS = [
   'attachments', 'maxAttachments', 'maxAttachmentBytes', 'maxRecordingMs', 'beforeSend',
   'user', 'context', 'updates', 'updateToast', 'onUpdate', 'voice', 'onCallState',
   'onIncomingCall', 'onReportSubmitted', 'onAssistantPhase', 'onError', 'debug',
-  'drafts', 'knownIssues', 'release', 'environment', 'buildId',
+  'drafts', 'knownIssues', 'agentIssues', 'release', 'environment', 'buildId',
 ];
 
 const CALLBACK_OPTIONS = [

package/src/index.js

@@ -6,7 +6,7 @@ import { mountWidget } from './widget.js';
 import { uploadAttachment, normalizeMime, REPORT_MIMES } from './capture.js';
 import {
   watchUpdates, createUpdateNotifier, fetchMyReports, fetchReport, writeToken, readToken,
-  clearToken, sendMessage, verifyFix, callKindsForProject,
+  clearToken, scopeReports, sendMessage, verifyFix, callKindsForProject,
   reportByCall, liveCallAvailable, requestLiveCall, giveUpLiveCall,
   answerIncomingCall, declineIncomingCall,
   readUnread, rememberUpdate, forgetUpdate, forgetReportUpdates, forgetAllUpdates,
@@ -19,6 +19,7 @@ import {
 import { joinLiveCall, liveCallSupported, openMicrophone } from './live-call.js';
 import { showIncomingCall } from './incoming-call.js';
 import { referenceFields } from './references.js';
+import { fetchAgentIssues } from './agent-issues.js';
 import { normalizeUser, mergeContext, checkOptions, cleanApiBase } from './identity.js';
 
 // Replaced at build time from package.json. The guard is for anyone importing
@@ -188,6 +189,9 @@ class BugCatchClient {
     if (this.config.captureConsole) this.teardown.push(installConsoleCapture(this.consoleBuffer));
     if (this.config.captureNetwork) this.teardown.push(installNetworkCapture(this.networkBuffer));
     if (this.config.captureErrors) this.teardown.push(installErrorCapture(this.consoleBuffer));
+    // Before anything reads the watch token: it is kept, and asked about, per
+    // project. See scopeReports.
+    scopeReports(this.config.projectId);
     if (this.config.widget) this.teardown.push(mountWidget(this));
 
     // Only if this browser has actually filed something. A visitor who has
@@ -206,6 +210,7 @@ class BugCatchClient {
     }
 
     this.started = true;
+    this.#sayHello();
     this.debugLog('initialised', {
       version: SDK_IDENTITY.version, apiBase: this.config.apiBase, projectId: this.config.projectId,
       user: this.config.user, context: this.context,
@@ -213,6 +218,41 @@ class BugCatchClient {
     return this;
   }
 
+  /**
+   * Tell the project this site has the SDK — once a day per browser, a few
+   * seconds after init so identify() and setContext() have had their chance.
+   *
+   * What the Web SDK settings page shows under "Installed on": which site,
+   * which version, whether identify() is wired. Nothing personal goes: the
+   * origin comes from the browser's own Origin header, and the rest is a
+   * version string and four booleans. Every failure is silent — this must
+   * never cost a page anything but one small request a day.
+   */
+  #sayHello() {
+    if (typeof window === 'undefined' || typeof fetch !== 'function') return;
+    const mark = `bugcatch:hello:${this.config.projectId}`;
+    const today = new Date().toISOString().slice(0, 10);
+    try { if (window.localStorage.getItem(mark) === today) return; } catch { /* storage blocked: say it anyway */ }
+    const timer = setTimeout(() => {
+      try { window.localStorage.setItem(mark, today); } catch { /* fine */ }
+      fetch(`${this.config.apiBase}/ingest/hello`, {
+        method: 'POST',
+        keepalive: true,
+        headers: { 'Content-Type': 'application/json', 'X-BugCatch-Key': this.config.apiKey },
+        body: JSON.stringify({
+          projectId: this.config.projectId,
+          version: SDK_IDENTITY.version,
+          identify: Boolean(this.config.user),
+          context: Boolean(this.context && Object.keys(this.context).length),
+          widget: Boolean(this.config.widget),
+          environment: this.config.environment || null,
+          release: this.config.release || null,
+        }),
+      }).catch(() => {});
+    }, 5000);
+    this.teardown.push(() => clearTimeout(timer));
+  }
+
   /**
    * Open the update stream. Idempotent — init() and a first report both reach
    * here, and a second connection would double every notification.
@@ -461,7 +501,7 @@ class BugCatchClient {
    * copies of this would drift, and the half that drifted would be the one that
    * stopped attaching the console.
    */
-  async #payload({ title, description = '', priority = 'MEDIUM', metadata = {}, media = [], references = [], context = null }) {
+  async #payload({ title, description = '', priority = 'MEDIUM', metadata = {}, media = [], references = [], context = null, issue = null }) {
     // This report's own context over the screen's, without keeping it.
     const ctx = context ? mergeContext(this.context, context, (m) => this.warn(m.replace('setContext()', 'report({ context })'))) : this.context;
     return {
@@ -502,6 +542,9 @@ class BugCatchClient {
       // description it is being sent anyway. A payload is a claim, and there is
       // no reason to make the join key one when the source text is right here.
       ...(references.length ? { references } : {}),
+      // A predefined issue the reporter picked (agentIssues()). The API keeps
+      // it only if this project offers it.
+      ...(issue ? { issue } : {}),
     };
   }
 
@@ -514,16 +557,49 @@ class BugCatchClient {
    * a project switched sign-in on, and then a signed-in reporter pressing Call
    * was told to sign in.
    */
+  /**
+   * The host's `beforeSend`, applied to anything about to leave the browser.
+   *
+   * Its own method because it was written into `report()` alone, and a
+   * reporter pressing Call files a report by another route — carrying the same
+   * console buffer, the same network buffer and the same identify() fields,
+   * past a hook whose whole purpose is to strip them. A host that set this to
+   * scrub PII was scrubbed on one button and not the other.
+   *
+   * Returns the payload to send, or false when the host cancelled.
+   */
+  #screen(payload) {
+    if (typeof this.config.beforeSend !== 'function') return payload;
+    let result;
+    try {
+      result = this.config.beforeSend(payload);
+    } catch (err) {
+      // A throwing hook is not permission to send what it was meant to clean.
+      this.warn(`beforeSend threw, so nothing was sent: ${err?.message || err}`);
+      return false;
+    }
+    if (result === false) return false;
+    return result && typeof result === 'object' ? result : payload;
+  }
+
   async #fileByCall() {
     const session = readSession(this.config.projectId);
 
+    // The same hook the form honours. Cancelling here cancels the call: there
+    // is nothing to ring about once the report has been refused.
+    const payload = this.#screen(await this.#payload({}));
+    if (payload === false) {
+      this.debugLog('call cancelled by beforeSend');
+      return { cancelled: true };
+    }
+
     let filed;
     try {
       filed = await reportByCall({
         apiBase: this.config.apiBase,
         apiKey: this.config.apiKey,
         token: session?.token,
-        payload: await this.#payload({}),
+        payload,
       });
     } catch (err) {
       // A session the server no longer recognises, dropped exactly as
@@ -763,7 +839,12 @@ class BugCatchClient {
     // Set after the await, not before: a call that never connected is not one
     // this page is on, and leaving the slot taken would block the retry.
     this.call = handle;
-    return Object.assign(handle, { bugId, callId: started.call_id, live: true, filed });
+    // Whether the workspace keeps this call. The widget says so before anybody
+    // speaks — the team's incoming card has always been told; the person
+    // placing the call was not, which is the wrong way round.
+    return Object.assign(handle, {
+      bugId, callId: started.call_id, live: true, filed, recorded: Boolean(started.recorded),
+    });
   }
 
   /**
@@ -1059,7 +1140,7 @@ class BugCatchClient {
   /** File a bug with everything captured so far. */
   async report({
     title, description = '', priority = 'MEDIUM', metadata = {}, attachments = [],
-    references = [], context = null,
+    references = [], context = null, issue = null,
   } = {}) {
     if (!this.started) throw new Error('[BugCatch] call init() first.');
     if (typeof title !== 'string' || !title.trim()) throw new Error('[BugCatch] a title is required.');
@@ -1094,13 +1175,12 @@ class BugCatchClient {
     let payload = await this.#payload({
       title: title.trim(), description: typeof description === 'string' ? description : String(description ?? ''),
       priority: String(priority).toUpperCase(), metadata, media, references: refs, context,
+      issue: typeof issue === 'string' && issue ? issue.slice(0, 32) : null,
     });
 
-    if (typeof this.config.beforeSend === 'function') {
-      const result = this.config.beforeSend(payload);
-      if (result === false) return { cancelled: true };
-      if (result && typeof result === 'object') payload = result;
-    }
+    const screened = this.#screen(payload);
+    if (screened === false) return { cancelled: true };
+    payload = screened;
 
     this.debugLog('sending report', {
       title: payload.title, user: payload.metadata?.user, context: payload.metadata?.context,
@@ -1216,6 +1296,31 @@ class BugCatchClient {
     return this.refFields;
   }
 
+  /**
+   * The questions this project's assistant can answer and close by itself —
+   * "When is my next EMI due?", "Is my KYC complete?" — for a form to offer
+   * as one-tap choices.
+   *
+   *   const issues = await BugCatch.agentIssues();
+   *   // [{ key: 'emi', title: 'When is my next EMI due?', hint: 'The date and the amount' }]
+   *   BugCatch.report({ title: issues[0].title, issue: issues[0].key });
+   *
+   * The assistant looks the reporter up (identify() makes that instant),
+   * answers from their record, and asks whether that settled it: yes resolves
+   * the report, no hands it to the team. Empty unless the project has turned
+   * this on and connected a data source that can answer. The widget calls it
+   * itself; cached for the life of the page.
+   */
+  agentIssues() {
+    if (this.agentIssueList) return this.agentIssueList;
+    this.agentIssueList = fetchAgentIssues({
+      apiBase: this.config.apiBase,
+      apiKey: this.config.apiKey,
+      projectId: this.config.projectId,
+    });
+    return this.agentIssueList;
+  }
+
   /**
    * Who this browser is signed in as on this project, from storage alone.
    *

package/src/references.js

@@ -48,6 +48,24 @@ function compile(source) {
 
 const tidy = (value) => String(value).replace(/\s+/g, ' ').trim().slice(0, MAX_VALUE_CHARS);
 
+/**
+ * The value as the customer's database stores it — the same rule as
+ * normalizeReferenceValue in bugcatch-api/src/settings/reference-extract.ts,
+ * driven by the `normalize` the API sends with each built-in field.
+ */
+export function normalizeValue(field, value) {
+  const how = field && field.normalize;
+  if (how === 'phone') {
+    const digits = value.replace(/\D/g, '');
+    if (digits.length === 10) return digits;
+    if (digits.length === 12 && digits.startsWith('91')) return digits.slice(2);
+    if (digits.length === 11 && digits.startsWith('0')) return digits.slice(1);
+    return value;
+  }
+  if (how === 'upper') return value.toUpperCase();
+  return value;
+}
+
 /** Group 1 where the pattern has one, the whole match otherwise. */
 function valueOf(match) {
   const raw = match.length > 1 && match[1] !== undefined ? match[1] : match[0];
@@ -93,10 +111,11 @@ export function matchReferences(fields, texts) {
         const hit = valueOf(match);
         if (hit && !overlaps(hit.start, hit.end)) {
           claimed.push([hit.start, hit.end]);
-          const dedupe = `${field.key}:${hit.value.toLowerCase()}`;
+          const value = normalizeValue(field, hit.value);
+          const dedupe = `${field.key}:${value.toLowerCase()}`;
           if (!seen.has(dedupe)) {
             seen.add(dedupe);
-            found.push({ key: field.key, label: field.label, value: hit.value });
+            found.push({ key: field.key, label: field.label, value });
           }
         }
       }
@@ -106,6 +125,139 @@ export function matchReferences(fields, texts) {
   return found;
 }
 
+/** Letters the match read outside its value — the label words, roughly. */
+function labelWeight(text, hit) {
+  const around = text.slice(hit.start, hit.valueStart) + text.slice(hit.valueEnd, hit.end);
+  return (around.match(/[a-z]/gi) || []).length;
+}
+
+/**
+ * Things in the text that look like an identifier nobody labelled: a UUID, a
+ * run of six or more digits, a code mixing letters and digits. Only ever used
+ * to pre-fill the question, never to skip it.
+ */
+// No lookbehind: older Safari throws on it at parse time, which here would
+// take the whole SDK down rather than one field. Boundaries are checked by hand.
+const LOOSE_ID = /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}|[A-Za-z0-9][\w-]{5,40}/gi;
+const WORDISH = /[\w-]/;
+
+/**
+ * What the reporter's text says about which record this is, sorted by how
+ * sure we can be.
+ *
+ *   found     — each value one field reads best, and the only value for that
+ *               field. Enough to send without asking.
+ *   conflicts — a value two fields read equally well (two bare UUID rules), or
+ *               a field that found two different values. Asking which is the
+ *               only honest answer; picking the first is a coin toss filed as
+ *               a fact.
+ *   loose     — ID-shaped strings no rule claimed, with the fields whose value
+ *               shape they fit. Offered as the answer when we have to ask
+ *               anyway, so the reporter confirms instead of retyping.
+ *
+ * "Reads best" is how many label letters the match consumed: `partner user id
+ * 4821` is matched by the partner rule and the plain user rule, and the one
+ * that read "partner" knows more. Two rules that read the same words tie, and
+ * a tie is a question.
+ */
+export function readReferences(fields, texts) {
+  const scannable = (fields || []).filter((f) => f && f.scan !== false && f.pattern);
+  const hits = [];
+  const loose = [];
+  const blocks = (texts || []).map((t) => (typeof t === 'string' ? t.slice(0, MAX_SCAN_CHARS) : ''));
+
+  blocks.forEach((text, block) => {
+    if (!text) return;
+    scannable.forEach((field, order) => {
+      const re = compile(field.pattern);
+      if (!re) return;
+      let match;
+      let guard = 0;
+      re.lastIndex = 0;
+      while ((match = re.exec(text)) !== null) {
+        if (++guard > MAX_MATCHES) break;
+        if (match[0] === '') { re.lastIndex += 1; continue; }
+        const hit = valueOf(match);
+        if (!hit) continue;
+        const raw = match.length > 1 && match[1] !== undefined ? match[1] : match[0];
+        const valueStart = match.index + Math.max(0, match[0].indexOf(raw));
+        const h = {
+          block, order, key: field.key, label: field.label, value: normalizeValue(field, hit.value),
+          start: hit.start, end: hit.end, valueStart, valueEnd: valueStart + raw.length,
+        };
+        h.weight = labelWeight(text, h);
+        hits.push(h);
+      }
+    });
+  });
+
+  // A hit loses to one that covers the same value and read more label.
+  const survivors = hits.filter((h) => !hits.some((o) => o !== h && o.block === h.block
+    && o.key !== h.key && o.valueStart <= h.valueStart && o.valueEnd >= h.valueEnd
+    && o.weight > h.weight));
+
+  // Group what survived by value: one value, several fields = which kind is it?
+  const byValue = new Map();
+  for (const h of survivors) {
+    const id = h.value.toLowerCase();
+    if (!byValue.has(id)) byValue.set(id, { value: h.value, keys: new Map() });
+    const entry = byValue.get(id);
+    if (!entry.keys.has(h.key)) entry.keys.set(h.key, { key: h.key, label: h.label, order: h.order });
+  }
+
+  const found = [];
+  const conflicts = [];
+  const settledKey = new Map();   // key -> values found for it
+  for (const entry of byValue.values()) {
+    const kinds = [...entry.keys.values()].sort((a, b) => a.order - b.order);
+    if (kinds.length > 1) {
+      conflicts.push({ value: entry.value, kinds: kinds.map(({ key, label }) => ({ key, label })) });
+      continue;
+    }
+    const [{ key, label }] = kinds;
+    if (!settledKey.has(key)) settledKey.set(key, []);
+    settledKey.get(key).push({ key, label, value: entry.value });
+  }
+  for (const list of settledKey.values()) {
+    if (list.length === 1) found.push(list[0]);
+    else for (const r of list) conflicts.push({ value: r.value, kinds: [{ key: r.key, label: r.label }] });
+  }
+
+  // Loose candidates: ID-shaped, untouched by any rule, and fitting at least
+  // one field's value shape. Nothing that is a URL path or an email.
+  const seen = new Set(byValue.keys());
+  blocks.forEach((text, block) => {
+    if (!text) return;
+    const taken = hits.filter((h) => h.block === block);
+    const re = new RegExp(LOOSE_ID.source, 'gi');
+    let m;
+    let guard = 0;
+    while ((m = re.exec(text)) !== null && ++guard <= MAX_MATCHES) {
+      const s = m.index;
+      const e = s + m[0].length;
+      if (taken.some((h) => s < h.end && e > h.start)) continue;
+      const before = text[s - 1] || '';
+      const after = text[e] || '';
+      if (WORDISH.test(before) || WORDISH.test(after)) continue;
+      // Part of a URL, an address or a file name, not a thing someone quoted.
+      if (before === '/' || before === '@' || after === '@' || before === '.') continue;
+      if (after === '.' && /\w/.test(text[e + 1] || '')) continue;
+      if (!/\d/.test(m[0])) continue;
+      const value = tidy(m[0]);
+      const id = value.toLowerCase();
+      if (seen.has(id)) continue;
+      const kinds = (fields || [])
+        .filter((f) => f && validateReference(f, value))
+        .map(({ key, label }) => ({ key, label }));
+      if (!kinds.length) continue;
+      seen.add(id);
+      loose.push({ value, kinds });
+    }
+  });
+
+  return { found, conflicts, loose };
+}
+
 /**
  * Whether what somebody typed into the box is the shape that field asks for.
  *
@@ -140,7 +292,7 @@ export function validateReference(field, raw) {
     const atEdge = match.index === 0 || match.index === 1;
     if (toEnd && atEdge) {
       const hit = valueOf(match);
-      if (hit) return hit.value;
+      if (hit) return normalizeValue(field, hit.value);
     }
   }
   return null;

package/src/updates.js

@@ -38,10 +38,39 @@ const BACKOFF_MS = [2000, 5000, 15000, 30000, 60000];
  */
 const STABLE_MS = 5000;
 
-/** Where the watch token lives. Storage can throw in private modes — never fatal. */
+/**
+ * The project this page's widget reports to. Set once by init().
+ *
+ * The token used to live under one key for the whole origin, and the server
+ * answered it with everything its reporter had filed across the workspace — so
+ * "Your reports" on project A listed project B's bugs, and two projects on one
+ * origin overwrote each other's token. It is now kept per project, and sent
+ * with the project so the server can narrow tokens minted before that.
+ */
+let project = null;
+
+export function scopeReports(projectId) {
+  project = projectId || null;
+}
+
+const tokenKey = () => (project ? `${TOKEN_KEY}:${project}` : TOKEN_KEY);
+
+/** `?projectId=` for the watch routes that list or open reports. */
+export function projectQuery() {
+  return project ? `?projectId=${encodeURIComponent(project)}` : '';
+}
+
+/**
+ * Where the watch token lives. Storage can throw in private modes — never fatal.
+ *
+ * Falls back to the unscoped key an older SDK wrote, so an upgrade does not
+ * lose someone's history. That token may belong to another project on this
+ * origin; the `projectId` sent with every read is what keeps it to this one.
+ */
 export function readToken() {
   try {
-    return window.localStorage?.getItem(TOKEN_KEY) || null;
+    const store = window.localStorage;
+    return store?.getItem(tokenKey()) || store?.getItem(TOKEN_KEY) || null;
   } catch {
     return null;
   }
@@ -50,12 +79,13 @@ export function readToken() {
 export function writeToken(token) {
   if (!token) return;
   try {
-    window.localStorage?.setItem(TOKEN_KEY, token);
+    window.localStorage?.setItem(tokenKey(), token);
   } catch { /* storage unavailable — updates just won't survive a reload */ }
 }
 
 export function clearToken() {
   try {
+    window.localStorage?.removeItem(tokenKey());
     window.localStorage?.removeItem(TOKEN_KEY);
   } catch { /* ignore */ }
   // Anything still waiting to be read goes with it. Unread updates are about
@@ -200,7 +230,7 @@ export async function fetchMyReports({ apiBase }) {
   const token = readToken();
   if (!token) return { reporter: null, reports: [] };
 
-  const res = await fetch(`${apiBase}/ingest/watch/reports`, {
+  const res = await fetch(`${apiBase}/ingest/watch/reports${projectQuery()}`, {
     headers: { Authorization: `Bearer ${token}` },
   });
 
@@ -226,7 +256,7 @@ export async function fetchReport({ apiBase, bugId }) {
   const token = readToken();
   if (!token) return null;
 
-  const res = await fetch(`${apiBase}/ingest/watch/reports/${encodeURIComponent(bugId)}`, {
+  const res = await fetch(`${apiBase}/ingest/watch/reports/${encodeURIComponent(bugId)}${projectQuery()}`, {
     headers: { Authorization: `Bearer ${token}` },
   });
   if (res.status === 401) {
@@ -549,7 +579,7 @@ export function watchUpdates({ apiBase, onUpdate }) {
     if (!token) throw new Error('nothing filed from this browser yet');
 
     controller = new AbortController();
-    const res = await fetch(`${apiBase}/ingest/watch/stream`, {
+    const res = await fetch(`${apiBase}/ingest/watch/stream${projectQuery()}`, {
       headers: { Authorization: `Bearer ${token}`, Accept: 'text/event-stream' },
       signal: controller.signal,
     });