@lunardinos/browser 0.2.4 → 0.2.5

package/dist/src/recorder-core.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"recorder-core.d.ts","sourceRoot":"","sources":["../../src/recorder-core.ts"],"names":[],"mappings":"AACA,OAAO,EAA8C,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAQhG,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAuBpD,UAAU,cAAc;IACtB,iCAAiC;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACtC,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oHAAoH;IACpH,kBAAkB,CAAC,EAAE,eAAe,CAAA;IACpC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AA4BD,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAA;QACV,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;IACD,OAAO,CAAC,EAAE;QACR,EAAE,EAAE,MAAM,CAAA;QACV,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,SAAS,CAAC,EAAE,OAAO,CAAA;QACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;IACD,IAAI,CAAC,EAAE;QACL,EAAE,EAAE,MAAM,CAAA;QACV,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;CACF;AAuED,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8FAA8F;IAC9F,YAAY,CAAC,EAAE,gBAAgB,CAAA;CAChC;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,KAAK,MAAM,CAAA;IAClD,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,+FAA+F;IAC/F,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IAC/C,YAAY,EAAE,MAAM,MAAM,GAAG,IAAI,CAAA;IACjC,YAAY,EAAE,MAAM,MAAM,GAAG,IAAI,CAAA;IACjC,WAAW,EAAE,MAAM,OAAO,CAAA;IAC1B,iFAAiF;IACjF,aAAa,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAClD,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAA;IAC5C,2EAA2E;IAC3E,cAAc,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;CAChD;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,cAAc,GAAG,QAAQ,CA4hBzE"}
+{"version":3,"file":"recorder-core.d.ts","sourceRoot":"","sources":["../../src/recorder-core.ts"],"names":[],"mappings":"AACA,OAAO,EAA8C,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAShG,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAuBpD,UAAU,cAAc;IACtB,iCAAiC;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACtC,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oHAAoH;IACpH,kBAAkB,CAAC,EAAE,eAAe,CAAA;IACpC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AA4BD,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAA;QACV,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;IACD,OAAO,CAAC,EAAE;QACR,EAAE,EAAE,MAAM,CAAA;QACV,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,SAAS,CAAC,EAAE,OAAO,CAAA;QACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;IACD,IAAI,CAAC,EAAE;QACL,EAAE,EAAE,MAAM,CAAA;QACV,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;CACF;AAuED,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8FAA8F;IAC9F,YAAY,CAAC,EAAE,gBAAgB,CAAA;CAChC;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,KAAK,MAAM,CAAA;IAClD,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,+FAA+F;IAC/F,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IAC/C,YAAY,EAAE,MAAM,MAAM,GAAG,IAAI,CAAA;IACjC,YAAY,EAAE,MAAM,MAAM,GAAG,IAAI,CAAA;IACjC,WAAW,EAAE,MAAM,OAAO,CAAA;IAC1B,iFAAiF;IACjF,aAAa,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAClD,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAA;IAC5C,2EAA2E;IAC3E,cAAc,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;CAChD;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,cAAc,GAAG,QAAQ,CAmjBzE"}

package/dist/src/recorder-core.js

@@ -1,6 +1,6 @@
-import record from "@lunardinos/rrweb-record";
+import record, {} from "@lunardinos/rrweb-record";
 import { createPersistence } from "./persistence";
-import { isUserActivity, SESSION_TIMEOUT_MS, sessionExpired, storedSessionUsable, } from "./session-lifecycle";
+import { isNavigation, isUserActivity, SESSION_TIMEOUT_MS, sessionExpired, storedSessionUsable, } from "./session-lifecycle";
 const DEFAULT_ENDPOINT = "https://ingest.lunardinos.com";
 /** Timestamp of the last user activity, alongside the session id in sessionStorage. */
 const SESSION_ACTIVITY_KEY = "__ld_sid_at";
