@squasher-ai/browser 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Squasher
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,12 @@
+# @squasher-ai/browser
+
+Official @squasher-ai/browser package for Squasher.
+
+## Install
+
+```bash
+npm install @squasher-ai/browser
+```
+
+Docs: https://docs.squasher.ai
+Homepage: https://squasher.ai

package/dist/__tests__/client.test.d.ts

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

package/dist/__tests__/client.test.d.ts.map

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

package/dist/__tests__/client.test.js

@@ -0,0 +1,103 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { BrowserClient } from "../client";
+import { resetSessionId } from "../session";
+describe("BrowserClient", () => {
+    beforeEach(() => {
+        resetSessionId();
+        const storage = {};
+        vi.restoreAllMocks();
+        vi.stubGlobal("crypto", {
+            randomUUID: vi.fn().mockReturnValue("aaaaaaaa-bbbb-4ccc-8ddd-eeeeeeeeeeee"),
+        });
+        vi.stubGlobal("sessionStorage", {
+            getItem: (key) => storage[key] ?? null,
+            setItem: (key, value) => {
+                storage[key] = value;
+            },
+            removeItem: (key) => {
+                delete storage[key];
+            },
+        });
+        vi.stubGlobal("navigator", {
+            sendBeacon: vi.fn().mockReturnValue(true),
+        });
+        vi.stubGlobal("document", {
+            addEventListener: vi.fn(),
+            referrer: "https://referrer.example",
+            title: "Settings",
+        });
+        vi.stubGlobal("window", {
+            addEventListener: vi.fn(),
+        });
+        vi.stubGlobal("location", {
+            href: "https://example.com/settings",
+            pathname: "/settings",
+            search: "?tab=profile",
+        });
+    });
+    it("attaches the current session ID to captured error events", async () => {
+        const client = new BrowserClient({
+            apiKey: "sq_pk_test",
+            projectId: "project-123",
+            enableVitals: false,
+            enableErrorCapture: false,
+            enableAutoBreadcrumbs: false,
+        });
+        client.captureError(new Error("boom"));
+        const sendBeaconMock = vi.mocked(navigator.sendBeacon);
+        expect(sendBeaconMock).toHaveBeenCalledOnce();
+        const [url, payloadBlob] = sendBeaconMock.mock.calls[0] ?? [];
+        expect(url).toBe("https://ingest.squasher.ai/v1/ingest/project-123?key=sq_pk_test");
+        expect(payloadBlob).toBeInstanceOf(Blob);
+        if (!(payloadBlob instanceof Blob)) {
+            throw new Error("expected ingest payload to be a Blob");
+        }
+        const payload = JSON.parse(await payloadBlob.text());
+        expect(payload.session_id).toBe("aaaaaaaa-bbbb-4ccc-8ddd-eeeeeeeeeeee");
+        expect(payload.request?.url).toBe("https://example.com/settings");
+        client.close();
+    });
+    it("track sends analytics metadata with visitor context", async () => {
+        const client = new BrowserClient({
+            apiKey: "sq_pk_test",
+            projectId: "project-123",
+            enableVitals: false,
+            enableErrorCapture: false,
+            enableAutoBreadcrumbs: false,
+        });
+        client.track("checkout_started", { step: 1 });
+        const [_, payloadBlob] = vi.mocked(navigator.sendBeacon).mock.calls[0] ?? [];
+        if (!(payloadBlob instanceof Blob)) {
+            throw new Error("expected ingest payload to be a Blob");
+        }
+        const payload = JSON.parse(await payloadBlob.text());
+        expect(payload.kind).toBe("analytics");
+        expect(payload.event_name).toBe("checkout_started");
+        expect(payload.analytics?.event).toBe("checkout_started");
+        expect(payload.analytics?.properties?.step).toBe(1);
+        expect(payload.visitor?.anonymous_id).toBe("aaaaaaaa-bbbb-4ccc-8ddd-eeeeeeeeeeee");
+        client.close();
+    });
+    it("page sends normalized page metadata", async () => {
+        const client = new BrowserClient({
+            apiKey: "sq_pk_test",
+            projectId: "project-123",
+            enableVitals: false,
+            enableErrorCapture: false,
+            enableAutoBreadcrumbs: false,
+        });
+        client.page("Settings");
+        const [_, payloadBlob] = vi.mocked(navigator.sendBeacon).mock.calls[0] ?? [];
+        if (!(payloadBlob instanceof Blob)) {
+            throw new Error("expected ingest payload to be a Blob");
+        }
+        const payload = JSON.parse(await payloadBlob.text());
+        expect(payload.kind).toBe("page");
+        expect(payload.page?.name).toBe("Settings");
+        expect(payload.page?.path).toBe("/settings");
+        expect(payload.page?.title).toBe("Settings");
+        expect(payload.page?.referrer).toBe("https://referrer.example");
+        expect(payload.page?.search).toBe("?tab=profile");
+        client.close();
+    });
+});

