@anyreplay/browser 0.2.0 → 0.2.2

package/README.md

@@ -3,11 +3,11 @@
 Session replay recorder for the browser, made by [AnyReplay](https://anyreplay.com):
 watch any user's session, translated into your own language.
 
-- DOM-based recording (built on rrweb), not video — about 28 KB gzipped
+- DOM-based recording (built on rrweb), not video — about 35 KB gzipped
 - Records what people type; one line masks it, and passwords and payment fields never are
 - Tag moments with `track()` and see them on the player's timeline
 - Sessions survive reloads and route changes; chunked, retried, and flushed with `sendBeacon` on page close
-- Deterministic sampling per visitor, a circuit breaker, and an optional consent gate
+- Deterministic sampling per visitor, retries that wait out an outage instead of giving up, and an optional consent gate
 
 ## Install
 
@@ -25,7 +25,7 @@ const recorder = createRecorder({
   // maskAllInputs: true,          // off by default: field values are recorded
   // maskAllTyping: true,          // the stricter switch: fields and rich-text editors
   // maxSessionsPerMonth: 5000,    // optional cap for this project
-  // appId: 'com.example.shop',    // only inside an app shell (Capacitor, Electron); see below
+  // appId: 'com.example.shop',    // only inside an app shell; see below
 });
 
 recorder.track('checkout_clicked', { plan: 'growth' });
@@ -34,13 +34,15 @@ recorder.identify({ userId: 'u_42', email: 'ada@example.com' });
 
 ### Inside an app
 
-A page running inside a Capacitor, Cordova or Electron app has no real web
-origin — its web view reports `capacitor://localhost`, `https://localhost` or
-`file://` — so a project that lists allowed domains refuses it. Add the app's
+A page running inside a Capacitor, Cordova, Electron or Tauri app has no real
+web origin — its web view reports `capacitor://localhost`, `https://localhost`
+or `file://` — so a project that lists allowed domains refuses it. Add the app's
 bundle id or package name under **Allowed apps** in the project's settings,
 and pass the same value as `appId`. Leave `appId` out on a website: from a
 real web origin it is ignored, so it cannot open a web project's domain list.
-It is a filter, not a secret.
+It is a filter, not a secret. The `@anyreplay/capacitor`, `@anyreplay/cordova`,
+`@anyreplay/electron` and `@anyreplay/tauri` packages (a preview) wrap this SDK
+and read the app id for you.
 
 Every session also reports `platform: 'web'` and this package's name and
 version, so the dashboard can say what recorded it.
@@ -56,7 +58,7 @@ from its setup page; it loads the same code from `cdn.anyreplay.com`.
 | `handle.track(name, properties?)` | Tags this moment; `name` is 1–64 chars of `[A-Za-z0-9_.:-]`, properties a JSON object ≤ 4 KB |
 | `handle.trackError(error)` | Records an error you caught yourself, redacted, and marks the session as having one |
 | `handle.identify({ userId?, email? })` | Attaches your user id to the session |
-| `handle.consent(true)` | Starts recording when `requireConsent: true`; `consent(false)` keeps it off, and a later `consent(true)` still starts it |
+| `handle.consent(true)` | Starts recording when `requireConsent: true`; `consent(false)` removes what was stored and stops (before recording started, a later `consent(true)` still starts it) |
 | `handle.status()` | `idle`, `awaiting-consent`, `recording`, `sampled-out` or `stopped` |
 | `handle.flush()` | Sends what is buffered now; resolves when delivered |
 | `handle.stop()` | Stops for this page |
@@ -77,7 +79,12 @@ Some fields are masked in every mode and no option records them: passwords and
 one-time codes; card numbers, security codes, expiry dates and cardholder names
 (from `autocomplete="cc-…"` or from a name, label or placeholder that reads like
 one); IBANs, routing numbers and sort codes; any value of 13–19 digits that
-passes the card-number check. Masking always happens in the page, before
+passes the card-number check — and, because a number is typed one key at a
+time, any value that could still become one: digits only, starting 2–6,
+grouped like a card, more than six digits long. A card number written inside
+longer text ("my card is 4242 4242 …" in a note) has its digits starred and the
+rest of the text kept. At most the first six digits of a card number are ever
+recorded. Masking always happens in the page, before
 anything is sent.
 
 `type="email"` and `type="tel"` are not on that list. An address and a phone

package/dist/index.cjs

@@ -3864,10 +3864,12 @@ var AssetCollector = class {
       body: JSON.stringify(body)
     });
     const known = await post("/v1/ingest/assets/known", { projectKey, hashes: [sha256], ...app });