@@ -142,7 +142,18 @@ export function createLunarDinosRecorder(config) {
             method: "POST",
             headers: reqHeaders,
             body,
-        }).catch(() => { });
+        })
+            .then((res) => {
+            // Fire-and-forget by design (recording must never block the page), but a
+            // failed delivery should at least be visible in devtools/error monitoring
+            // instead of vanishing — this batch's events are gone either way.
+            if (!res.ok) {
+                console.error(`lunardinos: ingest request failed with status ${res.status}`);
+            }
+        })
+            .catch(() => {
+            console.error("lunardinos: ingest request failed (network error)");
+        });
     }
     /** Send via navigator.sendBeacon — reliable during page unload, no custom headers. */
     function sendViaBeacon(json) {
@@ -186,6 +197,8 @@ export function createLunarDinosRecorder(config) {
     let lastActivityAt = 0;
     /** Set while rotating, since taking the new session's snapshot re-enters emit. */
     let rotating = false;
+    /** The page the app last reported, so a rotated session opens on it. */
+    let currentPage = {};
     // Click enrichment state
     let pendingClickContext = null;
     // Input enrichment state
@@ -259,11 +272,14 @@ export function createLunarDinosRecorder(config) {
      * End the current session and open a new one.
      *
      * Order matters: pending events belong to the session that produced them, so
-     * they go out first, and the new session opens on a full snapshot — without
-     * one it starts mid-stream against a DOM the player has never seen and can't
-     * be replayed at all.
+     * they go out first, and the new session opens on a navigation and a full
+     * snapshot — without one it starts mid-stream against a DOM the player has
+     * never seen and can't be replayed at all, and has no landing page.
+     *
+     * `snapshot: false` when a navigation triggered the rotation: its own
+     * snapshot follows and opens the new session.
      */
-    function rotateSession() {
+    function rotateSession(snapshot) {
         if (rotating)
             return;
         rotating = true;
@@ -276,11 +292,13 @@ export function createLunarDinosRecorder(config) {
             }
             lastActivityAt = Date.now();
             markActivity();
-            try {
-                record.takeFullSnapshot(true);
-            }
-            catch {
-                // Recording already stopped; the next start() will snapshot anyway.
+            if (snapshot) {
+                try {
+                    record.takeNavigationSnapshot(currentPage);
+                }
+                catch {
+                    // Recording already stopped; the next start() will snapshot anyway.
+                }
             }
         }
         finally {
@@ -336,18 +354,25 @@ export function createLunarDinosRecorder(config) {
         }
         flush();
     }
+    /** What a navigation reports about a page, with auth tokens stripped from its URL. */
+    function pageMetadata(payload) {
+        return {
+            href: redactAuthFromUrl(payload.href) ?? payload.href,
+            title: payload.title,
+            routePattern: payload.routePattern ?? undefined,
+            params: payload.params,
+            locale: resolveLocale(payload.locale),
+        };
+    }
     function emitPageEvent(payload) {
         if (!recording)
             return;
+        currentPage = pageMetadata(payload);
         try {
-            // Single Pageview event carries both DOM snapshot and route metadata
-            record.takePageviewSnapshot({
-                href: redactAuthFromUrl(payload.href) ?? payload.href,
-                title: payload.title,
-                routePattern: payload.routePattern ?? undefined,
-                params: payload.params,
+            // The navigation event, then Meta + FullSnapshot of the new page
+            record.takeNavigationSnapshot({
+                ...currentPage,
                 referrer: payload.referrer ?? externalReferrer(),
-                locale: resolveLocale(payload.locale),
             });
         }
         catch {
@@ -466,18 +491,12 @@ export function createLunarDinosRecorder(config) {
         document.addEventListener("submit", captureSubmit, true);
         window.addEventListener("error", captureError);
         window.addEventListener("unhandledrejection", captureRejection);
+        currentPage = startOpts.pageMetadata ? pageMetadata(startOpts.pageMetadata) : {};
         stopFn = record({
             ...defaultRrwebOptions,
             ...rrwebOptions,
             initialPageMetadata: startOpts.pageMetadata
-                ? {
-                    href: redactAuthFromUrl(startOpts.pageMetadata.href) ?? startOpts.pageMetadata.href,
-                    title: startOpts.pageMetadata.title,
-                    routePattern: startOpts.pageMetadata.routePattern ?? undefined,
-                    params: startOpts.pageMetadata.params,
-                    referrer: startOpts.pageMetadata.referrer ?? undefined,
-                    locale: resolveLocale(startOpts.pageMetadata.locale),
-                }
+                ? { ...currentPage, referrer: startOpts.pageMetadata.referrer ?? undefined }
                 : undefined,
             emit(event) {
                 const ev = event;
@@ -486,7 +505,7 @@ export function createLunarDinosRecorder(config) {
                 // old session before the event is recorded against it.
                 if (isUserActivity(ev) && !rotating) {
                     if (sessionExpired(lastActivityAt, Date.now()))
-                        rotateSession();
+                        rotateSession(!isNavigation(ev));
                     else
                         markActivity();
                 }
@@ -515,7 +534,7 @@ export function createLunarDinosRecorder(config) {
         if (persistence.mode === "cookieless" || isNewSession) {
             emitSessionMeta();
         }
-        // Flush immediately so the pageview snapshot (which can exceed sendBeacon's
+        // Flush immediately so the first snapshot (which can exceed sendBeacon's
         // ~64 KB limit) is delivered via regular fetch before the user navigates away.
         flush();
         intervalId = setInterval(flush, batchInterval);

package/dist/src/recorder.browser.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=recorder.browser.test.d.ts.map

package/dist/src/recorder.browser.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"recorder.browser.test.d.ts","sourceRoot":"","sources":["../../src/recorder.browser.test.ts"],"names":[],"mappings":""}

package/dist/src/recorder.browser.test.js

@@ -0,0 +1,144 @@
+import { afterAll, beforeAll, describe, expect, test } from "bun:test";
+import { chromium } from "playwright";
+import { buildRecorderBundle } from "./testing/recorder-bundle";
+/**
+ * What the recorder uploads around navigations, keyframes and session
+ * rotation, captured off the wire from the production recorder in Chromium on
+ * a fake clock.
+ *
+ * A navigation is a Custom "navigation" event followed by Meta + FullSnapshot;
+ * a keyframe is Meta + FullSnapshot alone. Keyframes are the recorder's own
+ * doing, so they must not keep an idle session alive, and a session rotated
+ * after inactivity must open on a navigation so it has a landing page.
+ */
+const PAGE = `<!DOCTYPE html><html lang="de"><head><title>App</title></head><body>
+<div id="app"><h1>Shifts</h1><button id="b">Apply</button></div>
+<script src="/recorder.js"></script></body></html>`;
+let browser;
+let bundle;
+beforeAll(async () => {
+    bundle = await buildRecorderBundle();
+    browser = await chromium.launch();
+});
+afterAll(() => browser.close());
+async function openPage() {
+    const uploads = [];
+    const page = await browser.newPage();
+    await page.route("https://app.test/**", (route) => {
+        const { pathname } = new URL(route.request().url());
+        if (pathname === "/recorder.js")
+            return route.fulfill({ contentType: "application/javascript", body: bundle });
+        return route.fulfill({ contentType: "text/html", body: PAGE });
+    });
+    await page.route("https://ingest.test/**", (route) => {
+        const req = route.request();
+        const body = new Uint8Array(req.postDataBuffer() ?? []);
+        const json = req.headers()["content-encoding"] === "gzip" ? Bun.gunzipSync(body) : body;
+        uploads.push(JSON.parse(new TextDecoder().decode(json)));
+        return route.fulfill({ status: 200, body: "{}" });
+    });
+    await page.clock.install({ time: new Date("2026-01-01T10:00:00Z") });
+    await page.goto("https://app.test/shifts?access_token=secret");
+    await page.evaluate(() => {
+        const g = globalThis;
+        g.__recorder = g.LunarDinos.createLunarDinosRecorder({
+            apiKey: "k",
+            endpoint: "https://ingest.test",
+        });
+        g.__recorder.start({
+            pageMetadata: {
+                href: location.href,
+                title: "App",
+                routePattern: "/shifts",
+                params: null,
+            },
+        });
+    });
+    await settle(page);
+    return { page, uploads };
+}
+/** Run the fake clock forward, then let the async gzip + fetch land on the real one. */
+async function settle(page, ms = 2_100) {
+    await page.clock.runFor(ms);
+    await new Promise((r) => setTimeout(r, 150));
+}
+const all = (uploads) => uploads.flatMap((u) => u.events);
+const kinds = (events) => events
+    .filter((e) => e.type !== 3 && e.type !== 0 && e.type !== 1)
+    .map((e) => (e.type === 5 ? `5:${e.data.tag}` : String(e.type)));
+describe("recorder uploads", () => {
+    test("a recording opens on a navigation with the page metadata, then Meta + FullSnapshot", async () => {
+        const { page, uploads } = await openPage();
+        const events = all(uploads);
+        expect(kinds(events).slice(0, 3)).toEqual(["5:navigation", "4", "2"]);
+        const [nav, meta] = events.filter((e) => e.type === 5 || e.type === 4);
+        expect(nav.data.payload).toMatchObject({
+            href: "https://app.test/shifts?access_token=REDACTED",
+            title: "App",
+            routePattern: "/shifts",
+            params: null,
+            locale: "de",
+        });
+        // Tokens are stripped from the snapshot's href too, not only the page view's.
+        expect(meta.data.href).toBe("https://app.test/shifts?access_token=REDACTED");
+        expect(events.map((e) => e.type)).not.toContain(7);
+        await page.close();
+    });
+    test("an SPA navigation is a navigation, then Meta + FullSnapshot", async () => {
+        const { page, uploads } = await openPage();
+        const before = all(uploads).length;
+        await page.evaluate(() => {
+            document.getElementById("app").innerHTML = "<h1>Profile</h1>";
+            globalThis.__recorder.emitPageEvent({
+                href: "https://app.test/profile",
+                title: "Profile",
+                routePattern: "/profile",
+                params: null,
+            });
+        });
+        await settle(page);
+        const events = all(uploads).slice(before);
+        expect(kinds(events)).toEqual(["5:navigation", "4", "2"]);
+        expect(events[0].data.payload.routePattern).toBe("/profile");
+        await page.close();
+    });
+    test("a periodic keyframe is Meta + FullSnapshot without a navigation", async () => {
+        const { page, uploads } = await openPage();
+        const before = all(uploads).length;
+        await settle(page, 60_000);
+        expect(kinds(all(uploads).slice(before))).toEqual(["4", "2"]);
+        await page.close();
+    });
+    test("keyframes don't keep an idle session alive; it rotates onto a navigation", async () => {
+        const { page, uploads } = await openPage();
+        const first = uploads[0].sessionId;
+        // 31 idle minutes: only keyframes are recorded meanwhile.
+        await settle(page, 31 * 60_000);
+        expect(new Set(uploads.map((u) => u.sessionId))).toEqual(new Set([first]));
+        await page.click("#b");
+        await settle(page);
+        const next = uploads.filter((u) => u.sessionId !== first);
+        expect(next.length).toBeGreaterThan(0);
+        const events = all(next);
+        // The new session has a landing page: the page the app last reported.
+        expect(kinds(events).slice(0, 3)).toEqual(["5:navigation", "4", "2"]);
+        expect(events.find((e) => e.type === 5).data.payload.routePattern).toBe("/shifts");
+        await page.close();
+    });
+    test("a navigation after the timeout opens the new session with its own snapshot only", async () => {
+        const { page, uploads } = await openPage();
+        const first = uploads[0].sessionId;
+        await settle(page, 31 * 60_000);
+        await page.evaluate(() => globalThis.__recorder.emitPageEvent({
+            href: "https://app.test/profile",
+            title: "Profile",
+            routePattern: "/profile",
+            params: null,
+        }));
+        await settle(page);
+        const events = all(uploads.filter((u) => u.sessionId !== first));
+        expect(kinds(events)).toEqual(["5:navigation", "4", "2"]);
+        expect(events[0].data.payload.routePattern).toBe("/profile");
+        await page.close();
+    });
+});

package/dist/src/session-lifecycle.d.ts

@@ -16,9 +16,16 @@ interface ActivityEvent {
     type: number;
     data?: {
         source?: number;
+        tag?: string;
     };
 }
-/** Whether this event is evidence a person is still there. */
+/** A Custom (5) event tagged "navigation": the app moved to another page. */
+export declare function isNavigation(event: ActivityEvent): boolean;
+/**
+ * Whether this event is evidence a person is still there.
+ *
+ * Keyframes (Meta + FullSnapshot) are not: the recorder takes them on a timer.
+ */
 export declare function isUserActivity(event: ActivityEvent): boolean;
 /**
  * Whether the gap since `lastActivityAt` has ended the session.

package/dist/src/session-lifecycle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"session-lifecycle.d.ts","sourceRoot":"","sources":["../../src/session-lifecycle.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAAiB,CAAA;AAoBhD,6DAA6D;AAC7D,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAC3B;AAED,8DAA8D;AAC9D,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAM5D;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAG3E;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAG1E"}
+{"version":3,"file":"session-lifecycle.d.ts","sourceRoot":"","sources":["../../src/session-lifecycle.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAAiB,CAAA;AAoBhD,6DAA6D;AAC7D,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CACzC;AAED,6EAA6E;AAC7E,wBAAgB,YAAY,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAE1D;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAM5D;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAG3E;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAG1E"}

package/dist/src/session-lifecycle.js

@@ -28,10 +28,18 @@ const USER_ACTIVITY_SOURCES = new Set([
     12, // Drag
     14, // Selection
 ]);
-/** Whether this event is evidence a person is still there. */
+/** A Custom (5) event tagged "navigation": the app moved to another page. */
+export function isNavigation(event) {
+    return event.type === 5 && event.data?.tag === "navigation";
+}
+/**
+ * Whether this event is evidence a person is still there.
+ *
+ * Keyframes (Meta + FullSnapshot) are not: the recorder takes them on a timer.
+ */
 export function isUserActivity(event) {
-    // Pageview (7) — a navigation is always a person doing something.
-    if (event.type === 7)
+    // A navigation is always a person doing something.
+    if (isNavigation(event))
         return true;
     // IncrementalSnapshot (3) — only the interaction sources count.
     if (event.type === 3)

package/dist/src/session-lifecycle.test.js

@@ -19,7 +19,15 @@ describe("isUserActivity", () => {
         expect(isUserActivity(inc(14))).toBe(true); // selection
     });
     test("a navigation is always activity", () => {
-        expect(isUserActivity({ type: 7 })).toBe(true);
+        expect(isUserActivity({ type: 5, data: { tag: "navigation" } })).toBe(true);
+    });
+    test("a keyframe is not activity", () => {
+        // The periodic Meta + FullSnapshot is the recorder's doing, not a person's.
+        expect(isUserActivity({ type: 4 })).toBe(false);
+        expect(isUserActivity({ type: 2 })).toBe(false);
+    });
+    test("other custom events are not activity", () => {
+        expect(isUserActivity({ type: 5, data: { tag: "session:meta" } })).toBe(false);
     });
     test("does NOT count DOM mutations", () => {
         // The whole point: a polling or animating page emits these forever with

package/dist/src/testing/measure-bytes.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=measure-bytes.d.ts.map

package/dist/src/testing/measure-bytes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"measure-bytes.d.ts","sourceRoot":"","sources":["../../../src/testing/measure-bytes.ts"],"names":[],"mappings":""}

package/dist/src/testing/measure-bytes.js

@@ -0,0 +1,151 @@
+/**
+ * Measure what the recorder uploads per minute of an active user.
+ *
+ *   bun packages/browser/src/testing/measure-bytes.ts [--minutes 5] [--seed 1]
+ *
+ * Runs the production recorder (`createLunarDinosRecorder`) in real Chromium on
+ * a fake clock, against an app-like page: a shift list with cards and avatars,
+ * a detail view and a form, switched by SPA navigations the way the framework
+ * SDKs report them. The user is active the whole time — mouse, scroll, clicks,
+ * typing, a navigation every 20 s. Every upload is intercepted and counted as it
+ * goes over the wire (gzip where the recorder compresses).
+ *
+ * The page is synthetic, so the absolute number is a baseline, not a forecast:
+ * compare runs of this script before and after a recorder change.
+ */
+import { chromium } from "playwright";
+import { buildRecorderBundle } from "./recorder-bundle";
+const args = process.argv.slice(2);
+const opt = (n, d) => {
+    const i = args.indexOf(`--${n}`);
+    return i === -1 ? d : args[i + 1];
+};
+const minutes = Number(opt("minutes", "5"));
+const seed = Number(opt("seed", "1"));
+const CSS = `
+body { font-family: system-ui, sans-serif; margin: 0; color: #222; background: #fafafa; }
+header { display: flex; gap: 16px; padding: 12px 24px; background: #1e1e2e; color: #fff; }
+header a { color: inherit; text-decoration: none; }
+main { padding: 24px; max-width: 960px; margin: 0 auto; }
+.card { display: flex; gap: 12px; align-items: center; padding: 12px; margin: 8px 0; background: #fff; border: 1px solid #ddd; border-radius: 8px; }
+.card img { width: 32px; height: 32px; border-radius: 50%; }
+.card .title { font-weight: 600; }
+.card .meta { color: #666; font-size: 13px; }
+.badge { padding: 2px 8px; border-radius: 999px; background: #e0f2e9; color: #14532d; font-size: 12px; }
+form label { display: block; margin: 12px 0 4px; }
+form input, form textarea, form select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 6px; }
+button { padding: 8px 16px; border-radius: 6px; border: 0; background: #4f46e5; color: #fff; }
+`;
+// An avatar of the kind an app serves: same-origin, so the recorder inlines it.
+const AVATAR = `<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><rect width="256" height="256" fill="#89b4fa"/><circle cx="128" cy="100" r="48" fill="#fff"/><rect x="48" y="170" width="160" height="80" rx="40" fill="#fff"/></svg>`;
+const HTML = `<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><title>Schichten</title><style>${CSS}</style></head>
+<body><header><a href="#" data-route="/shifts">Schichten</a><a href="#" data-route="/profile">Profil</a><span id="clock"></span></header>
+<main id="app"></main>
+<script src="/recorder.js"></script>
+<script>{
+let s = ${seed};
+const rnd = () => ((s = (s * 1103515245 + 12345) % 2147483648) / 2147483648);
+const app = document.getElementById('app');
+const views = {
+  '/shifts': () => {
+    let h = '<h1>Offene Schichten</h1><input id="search" placeholder="Suchen">';
+    for (let i = 0; i < 40; i++) h += '<div class="card" data-id="' + i + '"><img src="/avatar.svg?u=' + (i % 8) + '"><div><div class="title">Frühdienst Station ' + (i % 7 + 1) + '</div><div class="meta">Klinikum Nord · 06:00–14:00 · ' + (20 + i) + ' €/h</div></div><span class="badge">offen</span></div>';
+    return h;
+  },
+  '/shifts/[id]': (id) => '<h1>Schicht ' + id + '</h1><div class="card"><img src="/avatar.svg?u=1"><div><div class="title">Frühdienst</div><div class="meta">Klinikum Nord</div></div></div><p>' + 'Beschreibung der Schicht. '.repeat(30) + '</p><button id="apply">Bewerben</button>',
+  '/profile': () => '<h1>Profil</h1><form><label>Name</label><input id="name"><label>Qualifikation</label><select id="qual"><option>Pflegefachkraft</option><option>Pflegehelfer</option></select><label>Notizen</label><textarea id="notes"></textarea><button type="button">Speichern</button></form>',
+};
+const recorder = LunarDinos.createLunarDinosRecorder({ apiKey: 'measure', endpoint: 'https://ingest.test' });
+function render(pattern, params) {
+  app.innerHTML = views[pattern](params && params.id);
+}
+function meta(pattern, params) {
+  const href = pattern === '/shifts/[id]' ? '/shifts/' + params.id : pattern;
+  return { href: location.origin + href, title: document.title, routePattern: pattern, params };
+}
+window.__navigate = (pattern, params = null) => {
+  render(pattern, params);
+  recorder.emitPageEvent(meta(pattern, params));
+};
+render('/shifts');
+recorder.start({ pageMetadata: meta('/shifts', null) });
+setInterval(() => {
+  document.getElementById('clock').textContent = new Date().toLocaleTimeString();
+  const card = app.querySelector('.card .badge');
+  if (card && rnd() < 0.3) card.textContent = rnd() < 0.5 ? 'offen' : 'vergeben';
+}, 1000);
+window.__flush = () => recorder.flush();
+}</script></body></html>`;
+const recorderJs = await buildRecorderBundle();
+let wireBytes = 0;
+let jsonBytes = 0;
+let requests = 0;
+const eventTypes = {};
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 1280, height: 800 } });
+await page.route("https://app.test/**", (route) => {
+    const u = new URL(route.request().url());
+    if (u.pathname === "/")
+        return route.fulfill({ contentType: "text/html", body: HTML });
+    if (u.pathname === "/recorder.js")
+        return route.fulfill({ contentType: "application/javascript", body: recorderJs });
+    if (u.pathname === "/avatar.svg")
+        return route.fulfill({ contentType: "image/svg+xml", body: AVATAR });
+    return route.fulfill({ status: 404, body: "" });
+});
+await page.route("https://ingest.test/**", async (route) => {
+    const req = route.request();
+    if (req.method() !== "POST")
+        return route.fulfill({ status: 204, body: "" });
+    const body = req.postDataBuffer() ?? Buffer.alloc(0);
+    wireBytes += body.length;
+    requests++;
+    const gzipped = req.headers()["content-encoding"] === "gzip";
+    const json = gzipped ? Bun.gunzipSync(new Uint8Array(body)) : body;
+    jsonBytes += json.length;
+    const { events } = JSON.parse(new TextDecoder().decode(json));
+    for (const e of events) {
+        const k = e.type === 3 ? `3.${e.data?.source}` : e.type === 5 ? `5.${e.data?.tag}` : String(e.type);
+        eventTypes[k] = (eventTypes[k] ?? 0) + 1;
+    }
+    return route.fulfill({ status: 200, body: "{}" });
+});
+await page.clock.install({ time: new Date("2026-01-01T10:00:00Z") });
+page.on("pageerror", (e) => console.error("pageerror", e.message));
+await page.goto("https://app.test/");
+/** Let the recorder's async gzip and fetch settle on the real clock. */
+const settle = () => new Promise((r) => setTimeout(r, 30));
+const routes = [
+    ["/shifts", null],
+    ["/shifts/[id]", { id: "7" }],
+    ["/profile", null],
+    ["/shifts/[id]", { id: "12" }],
+];
+let navs = 0;
+for (let sec = 0; sec < minutes * 60; sec++) {
+    await page.mouse.move(200 + ((sec * 37) % 800), 150 + ((sec * 53) % 500), { steps: 4 });
+    if (sec % 3 === 0)
+        await page.mouse.wheel(0, sec % 6 === 0 ? 300 : -200);
+    if (sec % 20 === 19) {
+        const [pattern, params] = routes[++navs % routes.length];
+        await page.evaluate(([p, q]) => window.__navigate(p, q), [pattern, params]);
+    }
+    if (sec % 7 === 0) {
+        const input = page.locator("#search, #name").first();
+        if (await input.count())
+            await input.fill(`eingabe ${sec}`);
+    }
+    if (sec % 9 === 0)
+        await page.mouse.click(300, 300);
+    await page.clock.runFor(1000);
+    await settle();
+}
+await page.evaluate(() => window.__flush());
+await page.clock.runFor(100);
+await new Promise((r) => setTimeout(r, 300));
+await browser.close();
+const perMin = (n) => `${(n / minutes / 1024).toFixed(1)} KB`;
+console.log(`${minutes} active minutes, ${navs} navigations, ${requests} uploads`);
+console.log(`wire: ${perMin(wireBytes)} per active minute (${(wireBytes / 1024).toFixed(0)} KB total)`);
+console.log(`json: ${perMin(jsonBytes)} per active minute (${(jsonBytes / 1024).toFixed(0)} KB total)`);
+console.log("events:", eventTypes);

package/dist/src/testing/recorder-bundle.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The production recorder built for the browser, exposing
+ * `LunarDinos.createLunarDinosRecorder` on the page.
+ */
+export declare function buildRecorderBundle(): Promise<string>;
+//# sourceMappingURL=recorder-bundle.d.ts.map

package/dist/src/testing/recorder-bundle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"recorder-bundle.d.ts","sourceRoot":"","sources":["../../../src/testing/recorder-bundle.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,wBAAsB,mBAAmB,IAAI,OAAO,CAAC,MAAM,CAAC,CAa3D"}

package/dist/src/testing/recorder-bundle.js

@@ -0,0 +1,19 @@
+import { mkdtempSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+/**
+ * The production recorder built for the browser, exposing
+ * `LunarDinos.createLunarDinosRecorder` on the page.
+ */
+export async function buildRecorderBundle() {
+    const outdir = mkdtempSync(join(tmpdir(), "recorder-bundle-"));
+    const entry = join(outdir, "entry.ts");
+    await Bun.write(entry, `import { createLunarDinosRecorder } from "${import.meta.dir}/../recorder-core";\n(globalThis as any).LunarDinos = { createLunarDinosRecorder };\n`);
+    // Via the CLI: Bun.build inside `bun test` can't resolve workspace packages.
+    const build = Bun.spawnSync(["bun", "build", entry, "--target=browser", `--outdir=${outdir}`], {
+        cwd: import.meta.dir,
+    });
+    if (build.exitCode !== 0)
+        throw new Error(`bundle failed: ${build.stderr}`);
+    return Bun.file(join(outdir, "entry.js")).text();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunardinos/browser",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "type": "module",
   "exports": {
     ".": {
@@ -19,6 +19,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@lunardinos/rrweb-record": "0.1.0"
+    "@lunardinos/rrweb-record": "0.1.0",
+    "playwright": "^1.50.0"
   }
 }