@anyreplay/browser 0.2.1 → 0.2.3

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.
@@ -55,8 +57,8 @@ from its setup page; it loads the same code from `cdn.anyreplay.com`.
 | `createRecorder(options)` | Starts recording (or waits for consent) and returns a handle |
 | `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.identify({ userId?, email? })` | Attaches your user id to the session; held until the session's first chunk is accepted, then sent once |
+| `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 |
@@ -79,8 +81,10 @@ one-time codes; card numbers, security codes, expiry dates and cardholder names
 one); IBANs, routing numbers and sort codes; any value of 13–19 digits that
 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. At most the first six digits
-of a card number are ever recorded. Masking always happens in the page, before
+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

@@ -4198,6 +4198,39 @@ function shouldMaskValue(text, node, policy) {
   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;
@@ -4208,6 +4241,7 @@ function insideEditable(node) {
 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;
@@ -4222,14 +4256,20 @@ function maskTextChildren(node) {
     maskTextChildren(child);
   }
 }
+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" && typedCardShaped(node.textContent)) {
-    node.textContent = maskText(node.textContent);
+  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;
@@ -4237,6 +4277,9 @@ function scrubTree(node, policy, masked, editable = false) {
     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, inheritedEditable);
@@ -4255,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;
@@ -4263,15 +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), insideEditable(parent));
   }
   for (const change of (_f = data.texts) != null ? _f : []) {
-    if (typeof (change == null ? void 0 : change.value) !== "string" || !typedCardShaped(change.value)) continue;
-    if (typeof change.id === "number" && insideEditable(getNode(change.id))) change.value = maskText(change.value);
+    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);
   }
 }
 
@@ -5077,7 +5120,7 @@ var Transport = class {
 
 // src/version.ts
 var SDK_NAME = "@anyreplay/browser";
-var SDK_VERSION = true ? "0.2.1" : "0.0.0-dev";
+var SDK_VERSION = true ? "0.2.3" : "0.0.0-dev";
 var PLATFORM = "web";
 
 // src/visitor.ts
@@ -5203,7 +5246,10 @@ function createRecorder(rawOptions, shell) {
   let assets;
   let pageCount = 0;
   let pendingTraits;
-  const sendIdentity = (who, traits) => {
+  let traitsAwaitingSession;
+  let traitsToRetry;
+  let sessionDelivered = false;
+  const postIdentity = (who, traits, retryIfUnapplied) => {
     void fetch(`${options.ingestUrl}/v1/ingest/identify`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -5214,9 +5260,33 @@ function createRecorder(rawOptions, shell) {
         ...traits,
         ...options.appId ? { appId: options.appId } : {}
       })
+    }).then(async (response) => {
+      if (!retryIfUnapplied || response.status !== 202) return;
+      const reply = await response.json();
+      if (reply.applied === false && identity === who && !traitsAwaitingSession && !traitsToRetry) {
+        traitsToRetry = traits;
+      }
     }).catch(() => {
     });
   };
+  const sendIdentity = (who, traits) => {
+    traitsToRetry = void 0;
+    if (!sessionDelivered) {
+      traitsAwaitingSession = { ...traitsAwaitingSession, ...traits };
+      return;
+    }
+    postIdentity(who, traits, true);
+  };
+  const noteDelivered = (channel) => {
+    if (channel !== transport || !identity) return;
+    sessionDelivered = true;
+    const waiting = traitsAwaitingSession;
+    const retry = traitsToRetry;
+    traitsAwaitingSession = void 0;
+    traitsToRetry = void 0;
+    if (waiting) postIdentity(identity, waiting, true);
+    else if (retry) postIdentity(identity, retry, false);
+  };
   const collectMeta = (who) => {
     var _a, _b;
     return {
@@ -5325,7 +5395,15 @@ function createRecorder(rawOptions, shell) {
         initialSeq: who.nextSeq
       },
       {
-        onSeqReserved: (next) => reserveSeq(session, next),
+        onSent: () => noteDelivered(channel),
+        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();
@@ -5461,6 +5539,8 @@ function createRecorder(rawOptions, shell) {
         identity = void 0;
       }
       pendingTraits = void 0;
+      traitsAwaitingSession = void 0;
+      traitsToRetry = void 0;
       pending.length = 0;
       forgetVisitor(local, session);
     },