@anyreplay/browser 0.2.2 → 0.3.0

package/dist/index.d.cts

@@ -50,6 +50,12 @@ interface TransportHooks {
     onResyncNeeded?: () => void;
     /** Debug-only explanations: an event dropped, a body limit lowered. */
     onWarning?: (message: string) => void;
+    /**
+     * What the project stored for masking typed text, from an accepted chunk's
+     * answer (`maskAllInputs` in the 202). Called on every answer that carries
+     * it; an ingest from before this field never calls it.
+     */
+    onProjectMasking?: (maskAllInputs: boolean) => void;
 }
 /**
  * Ships buffered events to ingest.
@@ -340,19 +346,25 @@ interface AnyReplayOptions {
     /**
      * Mask the value of every form control.
      *
-     * Off by default: a recording shows what a visitor typed into inputs,
-     * textareas and rich-text editors, because a replay of a form nobody could
-     * finish is worth watching only if you can see what they were trying to put
-     * in it. Turn this on for a site whose forms carry anything you would not
-     * want a teammate to read, and mark individual fields with the `maskClass`
-     * when it is only some of them.
+     * On by default: what a visitor types into an input or a textarea reaches a
+     * recording as asterisks, so a replay shows a field being filled in without
+     * showing what went into it. Set `maskAllInputs: false` to record typed
+     * values instead — for a site whose forms are worth reading in a replay —
+     * and mark the fields that should stay hidden with the `maskClass`.
+     *
+     * Some fields are masked whatever this says, in every mode, `false`
+     * included: passwords, one-time codes, payment fields (card number, CVV,
+     * expiry, IBAN, routing number, sort code), anything inside an element with
+     * the mask class, and any value that looks like a card number. Email and
+     * telephone fields are not on that list — they are ordinary fields, masked
+     * by default and recorded when this is `false`. See `isSensitiveField` in
+     * `masking.ts` for the exact list.
      *
-     * Some fields are masked whatever this says, in every mode: passwords,
-     * one-time codes, payment fields (card number, CVV, expiry, IBAN, routing
-     * number, sort code), anything inside an element with the mask class, and any
-     * value that looks like a card number. Email and telephone fields are not on
-     * that list — they are ordinary fields, recorded by default and masked by this
-     * option. See `isSensitiveField` in `masking.ts` for the exact list.
+     * Left out, the project decides: the page records masked until ingest
+     * answers the first chunk with the project's stored choice (the setup
+     * page's switch), and records typed values from then on if the project
+     * chose to. Set either value here and the project's choice is not asked
+     * for. See `applyProjectMasking` in `recorder.ts` and contract §6.2.
      */
     maskAllInputs?: boolean;
     /**

package/dist/index.d.ts

@@ -50,6 +50,12 @@ interface TransportHooks {
     onResyncNeeded?: () => void;
     /** Debug-only explanations: an event dropped, a body limit lowered. */
     onWarning?: (message: string) => void;
+    /**
+     * What the project stored for masking typed text, from an accepted chunk's
+     * answer (`maskAllInputs` in the 202). Called on every answer that carries
+     * it; an ingest from before this field never calls it.
+     */
+    onProjectMasking?: (maskAllInputs: boolean) => void;
 }
 /**
  * Ships buffered events to ingest.
@@ -340,19 +346,25 @@ interface AnyReplayOptions {
     /**
      * Mask the value of every form control.
      *
-     * Off by default: a recording shows what a visitor typed into inputs,
-     * textareas and rich-text editors, because a replay of a form nobody could
-     * finish is worth watching only if you can see what they were trying to put
-     * in it. Turn this on for a site whose forms carry anything you would not
-     * want a teammate to read, and mark individual fields with the `maskClass`
-     * when it is only some of them.
+     * On by default: what a visitor types into an input or a textarea reaches a
+     * recording as asterisks, so a replay shows a field being filled in without
+     * showing what went into it. Set `maskAllInputs: false` to record typed
+     * values instead — for a site whose forms are worth reading in a replay —
+     * and mark the fields that should stay hidden with the `maskClass`.
+     *
+     * Some fields are masked whatever this says, in every mode, `false`
+     * included: passwords, one-time codes, payment fields (card number, CVV,
+     * expiry, IBAN, routing number, sort code), anything inside an element with
+     * the mask class, and any value that looks like a card number. Email and
+     * telephone fields are not on that list — they are ordinary fields, masked
+     * by default and recorded when this is `false`. See `isSensitiveField` in
+     * `masking.ts` for the exact list.
      *
-     * Some fields are masked whatever this says, in every mode: passwords,
-     * one-time codes, payment fields (card number, CVV, expiry, IBAN, routing
-     * number, sort code), anything inside an element with the mask class, and any
-     * value that looks like a card number. Email and telephone fields are not on
-     * that list — they are ordinary fields, recorded by default and masked by this
-     * option. See `isSensitiveField` in `masking.ts` for the exact list.
+     * Left out, the project decides: the page records masked until ingest
+     * answers the first chunk with the project's stored choice (the setup
+     * page's switch), and records typed values from then on if the project
+     * chose to. Set either value here and the project's choice is not asked
+     * for. See `applyProjectMasking` in `recorder.ts` and contract §6.2.
      */
     maskAllInputs?: boolean;
     /**

package/dist/index.js

@@ -3960,11 +3960,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",
@@ -4030,7 +4031,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];
@@ -4587,17 +4588,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;
@@ -4849,7 +4853,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);
@@ -4870,7 +4874,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;
@@ -4884,7 +4895,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;
@@ -4896,7 +4907,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";
     }
@@ -5071,7 +5082,7 @@ var Transport = class {
 
 // src/version.ts
 var SDK_NAME = "@anyreplay/browser";
-var SDK_VERSION = true ? "0.2.2" : "0.0.0-dev";
+var SDK_VERSION = true ? "0.3.0" : "0.0.0-dev";
 var PLATFORM = "web";
 
 // src/visitor.ts
@@ -5180,6 +5191,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;
@@ -5187,6 +5199,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";
@@ -5196,8 +5209,13 @@ function createRecorder(rawOptions, shell) {
   let diagnostics;
   let assets;
   let pageCount = 0;
+  let applyProjectMasking = () => {
+  };
   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" },
@@ -5208,9 +5226,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 {
@@ -5319,6 +5361,7 @@ function createRecorder(rawOptions, shell) {
         initialSeq: who.nextSeq
       },
       {
+        onSent: () => noteDelivered(channel),
         onSeqReserved: (next) => {
           var _a;
           reserveSeq(session, next);
@@ -5341,6 +5384,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,
@@ -5381,7 +5427,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;
@@ -5391,6 +5438,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,
@@ -5403,6 +5456,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);
@@ -5462,6 +5532,8 @@ function createRecorder(rawOptions, shell) {
         identity = void 0;
       }
       pendingTraits = void 0;
+      traitsAwaitingSession = void 0;
+      traitsToRetry = void 0;
       pending.length = 0;
       forgetVisitor(local, session);
     },