@maple-dev/browser 0.9.0 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@maple-dev/browser",
-	"version": "0.9.0",
+	"version": "0.10.1",
 	"description": "Maple browser SDK — OpenTelemetry tracing and rrweb session replay in one package. Every span and replay event shares a session id for trace↔replay correlation.",
 	"keywords": [
 		"maple",
@@ -30,6 +30,10 @@
 		".": {
 			"types": "./dist/index.d.mts",
 			"import": "./dist/index.mjs"
+		},
+		"./react": {
+			"types": "./dist/react.d.mts",
+			"import": "./dist/react.mjs"
 		}
 	},
 	"publishConfig": {
@@ -43,21 +47,39 @@
 	},
 	"dependencies": {
 		"@opentelemetry/api": "^1.9.0",
-		"@opentelemetry/exporter-trace-otlp-http": "^0.221.0",
-		"@opentelemetry/instrumentation": "^0.221.0",
-		"@opentelemetry/instrumentation-fetch": "^0.221.0",
+		"@opentelemetry/exporter-logs-otlp-http": "^0.222.0",
+		"@opentelemetry/exporter-trace-otlp-http": "^0.222.0",
+		"@opentelemetry/instrumentation": "^0.222.0",
+		"@opentelemetry/instrumentation-fetch": "^0.222.0",
+		"@opentelemetry/instrumentation-xml-http-request": "^0.222.0",
+		"@opentelemetry/otlp-transformer": "^0.222.0",
 		"@opentelemetry/resources": "^2.10.0",
+		"@opentelemetry/sdk-logs": "^0.222.0",
 		"@opentelemetry/sdk-trace-base": "^2.10.0",
 		"@opentelemetry/sdk-trace-web": "^2.10.0",
 		"@opentelemetry/semantic-conventions": "^1.43.0",
-		"rrweb": "^2.0.0-alpha.18"
+		"rrweb": "^2.0.0-alpha.18",
+		"web-vitals": "^6.2.2"
 	},
 	"devDependencies": {
 		"@maple/browser-session": "0.1.0",
-		"@vitest/browser-playwright": "^5.0.1",
-		"playwright": "^1.62.1",
-		"tsdown": "^0.22.14",
-		"typescript": "^6.0.3",
-		"vitest": "^5.0.1"
+		"@maple/sdk-core": "0.1.0",
+		"@types/react": "^19.3.0",
+		"@types/react-dom": "^19.3.0",
+		"@vitest/browser-playwright": "^5.0.2",
+		"playwright": "^1.63.0",
+		"react": "^19.3.0",
+		"react-dom": "^19.3.0",
+		"tsdown": "^0.23.0",
+		"typescript": "^7.0.2",
+		"vitest": "^5.0.2"
+	},
+	"peerDependencies": {
+		"react": ">=18"
+	},
+	"peerDependenciesMeta": {
+		"react": {
+			"optional": true
+		}
 	}
 }

package/dist/replay-session-gSlAYwqV.mjs

@@ -1,360 +0,0 @@
-import { C as warnDropped, E as activeTraceId, M as scrubUrl, O as withStartedTraceId, T as safeEmit, b as postSessionBlob, m as nextChunkSeq, n as getObservedTraceIds, o as startSessionLifecycle, p as markActivity, r as publishSessionSink, u as startEventSink, w as BLOCK_SELECTOR, x as postSessionMeta, y as gzip } from "./sink-DHPiMgU0.mjs";
-import { record } from "rrweb";
-//#region ../browser-session/src/replay/capture/console.ts
-const LEVELS = [
-	"log",
-	"info",
-	"warn",
-	"error",
-	"debug"
-];
-const MAX_MESSAGE = 2e3;
-/** No array logged into a 2,000-character message needs more elements than this. */
-const MAX_ARRAY_ELEMENTS = 100;
-/**
-* 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 boundedStringify(a, MAX_MESSAGE) ?? String(a);
-		} catch {
-			return String(a);
-		}
-	}).join(" ");
-	return text.length > MAX_MESSAGE ? `${text.slice(0, MAX_MESSAGE)}…` : text;
-}
-/**
-* `JSON.stringify` that stops descending once roughly `budget` characters have
-* been produced. The message is cut to `MAX_MESSAGE` anyway, and serializing a
-* whole store object on every `console.log` first was a main-thread cost paid
-* on the host app's hot path. A replacer returning `undefined` skips a value
-* without visiting its children, so the walk is bounded by the budget.
-*/
-function boundedStringify(value, budget) {
-	let used = 0;
-	return JSON.stringify(value, (key, nested) => {
-		if (used > budget) return void 0;
-		used += key.length + (typeof nested === "string" ? nested.length : 4);
-		if (Array.isArray(nested) && nested.length > MAX_ARRAY_ELEMENTS) return nested.slice(0, MAX_ARRAY_ELEMENTS);
-		return nested;
-	});
-}
-//#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 ambientTraceId = activeTraceId();
-		const start = performance.now();
-		let traceId = ambientTraceId;
-		try {
-			const call = withStartedTraceId(() => origFetch(input, init));
-			traceId = call.traceId ?? ambientTraceId;
-			const res = await call.result;
-			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();
-			let traceId = activeTraceId();
-			this.addEventListener("loadend", () => {
-				record(meta.__mapleUrl ?? "", meta.__mapleMethod ?? "GET", this.status, start, traceId);
-			});
-			const call = withStartedTraceId(() => origSend.apply(this, args));
-			traceId = call.traceId ?? traceId;
-			return call.result;
-		};
-	}
-	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 META = 4;
-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();
-		let gzipped;
-		try {
-			gzipped = await gzip(new TextEncoder().encode(body));
-		} catch (error) {
-			warnDropped("chunk compression", error);
-			return;
-		}
-		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;
-			if (e.type === META && e.data && typeof e.data.href === "string") e.data.href = scrubUrl(e.data.href);
-			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,
-		blockSelector: BLOCK_SELECTOR,
-		...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,
-		getIdentity: options.getIdentity
-	};
-	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 };