package/dist/__tests__/errors.test.d.ts

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

package/dist/__tests__/errors.test.d.ts.map

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

package/dist/__tests__/errors.test.js

@@ -0,0 +1,80 @@
+import { describe, it, expect } from "vitest";
+import { parseStack, buildErrorEvent, buildMessageEvent } from "../errors";
+describe("parseStack", () => {
+    it("parses V8 stack traces", () => {
+        const stack = `Error: Something went wrong
+    at functionName (https://example.com/app.js:10:20)
+    at anotherFunction (https://example.com/utils.js:5:3)
+    at Object.<anonymous> (node_modules/some-lib/index.js:100:15)`;
+        const frames = parseStack(stack);
+        expect(frames).toBeDefined();
+        expect(frames).toHaveLength(3);
+        expect(frames[0]).toEqual({
+            function: "functionName",
+            filename: "https://example.com/app.js",
+            lineno: 10,
+            colno: 20,
+            in_app: true,
+        });
+        expect(frames[1]).toEqual({
+            function: "anotherFunction",
+            filename: "https://example.com/utils.js",
+            lineno: 5,
+            colno: 3,
+            in_app: true,
+        });
+        // node_modules should be marked as not in_app
+        expect(frames[2].in_app).toBe(false);
+    });
+    it("handles anonymous functions", () => {
+        const stack = `Error: test
+    at https://example.com/app.js:1:1`;
+        const frames = parseStack(stack);
+        expect(frames).toBeDefined();
+        expect(frames).toHaveLength(1);
+        expect(frames[0].function).toBe("<anonymous>");
+    });
+    it("returns undefined for empty stack", () => {
+        expect(parseStack(undefined)).toBeUndefined();
+        expect(parseStack("Error: test")).toBeUndefined();
+    });
+    it("marks chrome extensions as not in_app", () => {
+        const stack = `Error: ext
+    at handler (chrome-extension://abcdef/content.js:5:10)`;
+        const frames = parseStack(stack);
+        expect(frames).toBeDefined();
+        expect(frames[0].in_app).toBe(false);
+    });
+});
+describe("buildErrorEvent", () => {
+    it("builds a complete error event", () => {
+        const error = new Error("Test error");
+        error.name = "TypeError";
+        const event = buildErrorEvent(error, { extra: "data" });
+        expect(event.message).toBe("Test error");
+        expect(event.type).toBe("TypeError");
+        expect(event.level).toBe("error");
+        expect(event.sdk?.name).toBe("@squasher-ai/browser");
+        expect(event.sdk?.version).toBe("0.1.0");
+        expect(event.timestamp).toBeDefined();
+        expect(event.extra).toEqual({ extra: "data" });
+        expect(event.stack).toBeDefined();
+    });
+    it("builds event without extra", () => {
+        const error = new Error("Simple error");
+        const event = buildErrorEvent(error);
+        expect(event.extra).toBeUndefined();
+    });
+});
+describe("buildMessageEvent", () => {
+    it("builds a message event with default level", () => {
+        const event = buildMessageEvent("Hello");
+        expect(event.message).toBe("Hello");
+        expect(event.level).toBe("info");
+        expect(event.sdk?.name).toBe("@squasher-ai/browser");
+    });
+    it("builds a message event with custom level", () => {
+        const event = buildMessageEvent("Warning!", "warning");
+        expect(event.level).toBe("warning");
+    });
+});

