@anyreplay/browser 0.2.3 → 0.3.0

package/README.md

@@ -4,7 +4,7 @@ Session replay recorder for the browser, made by [AnyReplay](https://anyreplay.c
 watch any user's session, translated into your own language.
 
 - 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
+- Form fields are masked by default; one line records them, 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, retries that wait out an outage instead of giving up, and an optional consent gate
@@ -22,7 +22,7 @@ const recorder = createRecorder({
   projectKey: 'ar_pk_live_…',      // from your AnyReplay project
   // ingestUrl: 'https://in.anyreplay.com',  // default; set for self-hosted
   // sampleRate: 1,                // 0..1, decided per visitor
-  // maskAllInputs: true,          // off by default: field values are recorded
+  // maskAllInputs: false,         // on by default; false records what people type into fields
   // 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; see below
@@ -66,12 +66,15 @@ from its setup page; it loads the same code from `cdn.anyreplay.com`.
 
 ## Privacy
 
-A recording contains what visitors type into forms, because a replay of a form
-nobody could finish is worth watching only if you can see what they were trying
-to enter. Masking is a switch you turn on:
+By default a recording does not contain what visitors type into forms: every
+form field value becomes asterisks of the same length, so the replay shows the
+field being filled in without showing what went into it. To see what people
+typed — a form nobody could finish is easier to understand when you can read
+it — opt out:
 
-- `maskAllInputs: true` — every form field value becomes asterisks of the same length.
-- `maskAllTyping: true` — the same, plus the text of every `contenteditable` editor.
+- `maskAllInputs: false` — form field values are recorded (the fields below stay masked).
+- `maskAllInputs` left out — the project's masking switch in the dashboard decides. The page records masked until ingest answers the first chunk with that choice, and stays masked if no answer comes.
+- `maskAllTyping: true` — the stricter switch: form fields plus the text of every `contenteditable` editor, whatever `maskAllInputs` says.
 - `class="ar-mask"` — one element, or one field, masked while the rest records.
 - `class="ar-block"` — the element's contents are not recorded at all.
 
@@ -88,8 +91,9 @@ 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
-number are ordinary contact details, so they are recorded like any other field
-and masked by `maskAllInputs`, `maskAllTyping` or `class="ar-mask"`.
+number are ordinary contact details, so they follow `maskAllInputs` like any
+other field: masked by default, recorded with `maskAllInputs: false` unless
+`maskAllTyping` or `class="ar-mask"` covers them.
 
 ## License
 

package/dist/index.cjs

@@ -4009,11 +4009,12 @@ function sha256HexSync(bytes) {
 var DEFAULTS = {
   ingestUrl: "https://in.anyreplay.com",
   sampleRate: 1,
-  // Both masking switches are opt-in: a recording shows what people typed,
-  // which is the point of watching one. What that never includes is the floor
-  // in masking.ts — passwords, payment fields and the rest — which no option
-  // can switch off.
-  maskAllInputs: false,
+  // Form fields are masked unless the page opts out with `maskAllInputs:
+  // false`. Editable regions are opt-in, because masking one hides all of its
+  // text, not only what was typed. Neither option reaches the floor in
+  // masking.ts — passwords, payment fields and the rest — which no option can
+  // switch off.
+  maskAllInputs: true,
   maskAllTyping: false,
   maskClass: "ar-mask",
   blockClass: "ar-block",
@@ -4079,7 +4080,7 @@ function readSwitch(input, name) {
   const value = input[name];
   if (typeof value === "boolean") return value;
   if (value !== void 0 && typeof console !== "undefined") {
-    const consequence = name.startsWith("mask") ? "Nothing is masked by this option." : `${name.slice("record".length)} are recorded, as by default.`;
+    const consequence = name === "maskAllInputs" ? "Form fields stay masked, as by default." : name === "maskAllTyping" ? "Nothing more is masked by this option." : `${name.slice("record".length)} are recorded, as by default.`;
     console.warn(`[anyreplay] ${name} ignored: expected true or false, got ${typeof value}. ${consequence}`);
   }
   return DEFAULTS[name];
@@ -4636,17 +4637,20 @@ var BACKOFF_BASE_MS = 2e3;
 var BACKOFF_MAX_MS = 6e4;
 var MAX_RETRY_AFTER_MS = 10 * 6e4;
 var MAX_CONSECUTIVE_REFUSALS = 3;
-async function staleSeqHint(response, sent) {
+async function readReply(response) {
   try {
     if (typeof response.json !== "function") return void 0;
     const reply = await response.json();
-    if (reply.duplicate !== true) return void 0;
-    const next = reply.nextSeq;
-    return typeof next === "number" && Number.isInteger(next) && next > sent ? next : void 0;
+    return reply && typeof reply === "object" ? reply : void 0;
   } catch (e) {
     return void 0;
   }
 }
+function staleSeqHint(reply, sent) {
+  if ((reply == null ? void 0 : reply.duplicate) !== true) return void 0;
+  const next = reply.nextSeq;
+  return typeof next === "number" && Number.isInteger(next) && next > sent ? next : void 0;
+}
 function retryAfterMs(response, now = Date.now()) {
   var _a, _b;
   let raw;
@@ -4898,7 +4902,7 @@ var Transport = class {
   }
   /** One request, and what to do next. */
   async send(chunk) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const retry = chunk.attempts > 0;
     chunk.attempts += 1;
     (_b = (_a = this.hooks).onSeqReserved) == null ? void 0 : _b.call(_a, chunk.seq + 1);
@@ -4919,7 +4923,14 @@ var Transport = class {
     }
     if (this.state === "stopped" || this.pending !== chunk) return "stopped";
     if (response.ok) {
-      const nextSeq = retry ? void 0 : await staleSeqHint(response, chunk.seq);
+      const reply = await readReply(response);
+      if (typeof (reply == null ? void 0 : reply.maskAllInputs) === "boolean") {
+        try {
+          (_d = (_c = this.hooks).onProjectMasking) == null ? void 0 : _d.call(_c, reply.maskAllInputs);
+        } catch (e) {
+        }
+      }
+      const nextSeq = retry ? void 0 : staleSeqHint(reply, chunk.seq);
       if (nextSeq !== void 0 && this.staleRecoveries < MAX_STALE_RECOVERIES) {
         this.staleRecoveries += 1;
         chunk.seq = nextSeq;
@@ -4933,7 +4944,7 @@ var Transport = class {
       this.consecutiveFailures = 0;
       this.consecutiveRefusals = 0;
       this.backoffUntil = 0;
-      (_d = (_c = this.hooks).onSent) == null ? void 0 : _d.call(_c, chunk.seq, chunk.events.length);
+      (_f = (_e = this.hooks).onSent) == null ? void 0 : _f.call(_e, chunk.seq, chunk.events.length);
       return "sent";
     }
     const status = response.status;
@@ -4945,7 +4956,7 @@ var Transport = class {
         this.stop(`rejected_${status}`);
         return "stopped";
       }
-      (_f = (_e = this.hooks).onWarning) == null ? void 0 : _f.call(_e, `ingest refused a chunk (${status}); its ${chunk.events.length} events are dropped`);
+      (_h = (_g = this.hooks).onWarning) == null ? void 0 : _h.call(_g, `ingest refused a chunk (${status}); its ${chunk.events.length} events are dropped`);
       this.afterGap();
       return "again";
     }
@@ -5120,7 +5131,7 @@ var Transport = class {
 
 // src/version.ts
 var SDK_NAME = "@anyreplay/browser";
-var SDK_VERSION = true ? "0.2.3" : "0.0.0-dev";
+var SDK_VERSION = true ? "0.3.0" : "0.0.0-dev";
 var PLATFORM = "web";
 
 // src/visitor.ts
@@ -5229,6 +5240,7 @@ function forgetVisitor(local, session) {
 // src/recorder.ts
 var RRWEB_DOM_CONTENT_LOADED = 0;
 var RRWEB_LOAD = 1;
+var EVENT_FULL_SNAPSHOT3 = 2;
 var RAGE_CLICK_COUNT = 3;
 var RAGE_CLICK_WINDOW_MS = 1e3;
 var RAGE_CLICK_RADIUS_PX = 30;
@@ -5236,6 +5248,7 @@ var MAX_PENDING_EVENTS = 32;
 var EDITABLE_SELECTOR = '[contenteditable]:not([contenteditable="false"])';
 function createRecorder(rawOptions, shell) {
   const options = resolveOptions(rawOptions);
+  let awaitingProjectMasking = typeof rawOptions.maskAllInputs !== "boolean" && !options.maskAllTyping;
   const local = safeStorage(() => globalThis.localStorage);
   const session = safeStorage(() => globalThis.sessionStorage);
   let status = "idle";
@@ -5245,6 +5258,8 @@ function createRecorder(rawOptions, shell) {
   let diagnostics;
   let assets;
   let pageCount = 0;
+  let applyProjectMasking = () => {
+  };
   let pendingTraits;
   let traitsAwaitingSession;
   let traitsToRetry;
@@ -5418,6 +5433,9 @@ function createRecorder(rawOptions, shell) {
         onWarning: (message) => {
           if (options.debug) console.warn(`[anyreplay] ${message}`);
         },
+        // Out of the transport's own call stack, like a resync: restarting
+        // rrweb emits a snapshot into the channel that is answering.
+        onProjectMasking: (masked) => setTimeout(() => applyProjectMasking(channel, masked), 0),
         // Events were dropped (a long outage, or one too large to send), so
         // the DOM changes after the gap describe nodes ingest never got. A
         // fresh full snapshot starts the page over. Taken on the next turn,
@@ -5458,7 +5476,8 @@ function createRecorder(rawOptions, shell) {
       maskEveryField: options.maskAllInputs || options.maskAllTyping,
       maskClass: options.maskClass
     };
-    stopRecording = record({
+    let flushedEarly = false;
+    const capture = () => record({
       emit: (event) => {
         const typed = event;
         if (typed.type === RRWEB_DOM_CONTENT_LOADED || typed.type === RRWEB_LOAD) return;
@@ -5468,6 +5487,12 @@ function createRecorder(rawOptions, shell) {
         touchSession(session, typed.timestamp);
         channel.push(typed);
         drainPending();
+        if (awaitingProjectMasking && !flushedEarly && typed.type === EVENT_FULL_SNAPSHOT3) {
+          flushedEarly = true;
+          setTimeout(() => {
+            void channel.flush();
+          }, 0);
+        }
       },
       maskInputOptions: policy.maskEveryField ? MASK_EVERY_FIELD : MASK_SENSITIVE_FIELDS,
       maskTextClass: options.maskClass,
@@ -5480,6 +5505,23 @@ function createRecorder(rawOptions, shell) {
       recordCanvas: false,
       collectFonts: false
     });
+    applyProjectMasking = (from, masked) => {
+      if (!awaitingProjectMasking || from !== transport) return;
+      awaitingProjectMasking = false;
+      if (masked || status !== "recording" || !stopRecording) return;
+      policy.maskEveryField = false;
+      try {
+        stopRecording();
+        stopRecording = capture();
+        if (!stopRecording) throw new Error("rrweb did not start");
+      } catch (e) {
+        stopRecording = void 0;
+        from.stop("restart_failed");
+        return;
+      }
+      if (options.debug) console.warn("[anyreplay] recording typed text: the project chose to (maskAllInputs: false)");
+    };
+    stopRecording = capture();
     drainPending();
     if (pendingTraits) {
       sendIdentity(who, pendingTraits);