@maple-dev/browser 0.3.0 → 0.4.0

package/dist/replay-session-B_ACRogX.mjs

@@ -0,0 +1,390 @@
+import { _ as gzip, f as startEventSink, h as nextChunkSeq, m as markActivity, n as getObservedTraceIds, o as startSessionLifecycle, r as publishSessionSink, s as activeTraceId, v as postSessionBlob, y as postSessionMeta } from "./sink-DHTfvFgl.mjs";
+import { record } from "rrweb";
+//#region ../browser-session/src/replay/capture/shared.ts
+/** Emit best-effort: capture must never throw into the host app's call site. */
+function safeEmit(emit, ev) {
+	try {
+		emit(ev);
+	} catch {}
+}
+//#endregion
+//#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/errors.ts
+const MAX_STACK = 4e3;
+/** Capture uncaught errors + unhandled promise rejections as session events. */
+function installErrorCapture(emit) {
+	const onError = (event) => {
+		safeEmit(emit, {
+			type: "error",
+			level: "error",
+			message: event.message || String(event.error ?? "Error"),
+			errorStack: truncate(event.error?.stack),
+			traceId: activeTraceId()
+		});
+	};
+	const onRejection = (event) => {
+		const reason = event.reason;
+		safeEmit(emit, {
+			type: "error",
+			level: "error",
+			message: typeof reason === "string" ? reason : reason?.message ?? "Unhandled promise rejection",
+			errorStack: truncate(typeof reason === "object" ? reason?.stack : void 0),
+			traceId: activeTraceId()
+		});
+	};
+	window.addEventListener("error", onError);
+	window.addEventListener("unhandledrejection", onRejection);
+	return () => {
+		window.removeEventListener("error", onError);
+		window.removeEventListener("unhandledrejection", onRejection);
+	};
+}
+function truncate(stack) {
+	if (!stack) return void 0;
+	return stack.length > MAX_STACK ? `${stack.slice(0, MAX_STACK)}…` : stack;
+}
+//#endregion
+//#region ../browser-session/src/replay/capture/interactions.ts
+const MAX_TEXT = 120;
+/**
+* Capture clicks and input events as session events. Listens in the capture
+* phase so it sees interactions even when the host app calls
+* `stopPropagation()`. Input *values* are never recorded; only the target
+* element. Click target text is omitted when `maskAllText` is set.
+*/
+function installInteractionCapture(emit, maskAllText) {
+	const onClick = (event) => {
+		const target = event.target;
+		if (!(target instanceof Element)) return;
+		safeEmit(emit, {
+			type: "click",
+			targetSelector: selectorOf(target),
+			targetText: maskAllText ? void 0 : textOf(target)
+		});
+	};
+	const onInput = (event) => {
+		const target = event.target;
+		if (!(target instanceof Element)) return;
+		safeEmit(emit, {
+			type: "input",
+			targetSelector: selectorOf(target)
+		});
+	};
+	document.addEventListener("click", onClick, true);
+	document.addEventListener("input", onInput, true);
+	return () => {
+		document.removeEventListener("click", onClick, true);
+		document.removeEventListener("input", onInput, true);
+	};
+}
+/** A short, human-readable selector: tag + #id + .first-class. */
+function selectorOf(el) {
+	return `${el.tagName.toLowerCase()}${el.id ? `#${el.id}` : ""}${typeof el.className === "string" && el.className.trim() ? `.${el.className.trim().split(/\s+/)[0]}` : ""}`;
+}
+function textOf(el) {
+	const text = (el.textContent ?? "").trim().replace(/\s+/g, " ");
+	if (!text) return void 0;
+	return text.length > MAX_TEXT ? `${text.slice(0, MAX_TEXT)}…` : 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 } } : {}
+		});
+	};
+	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 browser activity (console, network,
+* errors, interactions) into distilled session events.
+*
+* Navigation is deliberately absent: the sink observes it, because page views
+* have to be counted even when replay is unsampled, and a second history patch
+* here would double-count every SPA transition.
+*/
+function startEventCapture(config, sessionId) {
+	const sink = startEventSink(config, sessionId);
+	const emit = sink.emit;
+	const uninstall = [
+		installInteractionCapture(emit, config.maskAllText),
+		installConsoleCapture(emit),
+		installNetworkCapture(emit, sink.ignoreUrl),
+		installErrorCapture(emit)
+	];
+	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;
+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;
+	const resetBuffer = () => {
+		parts = [];
+		bufferBytes = 0;
+		bufferHasCheckpoint = false;
+		firstTimestamp = 0;
+		lastTimestamp = 0;
+	};
+	const flush = async (keepalive = false) => {
+		if (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));
+		await postSessionBlob(config, {
+			sessionId,
+			chunkSeq: seq,
+			isCheckpoint,
+			eventCount,
+			durationMs
+		}, gzipped, keepalive);
+	};
+	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: "*" } : {},
+		checkoutEveryNms: CHECKOUT_EVERY_MS
+	});
+	const scheduleFlush = () => {
+		if (typeof requestIdleCallback === "function") requestIdleCallback(() => void flush(), { timeout: 2e3 });
+		else flush();
+	};
+	const flushTimer = setInterval(scheduleFlush, FLUSH_INTERVAL_MS);
+	return {
+		stop: () => {
+			clearInterval(flushTimer);
+			stop?.();
+		},
+		flush,
+		getClickCount: () => clickCount
+	};
+}
+//#endregion
+//#region ../browser-session/src/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,
+		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 };