package/dist/__tests__/replay-privacy.test.d.ts

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

package/dist/__tests__/replay-privacy.test.d.ts.map

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

package/dist/__tests__/replay-privacy.test.js

@@ -0,0 +1,124 @@
+import { describe, expect, it, vi } from "vitest";
+import { applyReplayEventPrivacy, buildReplayRecordOptions, MASK_ALL_TEXT_SELECTOR, } from "../replay-privacy";
+describe("replay privacy helpers", () => {
+    it("builds rrweb options for text masking and blocked selectors", () => {
+        const emit = vi.fn();
+        expect(buildReplayRecordOptions({
+            emit,
+            privacy: {
+                blockSelector: ".pii-container",
+                maskAllText: true,
+            },
+        })).toMatchObject({
+            blockSelector: ".pii-container",
+            emit,
+            maskAllInputs: true,
+            maskAllText: true,
+            maskTextSelector: MASK_ALL_TEXT_SELECTOR,
+        });
+    });
+    it("redacts replay text fields without touching non-text attributes", () => {
+        const event = {
+            data: {
+                node: {
+                    attributes: {
+                        "aria-label": "Customer email",
+                        placeholder: "you@example.com",
+                        style: "color:#0f172a",
+                        title: "Checkout form",
+                        value: "Customer email",
+                    },
+                    childNodes: [
+                        {
+                            textContent: "Jane Example",
+                            type: 3,
+                        },
+                    ],
+                    tagName: "input",
+                    type: 2,
+                },
+                source: 5,
+                text: "customer@example.com",
+            },
+            timestamp: 1,
+            type: 3,
+        };
+        const redactedEvent = applyReplayEventPrivacy(event, { maskAllText: true });
+        const serializedEvent = JSON.stringify(redactedEvent);
+        expect(redactedEvent).not.toBe(event);
+        expect(serializedEvent).not.toContain("Jane Example");
+        expect(serializedEvent).not.toContain("you@example.com");
+        expect(serializedEvent).not.toContain("customer@example.com");
+        expect(serializedEvent).not.toContain("Checkout form");
+        expect(serializedEvent).toContain("color:#0f172a");
+        expect(serializedEvent).toContain("************");
+        expect(event.data.text).toBe("customer@example.com");
+    });
+    it("redacts inline style and script text alongside visible text nodes", () => {
+        const event = {
+            data: {
+                node: {
+                    childNodes: [
+                        {
+                            childNodes: [
+                                {
+                                    childNodes: [
+                                        {
+                                            tagName: "style",
+                                            childNodes: [
+                                                {
+                                                    textContent: "body{background:#0f172a;color:#e2e8f0;}",
+                                                    type: 3,
+                                                },
+                                            ],
+                                            type: 2,
+                                        },
+                                        {
+                                            tagName: "script",
+                                            childNodes: [
+                                                {
+                                                    textContent: 'window.__BOOTSTRAP__={email:"jane@example.com"};',
+                                                    type: 3,
+                                                },
+                                            ],
+                                            type: 2,
+                                        },
+                                        {
+                                            childNodes: [
+                                                {
+                                                    textContent: "Private checkout summary",
+                                                    type: 3,
+                                                },
+                                            ],
+                                            tagName: "h1",
+                                            type: 2,
+                                        },
+                                    ],
+                                    tagName: "body",
+                                    type: 2,
+                                },
+                            ],
+                            tagName: "html",
+                            type: 2,
+                        },
+                    ],
+                    type: 0,
+                },
+            },
+            timestamp: 1,
+            type: 2,
+        };
+        const redactedEvent = applyReplayEventPrivacy(event, { maskAllText: true });
+        const serializedEvent = JSON.stringify(redactedEvent);
+        expect(serializedEvent).not.toContain("body{background:#0f172a;color:#e2e8f0;}");
+        expect(serializedEvent).not.toContain('window.__BOOTSTRAP__={email:"jane@example.com"};');
+        expect(serializedEvent).not.toContain("Private checkout summary");
+        expect(serializedEvent).toContain("******* ******** *******");
+        expect(serializedEvent).toMatch(/\*{10,}/);
+    });
+    it("returns the original replay event when text masking is disabled", () => {
+        const event = { data: { text: "customer@example.com" }, timestamp: 1, type: 3 };
+        expect(applyReplayEventPrivacy(event, { maskAllText: false })).toBe(event);
+        expect(applyReplayEventPrivacy(event)).toBe(event);
+    });
+});

