@lunardinos/browser 0.2.3 → 0.2.5

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

@@ -0,0 +1,93 @@
+import { describe, expect, test } from "bun:test";
+import { isUserActivity, SESSION_TIMEOUT_MS, sessionExpired, storedSessionUsable, } from "./session-lifecycle";
+/**
+ * These rules decide how a visitor's time is cut into sessions, and both failure
+ * directions are expensive: too permissive and a tab left open becomes a 20-day
+ * recording, too strict and one sitting fragments into dozens of stubs.
+ */
+const NOW = 1_700_000_000_000;
+/** rrweb IncrementalSnapshot with the given source. */
+const inc = (source) => ({ type: 3, data: { source } });
+describe("isUserActivity", () => {
+    test("counts the things a person does", () => {
+        expect(isUserActivity(inc(1))).toBe(true); // mouse move
+        expect(isUserActivity(inc(2))).toBe(true); // click
+        expect(isUserActivity(inc(3))).toBe(true); // scroll
+        expect(isUserActivity(inc(5))).toBe(true); // input
+        expect(isUserActivity(inc(6))).toBe(true); // touch
+        expect(isUserActivity(inc(12))).toBe(true); // drag
+        expect(isUserActivity(inc(14))).toBe(true); // selection
+    });
+    test("a navigation is always activity", () => {
+        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
+        // nobody watching. Counting them is what created the 20-day recordings.
+        expect(isUserActivity(inc(0))).toBe(false);
+    });
+    test("does not count other machine-driven sources", () => {
+        expect(isUserActivity(inc(4))).toBe(false); // viewport resize
+        expect(isUserActivity(inc(8))).toBe(false); // stylesheet rule
+        expect(isUserActivity(inc(9))).toBe(false); // canvas mutation
+        expect(isUserActivity(inc(11))).toBe(false); // log
+        expect(isUserActivity(inc(15))).toBe(false); // adopted stylesheet
+    });
+    test("ignores non-incremental event types", () => {
+        expect(isUserActivity({ type: 2 })).toBe(false); // full snapshot
+        expect(isUserActivity({ type: 4 })).toBe(false); // meta
+        expect(isUserActivity({ type: 5 })).toBe(false); // custom
+    });
+    test("tolerates a missing source", () => {
+        expect(isUserActivity({ type: 3 })).toBe(false);
+        expect(isUserActivity({ type: 3, data: {} })).toBe(false);
+    });
+});
+describe("sessionExpired", () => {
+    test("holds the session open right up to the timeout", () => {
+        expect(sessionExpired(NOW, NOW + SESSION_TIMEOUT_MS - 1)).toBe(false);
+        expect(sessionExpired(NOW, NOW + SESSION_TIMEOUT_MS)).toBe(false);
+    });
+    test("ends it past the timeout", () => {
+        expect(sessionExpired(NOW, NOW + SESSION_TIMEOUT_MS + 1)).toBe(true);
+    });
+    test("a long sitting stays one session while activity continues", () => {
+        // Activity every 25 minutes for 8 hours never expires — the gap is what
+        // matters, not the total duration.
+        let last = NOW;
+        for (let i = 0; i < 20; i++) {
+            const next = last + 25 * 60_000;
+            expect(sessionExpired(last, next)).toBe(false);
+            last = next;
+        }
+    });
+    test("an idle tab expires once, not repeatedly", () => {
+        // 20 days of silence is a single expiry, and the caller resets the clock.
+        expect(sessionExpired(NOW, NOW + 20 * 24 * 60 * 60_000)).toBe(true);
+    });
+    test("no activity yet is not an expiry", () => {
+        expect(sessionExpired(0, NOW)).toBe(false);
+    });
+});
+describe("storedSessionUsable", () => {
+    test("reuses a session the tab touched recently", () => {
+        expect(storedSessionUsable(NOW, NOW + 60_000)).toBe(true);
+    });
+    test("refuses one the cookie would already have expired", () => {
+        expect(storedSessionUsable(NOW, NOW + SESSION_TIMEOUT_MS)).toBe(false);
+        expect(storedSessionUsable(NOW, NOW + SESSION_TIMEOUT_MS + 1)).toBe(false);
+    });
+    test("refuses a missing or unparseable timestamp", () => {
+        // An SDK upgrade leaves tabs with no stored timestamp; those start fresh.
+        expect(storedSessionUsable(Number.NaN, NOW)).toBe(false);
+        expect(storedSessionUsable(0, NOW)).toBe(false);
+    });
+});

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.3",
+  "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"
   }
 }