-    if (known.ok) {
-      const body = await known.json();
-      if (Array.isArray(body.known) && body.known.includes(sha256)) return true;
+    if (!known.ok) {
+      if (known.status === 401 || known.status === 403) this.stop();
+      return false;
     }
+    const answer = await known.json();
+    if (Array.isArray(answer.known) && answer.known.includes(sha256)) return true;
     const upload = await post("/v1/ingest/assets", { projectKey, sha256, data: toBase64(bytes), ...app });
     return upload.ok;
   }
@@ -4172,6 +4174,13 @@ function looksLikeCardNumber(text) {
   }
   return sum % 10 === 0;
 }
+function mayBecomeCardNumber(text) {
+  if (!/^[2-6][0-9 -]*$/.test(text)) return false;
+  const groups = text.split(/[ -]+/);
+  if (groups.slice(0, -1).some((group) => group.length < 4)) return false;
+  const digits = groups.join("").length;
+  return digits > 6 && digits <= 19;
+}
 function isMarkedByCustomer(node, maskClass) {
   var _a;
   let element = asElement(node);
@@ -4186,8 +4195,53 @@ function shouldMaskValue(text, node, policy) {
   if (policy.maskEveryField) return true;
   if (isSensitiveField(node)) return true;
   if (isMarkedByCustomer(node, policy.maskClass)) return true;
-  return looksLikeCardNumber(text);
+  return cardShaped(text);
+}
+var cardShaped = (text) => looksLikeCardNumber(text) || mayBecomeCardNumber(text);
+var DIGIT_RUN = /[0-9]+(?:[  -][0-9]+)*/g;
+function maskCardRuns(text) {
+  if (!/[0-9]/.test(text)) return text;
+  return text.replace(DIGIT_RUN, (run) => {
+    const groups = run.split(/[  -]/);
+    const starts = [];
+    let at = 0;
+    for (const group of groups) {
+      starts.push(at);
+      at += group.length + 1;
+    }
+    const chars2 = run.split("");
+    let i = 0;
+    while (i < groups.length) {
+      let matched = -1;
+      for (let j = groups.length - 1; j >= i; j -= 1) {
+        const end2 = starts[j] + groups[j].length;
+        if (cardShaped(run.slice(starts[i], end2).replace(/ /g, " "))) {
+          matched = j;
+          break;
+        }
+      }
+      if (matched < 0) {
+        i += 1;
+        continue;
+      }
+      const end = starts[matched] + groups[matched].length;
+      for (let k = starts[i]; k < end; k += 1) if (chars2[k] !== " " && chars2[k] !== "\xA0" && chars2[k] !== "-") chars2[k] = "*";
+      i = matched + 1;
+    }
+    return chars2.join("");
+  });
 }
+var EDITABLE = '[contenteditable]:not([contenteditable="false"])';
+function insideEditable(node) {
+  var _a;
+  const live = node;
+  const element = (live == null ? void 0 : live.nodeType) === 3 ? (_a = live.parentElement) != null ? _a : null : asElement(live);
+  return typeof (element == null ? void 0 : element.closest) === "function" && element.closest(EDITABLE) !== null;
+}
+var isEditableSerialised = (attributes) => attributes.contenteditable !== void 0 && attributes.contenteditable !== "false";
+var typedCardShaped = (text) => cardShaped(text.replace(/\u00a0/g, " ").trim());
+var maskText = (text) => text.replace(/\S/g, "*");
+var maskTyped = (text) => typedCardShaped(text) ? maskText(text) : maskCardRuns(text);
 var MUTATION = 0;
 var INPUT = 5;
 var ELEMENT_NODE = 2;
@@ -4202,23 +4256,36 @@ function maskTextChildren(node) {
     maskTextChildren(child);
   }
 }