package/dist/__tests__/replay-startup.test.d.ts

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

package/dist/__tests__/replay-startup.test.d.ts.map

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

package/dist/__tests__/replay-startup.test.js

@@ -0,0 +1,99 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ReplayRecorder } from "../replay";
+import { resetSessionId } from "../session";
+const rrwebRecordMock = vi.hoisted(() => vi.fn());
+const rrwebStopMock = vi.hoisted(() => vi.fn());
+vi.mock("rrweb", () => ({
+    record: rrwebRecordMock,
+}));
+function createReplayEvent(type, timestamp) {
+    return {
+        type,
+        timestamp,
+        data: {
+            source: type,
+        },
+    };
+}
+describe("ReplayRecorder startup behavior", () => {
+    let emitReplayEvent;
+    beforeEach(() => {
+        resetSessionId();
+        emitReplayEvent = undefined;
+        vi.useFakeTimers();
+        vi.restoreAllMocks();
+        const storage = {};
+        vi.stubGlobal("crypto", {
+            randomUUID: vi.fn().mockReturnValue("11111111-2222-4333-8444-555555555555"),
+        });
+        vi.stubGlobal("sessionStorage", {
+            getItem: (key) => storage[key] ?? null,
+            setItem: (key, value) => {
+                storage[key] = value;
+            },
+            removeItem: (key) => {
+                delete storage[key];
+            },
+        });
+        vi.stubGlobal("location", {
+            href: "https://example.com/dashboard",
+        });
+        vi.stubGlobal("fetch", vi.fn().mockResolvedValue({ ok: true }));
+        vi.stubGlobal("navigator", {
+            sendBeacon: vi.fn().mockReturnValue(true),
+        });
+        vi.stubGlobal("document", {});
+        vi.stubGlobal("window", {
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+        });
+        rrwebStopMock.mockReset();
+        rrwebRecordMock.mockReset();
+        rrwebRecordMock.mockImplementation((options) => {
+            emitReplayEvent = options?.emit;
+            return rrwebStopMock;
+        });
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.unstubAllGlobals();
+    });
+    it("preserves rrweb bootstrap events emitted before record() returns", async () => {
+        rrwebRecordMock.mockImplementation((options) => {
+            options?.emit?.(createReplayEvent(4, 1));
+            options?.emit?.(createReplayEvent(2, 2));
+            emitReplayEvent = options?.emit;
+            return rrwebStopMock;
+        });
+        const recorder = new ReplayRecorder({
+            endpoint: "https://ingest.squasher.ai",
+            projectId: "project-123",
+            apiKey: "sq_pk_test",
+            debug: false,
+            sampleRate: 1,
+        });
+        await recorder.ready;
+        emitReplayEvent?.(createReplayEvent(3, 3));
+        vi.advanceTimersByTime(5_000);
+        const requestBody = vi.mocked(fetch).mock.calls[0]?.[1]?.body;
+        expect(typeof requestBody).toBe("string");
+        if (typeof requestBody !== "string") {
+            throw new Error("expected replay request body to be a string");
+        }
+        const payload = JSON.parse(requestBody);
+        expect(payload.events.map((event) => event.type)).toEqual([4, 2, 3]);
+        recorder.dispose();
+    });
+    it("skips recording when the replay sample rate drops the session", () => {
+        vi.spyOn(Math, "random").mockReturnValue(0.9);
+        const recorder = new ReplayRecorder({
+            endpoint: "https://ingest.squasher.ai",
+            projectId: "project-123",
+            apiKey: "sq_pk_test",
+            debug: false,
+            sampleRate: 0.5,
+        });
+        expect(rrwebRecordMock).not.toHaveBeenCalled();
+        recorder.dispose();
+    });
+});

package/dist/__tests__/replay.test.d.ts

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

package/dist/__tests__/replay.test.d.ts.map

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