@squasher-ai/browser 0.1.0

package/dist/vitals.js

@@ -0,0 +1,92 @@
+/**
+ * Core Web Vitals collector.
+ *
+ * Uses Google's `web-vitals` library to measure:
+ *   - LCP (Largest Contentful Paint)
+ *   - CLS (Cumulative Layout Shift)
+ *   - INP (Interaction to Next Paint)
+ *   - FCP (First Contentful Paint)
+ *   - TTFB (Time to First Byte)
+ *
+ * Each metric fires once (LCP, FCP, TTFB) or accumulates (CLS, INP).
+ * Measurements are mapped to VitalEvent and queued via the transport.
+ */
+import { onLCP, onCLS, onINP, onFCP, onTTFB } from "web-vitals";
+import { getSessionId } from "./session";
+/**
+ * Infer device type from screen width.
+ * Mobile < 768px, Tablet < 1024px, Desktop >= 1024px.
+ */
+function inferDeviceType() {
+    if (typeof screen === "undefined")
+        return undefined;
+    const width = screen.width;
+    if (width < 768)
+        return "mobile";
+    if (width < 1024)
+        return "tablet";
+    return "desktop";
+}
+/**
+ * Get the effective connection type from the Network Information API.
+ * Returns undefined if not supported (Firefox, Safari).
+ */
+function getConnectionType() {
+    const nav = navigator;
+    return nav.connection?.effectiveType;
+}
+/**
+ * Map a web-vitals Metric to our VitalEvent shape.
+ */
+function mapMetric(metric, config) {
+    return {
+        type: "vital",
+        name: metric.name,
+        value: metric.value,
+        rating: metric.rating,
+        delta: metric.delta,
+        navigationType: metric.navigationType,
+        url: location.href,
+        session_id: getSessionId(),
+        timestamp: Date.now(),
+        environment: config.environment,
+        release: config.release,
+        connection: getConnectionType(),
+        device_type: inferDeviceType(),
+        referrer: document.referrer || undefined,
+    };
+}
+/** Decide whether to sample this vital based on the configured rate. */
+function shouldSample(sampleRate) {
+    if (sampleRate >= 1)
+        return true;
+    if (sampleRate <= 0)
+        return false;
+    return Math.random() < sampleRate;
+}
+/**
+ * Start collecting all 5 Core Web Vitals and feed them to the transport.
+ * Call once during SDK initialization.
+ */
+export function startVitalsCollection(transport, config) {
+    if (!shouldSample(config.sampleRate)) {
+        if (config.debug) {
+            console.log("[squasher] Vitals collection skipped (sampled out)");
+        }
+        return;
+    }
+    const handle = (metric) => {
+        const event = mapMetric(metric, config);
+        if (config.debug) {
+            console.log(`[squasher] ${metric.name}: ${metric.value.toFixed(2)} (${metric.rating})`);
+        }
+        transport.enqueueVital(event);
+    };
+    // Register all 5 metric observers.
+    // reportAllChanges: true for CLS/INP so we get cumulative values.
+    onLCP(handle);
+    onCLS(handle, { reportAllChanges: true });
+    onINP(handle, { reportAllChanges: true });
+    onFCP(handle);
+    onTTFB(handle);
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@squasher-ai/browser",
+  "version": "0.1.0",
+  "description": "Official @squasher-ai/browser package for Squasher.",
+  "homepage": "https://squasher.ai",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/squasher-ai/squasher.git",
+    "directory": "packages/sdk-browser"
+  },
+  "bugs": {
+    "url": "https://github.com/squasher-ai/squasher/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react.js",
+      "types": "./dist/react.d.ts"
+    }
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "rrweb": "^2.0.0-alpha.4",
+    "web-vitals": "^4.2.4"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  }
+}