-function scrubTree(node, policy, masked) {
+function maskCardRunsInChildren(node) {
+  var _a;
+  for (const child of (_a = node.childNodes) != null ? _a : []) {
+    if (child.type === TEXT_NODE && typeof child.textContent === "string") child.textContent = maskCardRuns(child.textContent);
+  }
+}
+function scrubTree(node, policy, masked, editable = false) {
   var _a, _b;
   if (!node) return;
   const attributes = (_a = node.attributes) != null ? _a : {};
   const inheritedMask = masked || hasClass(attributes, policy.maskClass);
+  const inheritedEditable = editable || node.type === ELEMENT_NODE && isEditableSerialised(attributes);
+  if (editable && node.type === TEXT_NODE && typeof node.textContent === "string") {
+    node.textContent = maskTyped(node.textContent);
+  }
   if (node.type === ELEMENT_NODE && node.tagName && FIELD_TAGS.has(node.tagName.toLowerCase())) {
     const value = attributes.value;
-    const shouldMask = policy.maskEveryField || inheritedMask || isSensitiveSerialised(attributes) || typeof value === "string" && looksLikeCardNumber(value);
+    const shouldMask = policy.maskEveryField || inheritedMask || isSensitiveSerialised(attributes) || typeof value === "string" && cardShaped(value);
     if (shouldMask) {
       if (typeof value === "string" && value !== "") attributes.value = maskValue(value);
       if (node.tagName.toLowerCase() === "textarea") maskTextChildren(node);
+    } else {
+      if (typeof value === "string") attributes.value = maskCardRuns(value);
+      if (node.tagName.toLowerCase() === "textarea") maskCardRunsInChildren(node);
     }
   }
-  for (const child of (_b = node.childNodes) != null ? _b : []) scrubTree(child, policy, inheritedMask);
+  for (const child of (_b = node.childNodes) != null ? _b : []) scrubTree(child, policy, inheritedMask, inheritedEditable);
 }
 function scrubEvent(event, getNode, policy) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   if (!event.data) return;
   if (event.type === 2) {
     scrubTree(event.data.node, policy, false);
@@ -4231,7 +4298,7 @@ function scrubEvent(event, getNode, policy) {
     const node = typeof data.id === "number" ? getNode(data.id) : null;
     const type = ((_b = (_a = asElement(node)) == null ? void 0 : _a.type) != null ? _b : "").toLowerCase();
     if (type === "checkbox" || type === "radio") return;
-    if (shouldMaskValue(data.text, node, policy)) data.text = maskValue(data.text);
+    data.text = shouldMaskValue(data.text, node, policy) ? maskValue(data.text) : maskCardRuns(data.text);
     return;
   }
   if (data.source !== MUTATION) return;
@@ -4239,11 +4306,15 @@ function scrubEvent(event, getNode, policy) {
     const value = (_d = entry == null ? void 0 : entry.attributes) == null ? void 0 : _d.value;
     if (typeof value !== "string" || value === "") continue;
     const node = typeof entry.id === "number" ? getNode(entry.id) : null;
-    if (shouldMaskValue(value, node, policy)) entry.attributes.value = maskValue(value);
+    entry.attributes.value = shouldMaskValue(value, node, policy) ? maskValue(value) : maskCardRuns(value);
   }
   for (const add of (_e = data.adds) != null ? _e : []) {
     const parent = typeof (add == null ? void 0 : add.parentId) === "number" ? getNode(add.parentId) : null;
-    scrubTree(add == null ? void 0 : add.node, policy, isMarkedByCustomer(parent, policy.maskClass));
+    scrubTree(add == null ? void 0 : add.node, policy, isMarkedByCustomer(parent, policy.maskClass), insideEditable(parent));
+  }
+  for (const change of (_f = data.texts) != null ? _f : []) {
+    if (typeof (change == null ? void 0 : change.value) !== "string" || !/[0-9]/.test(change.value)) continue;
+    if (typeof change.id === "number" && insideEditable(getNode(change.id))) change.value = maskTyped(change.value);
   }
 }
 
@@ -5049,7 +5120,7 @@ var Transport = class {
 
 // src/version.ts
 var SDK_NAME = "@anyreplay/browser";
-var SDK_VERSION = true ? "0.2.0" : "0.0.0-dev";
+var SDK_VERSION = true ? "0.2.2" : "0.0.0-dev";
 var PLATFORM = "web";
 
 // src/visitor.ts
@@ -5156,6 +5227,8 @@ function forgetVisitor(local, session) {
 }
 
 // src/recorder.ts
+var RRWEB_DOM_CONTENT_LOADED = 0;
+var RRWEB_LOAD = 1;
 var RAGE_CLICK_COUNT = 3;
 var RAGE_CLICK_WINDOW_MS = 1e3;
 var RAGE_CLICK_RADIUS_PX = 30;
@@ -5295,7 +5368,14 @@ function createRecorder(rawOptions, shell) {
         initialSeq: who.nextSeq
       },
       {
-        onSeqReserved: (next) => reserveSeq(session, next),
+        onSeqReserved: (next) => {
+          var _a;
+          reserveSeq(session, next);
+          try {
+            (_a = shell == null ? void 0 : shell.onStateChanged) == null ? void 0 : _a.call(shell);
+          } catch (e) {
+          }
+        },
         onStopped: (reason) => {
           status = "stopped";
           stopRecording == null ? void 0 : stopRecording();
@@ -5353,6 +5433,7 @@ function createRecorder(rawOptions, shell) {
     stopRecording = record({
       emit: (event) => {
         const typed = event;
+        if (typed.type === RRWEB_DOM_CONTENT_LOADED || typed.type === RRWEB_LOAD) return;
         scrubEvent(typed, (id) => record.mirror.getNode(id), policy);
         assets == null ? void 0 : assets.scan(typed);
         noteInteraction(typed, channel);