@maple-dev/browser 0.3.0 → 0.8.0

package/dist/replay-session-BYZfi3iZ.mjs

@@ -0,0 +1,327 @@
+import { S as activeTraceId, _ as gzip, f as markActivity, n as getObservedTraceIds, o as startSessionLifecycle, p as nextChunkSeq, r as publishSessionSink, u as startEventSink, v as postSessionBlob, x as safeEmit, y as postSessionMeta } from "./sink-D9w1kg0Q.mjs";
+import { record } from "rrweb";
+//#region ../browser-session/src/replay/capture/console.ts
+const LEVELS = [
+	"log",
+	"info",
+	"warn",
+	"error",
+	"debug"
+];
+const MAX_MESSAGE = 2e3;
+/**
+* Capture `console.*` calls as session events. Wraps each method, emits a
+* distilled record, then forwards to the original so the host app's console
+* behaves normally. Never throws into the call site.
+*/
+function installConsoleCapture(emit) {
+	const original = {};
+	for (const level of LEVELS) {
+		const orig = console[level];
+		original[level] = orig;
+		console[level] = (...args) => {
+			safeEmit(emit, {
+				type: "console",
+				level,
+				message: formatArgs(args)
+			});
+			orig.apply(console, args);
+		};
+	}
+	return () => {
+		for (const level of LEVELS) {
+			const orig = original[level];
+			if (orig) console[level] = orig;
+		}
+	};
+}
+function formatArgs(args) {
+	const text = args.map((a) => {
+		if (typeof a === "string") return a;
+		if (a instanceof Error) return `${a.name}: ${a.message}`;
+		try {
+			return JSON.stringify(a);
+		} catch {
+			return String(a);
+		}
+	}).join(" ");
+	return text.length > MAX_MESSAGE ? `${text.slice(0, MAX_MESSAGE)}…` : text;
+}
+//#endregion
+//#region ../browser-session/src/replay/capture/network.ts
+/**
+* Capture fetch + XHR requests as session events, tagged with the active trace
+* id so each request links to its backend trace. `ignoreUrl` skips Maple's own
+* ingest endpoints (otherwise capturing the session-events POST would loop).
+*/
+function installNetworkCapture(emit, ignoreUrl) {
+	const origFetch = typeof window !== "undefined" ? window.fetch : void 0;
+	if (origFetch) window.fetch = async (input, init) => {
+		const url = requestUrl(input);
+		const method = requestMethod(input, init);
+		const traceId = activeTraceId();
+		const start = performance.now();
+		try {
+			const res = await origFetch(input, init);
+			record(url, method, res.status, start, traceId);
+			return res;
+		} catch (error) {
+			record(url, method, 0, start, traceId, String(error));
+			throw error;
+		}
+	};
+	const record = (url, method, status, start, traceId, error) => {
+		if (ignoreUrl(url)) return;
+		safeEmit(emit, {
+			type: "network",
+			net: {
+				method,
+				url,
+				status,
+				durationMs: Math.round(performance.now() - start)
+			},
+			traceId,
+			...error ? { attrs: { error } } : void 0
+		});
+	};
+	const XHR = typeof window !== "undefined" ? window.XMLHttpRequest : void 0;
+	const origOpen = XHR?.prototype.open;
+	const origSend = XHR?.prototype.send;
+	if (XHR && origOpen && origSend) {
+		XHR.prototype.open = function(method, url, ...rest) {
+			this.__mapleMethod = String(method).toUpperCase();
+			this.__mapleUrl = typeof url === "string" ? url : url.href;
+			return origOpen.apply(this, [
+				method,
+				url,
+				...rest
+			]);
+		};
+		XHR.prototype.send = function(...args) {
+			const meta = this;
+			const start = performance.now();
+			const traceId = activeTraceId();
+			this.addEventListener("loadend", () => {
+				record(meta.__mapleUrl ?? "", meta.__mapleMethod ?? "GET", this.status, start, traceId);
+			});
+			return origSend.apply(this, args);
+		};
+	}
+	return () => {
+		if (origFetch) window.fetch = origFetch;
+		if (XHR && origOpen) XHR.prototype.open = origOpen;
+		if (XHR && origSend) XHR.prototype.send = origSend;
+	};
+}
+function requestUrl(input) {
+	if (typeof input === "string") return input;
+	if (input instanceof URL) return input.href;
+	return input.url;
+}
+function requestMethod(input, init) {
+	return (init?.method ?? (typeof input === "object" && "method" in input ? input.method : void 0) ?? "GET").toUpperCase();
+}
+//#endregion
+//#region ../browser-session/src/replay/events.ts
+/**
+* Install the capture modules that turn console output and network requests
+* into distilled session events.
+*
+* Navigation, errors and interactions are deliberately absent: the sink
+* installs those itself (see `startBaselineCapture`), because page views, error
+* counts and click counts have to be counted even when replay is unsampled —
+* and a second listener here would double-count every one of them.
+*/
+function startEventCapture(config, sessionId) {
+	const sink = startEventSink(config, sessionId);
+	const emit = sink.emit;
+	const uninstall = [installConsoleCapture(emit), installNetworkCapture(emit, sink.ignoreUrl)];
+	return {
+		stop: () => {
+			for (const off of uninstall) off();
+		},
+		flush: sink.flush
+	};
+}
+//#endregion
+//#region ../browser-session/src/replay/record.ts
+const FULL_SNAPSHOT = 2;
+const INCREMENTAL = 3;
+const SOURCE_MOUSE_INTERACTION = 2;
+const MOUSE_CLICK = 2;
+const FLUSH_INTERVAL_MS = 5e3;
+const FLUSH_BYTES = 102400;
+const CHECKOUT_EVERY_MS = 3e5;
+const MAX_BUFFER_BYTES = 4194304;
+function warnExhausted(sessionId) {
+	console.warn(`[maple] session replay ${sessionId} reached its maximum recorded size; recording stopped for this session (metadata and events continue)`);
+}
+let lastDropWarnAt = 0;
+function warnBufferDropped(bytes) {
+	const now = Date.now();
+	if (now - lastDropWarnAt < 3e4) return;
+	lastDropWarnAt = now;
+	console.warn(`[maple] session replay buffer exceeded ${MAX_BUFFER_BYTES} bytes (dropping ${bytes} buffered bytes; recording continues from the next full snapshot)`);
+}
+function startRecording(config, sessionId) {
+	let parts = [];
+	let bufferBytes = 0;
+	let bufferHasCheckpoint = false;
+	let firstTimestamp = 0;
+	let lastTimestamp = 0;
+	let droppedChunk = false;
+	let clickCount = 0;
+	let stopped = false;
+	let exhausted = false;
+	const resetBuffer = () => {
+		parts = [];
+		bufferBytes = 0;
+		bufferHasCheckpoint = false;
+		firstTimestamp = 0;
+		lastTimestamp = 0;
+	};
+	const flush = async (keepalive = false) => {
+		if (stopped || exhausted || parts.length === 0) return;
+		const body = `[${parts.join(",")}]`;
+		const isCheckpoint = bufferHasCheckpoint;
+		const eventCount = parts.length;
+		const durationMs = Math.max(0, lastTimestamp - firstTimestamp);
+		const seq = nextChunkSeq();
+		resetBuffer();
+		const gzipped = await gzip(new TextEncoder().encode(body));
+		if (await postSessionBlob(config, {
+			sessionId,
+			chunkSeq: seq,
+			isCheckpoint,
+			eventCount,
+			durationMs
+		}, gzipped, keepalive) === "exhausted" && !exhausted) {
+			exhausted = true;
+			warnExhausted(sessionId);
+			haltCapture();
+		}
+	};
+	let haltCapture = () => {};
+	const stop = record({
+		emit: (event, isCheckpoint) => {
+			const active = markActivity();
+			if (active && active.id !== sessionId) return;
+			const e = event;
+			const isFullSnapshot = isCheckpoint === true || e.type === FULL_SNAPSHOT;
+			if (e.type === INCREMENTAL && e.data?.source === SOURCE_MOUSE_INTERACTION && e.data.type === MOUSE_CLICK) clickCount++;
+			let json;
+			try {
+				json = JSON.stringify(e);
+			} catch {
+				return;
+			}
+			if (droppedChunk && !isFullSnapshot) return;
+			droppedChunk = false;
+			if (bufferBytes + json.length > MAX_BUFFER_BYTES) {
+				warnBufferDropped(bufferBytes + json.length);
+				resetBuffer();
+				droppedChunk = true;
+				return;
+			}
+			if (isFullSnapshot) bufferHasCheckpoint = true;
+			if (parts.length === 0) firstTimestamp = e.timestamp;
+			lastTimestamp = e.timestamp;
+			parts.push(json);
+			bufferBytes += json.length;
+			if (bufferBytes >= FLUSH_BYTES) flush();
+		},
+		maskAllInputs: config.maskAllInputs,
+		...config.maskAllText ? { maskTextSelector: "*" } : void 0,
+		checkoutEveryNms: CHECKOUT_EVERY_MS
+	});
+	let idleHandle;
+	const scheduleFlush = () => {
+		if (typeof requestIdleCallback === "function") idleHandle = requestIdleCallback(() => {
+			idleHandle = void 0;
+			flush();
+		}, { timeout: 2e3 });
+		else flush();
+	};
+	const flushTimer = setInterval(scheduleFlush, FLUSH_INTERVAL_MS);
+	let halted = false;
+	haltCapture = () => {
+		if (halted) return;
+		halted = true;
+		clearInterval(flushTimer);
+		if (idleHandle !== void 0 && typeof cancelIdleCallback === "function") {
+			cancelIdleCallback(idleHandle);
+			idleHandle = void 0;
+		}
+		resetBuffer();
+		stop?.();
+	};
+	return {
+		stop: () => {
+			stopped = true;
+			haltCapture();
+		},
+		flush,
+		getClickCount: () => clickCount
+	};
+}
+//#endregion
+//#region ../browser-session/src/session/replay-session.ts
+/**
+* Start recording the current browser session. Publishes the session sink,
+* posts an `active` metadata row, and installs visibility handlers:
+* hidden → flush + `ended` row (with observed trace ids) + stop capture;
+* visible → re-resolve the session (rotating if idle-expired), republish the
+* sink, restart capture, post a fresh `active` row. Metadata versions are
+* monotonic per session, so the latest row always wins on the backend.
+*
+* Returns undefined outside a browser. Sampling is the caller's decision.
+*/
+function startReplaySession(options) {
+	if (typeof window === "undefined") return void 0;
+	const engineConfig = {
+		endpoint: options.endpoint.replace(/\/$/, ""),
+		ingestKey: options.ingestKey,
+		sdk: options.sdk,
+		maskAllInputs: options.maskAllInputs,
+		maskAllText: options.maskAllText
+	};
+	let recorder;
+	let events;
+	let publishedSessionId;
+	const publish = (sessionId) => {
+		if (publishedSessionId === sessionId) return;
+		publishedSessionId = sessionId;
+		publishSessionSink(sessionId);
+	};
+	return startSessionLifecycle({
+		...options,
+		getTraceIds: getObservedTraceIds
+	}, {
+		recorded: true,
+		post: (row, keepalive) => {
+			postSessionMeta(engineConfig, row, keepalive);
+		},
+		clicksSinceStart: () => recorder?.getClickCount() ?? 0,
+		onStart: (record) => {
+			publish(record.id);
+			recorder = startRecording(engineConfig, record.id);
+			events = startEventCapture(engineConfig, record.id);
+		},
+		onSuspend: ({ flush, keepalive }) => {
+			const stoppingRecorder = recorder;
+			const stoppingEvents = events;
+			recorder = void 0;
+			events = void 0;
+			const flushed = flush ? Promise.all([stoppingRecorder?.flush(keepalive), stoppingEvents?.flush(keepalive)]).then(() => {}) : void 0;
+			stoppingRecorder?.stop();
+			stoppingEvents?.stop();
+			return flushed;
+		},
+		onSessionChange: (sessionId) => {
+			publish(sessionId);
+			options.onSessionChange?.(sessionId);
+		}
+	});
+}
+//#endregion
+export { startReplaySession };