@loggerjs/browser 0.0.2 → 0.3.0

package/dist/index.cjs

@@ -186,8 +186,9 @@ function browserHttpTransport(options) {
 	let flushing = false;
 	let replayingOffline = false;
 	let lastContext;
-	const headers = () => ({
-		"content-type": codec.contentType,
+	const headers = (payloadHeaders, contentType = codec.contentType) => ({
+		"content-type": contentType,
+		...payloadHeaders,
 		...options.headers
 	});
 	const clearTimer = () => {
@@ -268,33 +269,40 @@ function browserHttpTransport(options) {
 		});
 		if (!response.ok) throw new Error(`browserHttpTransport failed with status ${response.status}`);
 	};
-	const createOfflineEntry = (payload) => ({
+	const encodeTransformedPayload = async (batch) => {
+		return (0, _loggerjs_core.applyPayloadTransforms)(codec.encode(batch), {
+			contentType: codec.contentType,
+			events: batch,
+			transport: options.name ?? "browser-http"
+		}, options.transformPayload);
+	};
+	const createOfflineEntry = (payload, payloadHeaders, contentType) => ({
 		id: `${Date.now().toString(36)}-${(offlineEntrySeq++).toString(36)}`,
 		url: options.url,
 		method: options.method ?? "POST",
-		headers: headers(),
+		headers: headers(payloadHeaders, contentType),
 		body: payload,
 		credentials: options.credentials,
 		keepalive: options.keepalive ?? true,
 		createdAt: Date.now()
 	});
-	const enqueueOfflinePayload = async (payload) => {
+	const enqueueOfflinePayload = async (payload, payloadHeaders, contentType) => {
 		if (!offlineQueue) return false;
-		await offlineQueue.enqueue(createOfflineEntry(payload));
+		await offlineQueue.enqueue(createOfflineEntry(payload, payloadHeaders, contentType));
 		(0, _loggerjs_core.incrementLoggerMetaCounter)("transport.offline.queued");
 		return true;
 	};
 	const sendFetchBatch = async (batch) => {
 		if (batch.length === 0) return;
-		const payload = codec.encode(batch);
+		const transformed = await encodeTransformedPayload(batch);
 		if (offlineQueue && typeof navigator !== "undefined" && navigator.onLine === false) {
-			await enqueueOfflinePayload(payload);
+			await enqueueOfflinePayload(transformed.payload, transformed.headers, transformed.contentType);
 			return;
 		}
 		try {
-			await sendPayload(createOfflineEntry(payload));
+			await sendPayload(createOfflineEntry(transformed.payload, transformed.headers, transformed.contentType));
 		} catch (error) {
-			if (await enqueueOfflinePayload(payload)) return;
+			if (await enqueueOfflinePayload(transformed.payload, transformed.headers, transformed.contentType)) return;
 			throw error;
 		}
 	};
@@ -330,14 +338,18 @@ function browserHttpTransport(options) {
 		flushing = true;
 		clearTimer();
 		const batch = queue.splice(0, queue.length);
+		let pendingBatch = batch;
 		try {
-			let fetchBatch = batch;
-			if (preferBeacon) {
+			if (preferBeacon && !options.transformPayload) {
 				const beaconResult = sendBeaconBatch(batch);
 				if (beaconResult.ok || beaconResult.remaining.length === 0) return;
-				fetchBatch = beaconResult.remaining;
+				pendingBatch = beaconResult.remaining;
 			}
-			await sendFetchBatch(fetchBatch);
+			await sendFetchBatch(pendingBatch);
+			pendingBatch = [];
+		} catch (error) {
+			if (pendingBatch.length > 0) queue.unshift(...pendingBatch);
+			throw error;
 		} finally {
 			flushing = false;
 			if (queue.length > 0) schedule();
@@ -393,6 +405,31 @@ function browserHttpTransport(options) {
 	};
 }
 //#endregion
+//#region src/payload-transforms.ts
+async function compressWithStream(payload, format, streamFactory) {
+	const stream = (streamFactory ?? ((nextFormat) => {
+		if (typeof CompressionStream === "undefined") throw new Error("CompressionStream is not available in this browser");
+		return new CompressionStream(nextFormat);
+	}))(format);
+	const writer = stream.writable.getWriter();
+	await writer.write(Uint8Array.from(payload));
+	await writer.close();
+	return new Uint8Array(await new Response(stream.readable).arrayBuffer());
+}
+function browserCompressionPayloadTransform(options = {}) {
+	const format = options.format ?? "gzip";
+	return async (payload, context) => ({
+		payload: await (options.compress ? options.compress((0, _loggerjs_core.encodedPayloadToUint8Array)(payload), {
+			...context,
+			format
+		}) : compressWithStream((0, _loggerjs_core.encodedPayloadToUint8Array)(payload), format, options.streamFactory)),
+		headers: {
+			"content-encoding": format,
+			...options.headers
+		}
+	});
+}
+//#endregion
 //#region src/service-worker-transport.ts
 let sourceSequence = 0;
 function createSourceId() {
@@ -433,7 +470,7 @@ function browserServiceWorkerTransport(options = {}) {
 	const mapBatch = options.mapBatch ?? defaultMapBatch;
 	const queue = [];
 	let readyWorker;
-	let readyStarted = false;
+	let readyPromise;
 	let lastContext;
 	const reportError = (error, context, operation, droppedEvents = 0) => {
 		try {
@@ -484,27 +521,35 @@ function browserServiceWorkerTransport(options = {}) {
 			post(worker, item, context);
 		}
 	};
-	const startReady = (context) => {
-		if (target !== "ready" || readyStarted) return;
-		readyStarted = true;
+	const dropQueued = (reason) => {
+		const pending = queue.splice(0);
+		for (const item of pending) reportDrop(item, reason);
+		return pending.reduce((total, item) => total + item.events.length, 0);
+	};
+	const waitForReady = (context) => {
+		if (currentWorker()) return Promise.resolve();
+		if (target !== "ready") return Promise.reject(/* @__PURE__ */ new Error("service worker controller is not available"));
+		if (readyPromise) return readyPromise;
 		const container = options.serviceWorker ?? serviceWorkerContainer();
 		if (!container?.ready) {
-			reportError(/* @__PURE__ */ new Error("serviceWorker.ready is not available"), context, "ready");
-			return;
+			const error = /* @__PURE__ */ new Error("serviceWorker.ready is not available");
+			reportError(error, context, "ready", dropQueued("ready"));
+			return Promise.reject(error);
 		}
-		container.ready.then((registration) => {
+		readyPromise = container.ready.then((registration) => {
 			readyWorker = workerFromRegistration(registration);
-			if (!readyWorker) {
-				const pending = queue.splice(0);
-				for (const item of pending) reportDrop(item, "unavailable");
-				return;
-			}
-			drain(context);
+			if (!readyWorker) throw new Error("service worker registration has no active worker");
+			drain(context ?? lastContext);
 		}).catch((error) => {
-			const pending = queue.splice(0);
-			for (const item of pending) reportDrop(item, "ready");
-			reportError(error, context, "ready", pending.reduce((total, item) => total + item.events.length, 0));
+			readyPromise = void 0;
+			const droppedEvents = dropQueued("ready");
+			reportError(error, context ?? lastContext, "ready", droppedEvents);
+			throw error;
 		});
+		return readyPromise;
+	};
+	const startReady = (context) => {
+		waitForReady(context).catch(() => {});
 	};
 	const enqueue = (item) => {
 		if (queue.length >= maxQueueSize) {
@@ -538,6 +583,9 @@ function browserServiceWorkerTransport(options = {}) {
 		queueSize() {
 			return queue.length;
 		},
+		ready() {
+			return waitForReady();
+		},
 		log(event, context) {
 			send({
 				events: [event],
@@ -1330,6 +1378,14 @@ function indexedDbTransport(options = {}) {
 			clearTimer();
 			await withStore("readwrite", (store) => requestToPromise(store.clear()));
 		},
+		async remove(ids) {
+			await flushPending();
+			const items = typeof ids === "string" ? [ids] : ids;
+			if (items.length === 0) return;
+			await withStore("readwrite", async (store) => {
+				for (const id of items) await requestToPromise(store.delete(id));
+			});
+		},
 		async *query(queryOptions = {}) {
 			await flushPending();
 			const startedAt = nowMs$1();
@@ -1361,6 +1417,150 @@ function indexedDbTransport(options = {}) {
 	};
 }
 //#endregion
+//#region src/offline-first-transport.ts
+function normalizeBatchSize(value) {
+	if (value === void 0 || !Number.isFinite(value) || value <= 0) return 100;
+	return Math.floor(value);
+}
+async function collectBatch(queue, replayBatchSize) {
+	const events = [];
+	for await (const event of queue.query({
+		order: "asc",
+		limit: replayBatchSize
+	})) events.push(event);
+	return events;
+}
+function isBrowserOnline(options) {
+	if (options.online) return options.online();
+	if (typeof navigator === "undefined") return true;
+	return navigator.onLine !== false;
+}
+function offlineFirstTransport(remote, options = {}) {
+	const name = options.name ?? `offline-first(${remote.name ?? "transport"})`;
+	const replayBatchSize = normalizeBatchSize(options.replayBatchSize);
+	const queue = options.queue ?? indexedDbTransport({
+		dbName: "loggerjs-offline",
+		flushIntervalMs: 0,
+		name: `${name}:queue`,
+		storeName: "offline-events",
+		...options.queueOptions
+	});
+	const reliableRemote = (0, _loggerjs_core.retryTransport)(remote, {
+		maxRetries: 2,
+		retryBaseDelayMs: 250,
+		retryMaxDelayMs: 5e3,
+		...options.retry,
+		name: `${name}:remote`
+	});
+	let lastContext;
+	let replayPromise;
+	const replayContext = {
+		loggerName: name,
+		now: () => Date.now(),
+		toEvent: _loggerjs_core.recordToEvent,
+		reportInternalError() {}
+	};
+	const contextForReplay = () => lastContext ?? replayContext;
+	const reportInternalError = (error, operation) => {
+		contextForReplay().reportInternalError(error, {
+			phase: "transport",
+			transport: name,
+			operation
+		});
+	};
+	const queueEvent = async (event, context, error) => {
+		await queue.log(event, context);
+		await queue.flush?.();
+		(0, _loggerjs_core.incrementLoggerMetaCounter)("transport.offline.queued");
+		options.onQueued?.(event, error);
+	};
+	const sendRemoteBatch = async (events, context) => {
+		await reliableRemote.logBatch?.([...events], context);
+	};
+	const sendOrQueue = async (event, context) => {
+		lastContext = context;
+		if (!isBrowserOnline(options)) {
+			await queueEvent(event, context);
+			return;
+		}
+		try {
+			await reliableRemote.log?.(event, context);
+		} catch (error) {
+			(0, _loggerjs_core.incrementLoggerMetaCounter)("transport.offline.remote.failed");
+			await queueEvent(event, context, error);
+		}
+	};
+	const replay = async () => {
+		if (replayPromise) return replayPromise;
+		replayPromise = (async () => {
+			if (!isBrowserOnline(options)) return;
+			const context = contextForReplay();
+			await queue.flush?.();
+			for (;;) {
+				const batch = await collectBatch(queue, replayBatchSize);
+				if (batch.length === 0) return;
+				try {
+					await sendRemoteBatch(batch, context);
+					await queue.remove(batch.map((event) => event.id));
+					(0, _loggerjs_core.incrementLoggerMetaCounter)("transport.offline.replayed", batch.length);
+					options.onReplayed?.(batch);
+				} catch (error) {
+					(0, _loggerjs_core.incrementLoggerMetaCounter)("transport.offline.replay.failed");
+					reportInternalError(error, "replay");
+					throw error;
+				}
+			}
+		})().finally(() => {
+			replayPromise = void 0;
+		});
+		return replayPromise;
+	};
+	const onOnline = () => {
+		replay().catch((error) => reportInternalError(error, "online-replay"));
+	};
+	if (options.replayOnOnline ?? true) globalThis.addEventListener?.("online", onOnline);
+	return {
+		name,
+		minLevel: options.minLevel ?? remote.minLevel,
+		queue,
+		write(record, context) {
+			return sendOrQueue(context.toEvent(record), context);
+		},
+		writeBatch(records, context) {
+			return Promise.all(records.map((record) => sendOrQueue(context.toEvent(record), context))).then(() => void 0);
+		},
+		log(event, context) {
+			if (options.minLevel !== void 0 && event.level < (0, _loggerjs_core.toLevelValue)(options.minLevel)) return;
+			return sendOrQueue(event, context);
+		},
+		logBatch(events, context) {
+			return Promise.all(events.map((event) => options.minLevel !== void 0 && event.level < (0, _loggerjs_core.toLevelValue)(options.minLevel) ? void 0 : sendOrQueue(event, context))).then(() => void 0);
+		},
+		replay,
+		async flush() {
+			await replay();
+			await reliableRemote.flush?.();
+			await queue.flush?.();
+		},
+		flushSync() {
+			reliableRemote.flushSync?.();
+		},
+		async close() {
+			globalThis.removeEventListener?.("online", onOnline);
+			await replay();
+			await reliableRemote.close?.();
+			await queue.close?.();
+		},
+		async queuedCount() {
+			await queue.flush?.();
+			return queue.count?.();
+		},
+		async clearQueue() {
+			await queue.clear?.();
+		}
+	};
+}
+//#endregion
 //#region src/zip-export.ts
 const ZIP_UTF8_FLAG = 2048;
 const ZIP_STORE_METHOD = 0;
@@ -1688,6 +1888,79 @@ function captureConsoleIntegration(options = {}) {
 	};
 }
 //#endregion
+//#region src/context-propagation-integration.ts
+const defaultActionEvents = [
+	"click",
+	"input",
+	"change",
+	"submit"
+];
+let fallbackIdSeq = 0;
+function defaultIdFactory() {
+	const cryptoRandomUUID = globalThis.crypto?.randomUUID;
+	if (cryptoRandomUUID) return cryptoRandomUUID.call(globalThis.crypto);
+	return `${Date.now().toString(36)}-${(fallbackIdSeq++).toString(36)}`;
+}
+function resolveValue(value) {
+	return typeof value === "function" ? value() : value;
+}
+function normalizeBaggage(value) {
+	if (typeof value === "string") return (0, _loggerjs_core.parseBaggage)(value);
+	return value;
+}
+function actionTargetName(target) {
+	const item = target;
+	if (!item) return void 0;
+	return item.id || item.name || item.tagName?.toLowerCase();
+}
+function browserContextPropagationIntegration(options = {}) {
+	const actionEvents = options.actionEvents ?? defaultActionEvents;
+	const actionTtlMs = Math.max(0, Math.floor(options.actionTtlMs ?? 5e3));
+	const clock = options.clock ?? Date.now;
+	const idFactory = options.idFactory ?? defaultIdFactory;
+	let lastAction;
+	return {
+		name: "browser-context-propagation",
+		setup() {
+			const root = options.root ?? globalThis.document;
+			const disposeProvider = (0, _loggerjs_core.addContextProvider)(() => {
+				const sessionId = resolveValue(options.sessionId);
+				const requestId = options.requestId?.();
+				const trace = resolveValue(options.trace) ?? (0, _loggerjs_core.parseTraceparent)(resolveValue(options.traceparent));
+				const baggage = normalizeBaggage(resolveValue(options.baggage)) ?? trace?.baggage;
+				const traceparent = (0, _loggerjs_core.formatTraceparent)(trace);
+				const now = clock();
+				const action = lastAction && now - lastAction.time <= actionTtlMs ? {
+					actionId: lastAction.id,
+					actionType: lastAction.type,
+					actionTarget: lastAction.target
+				} : void 0;
+				return {
+					sessionId,
+					requestId,
+					traceparent,
+					baggage: (0, _loggerjs_core.formatBaggage)(baggage),
+					...action
+				};
+			});
+			if (!root?.addEventListener || !root.removeEventListener || actionEvents.length === 0) return disposeProvider;
+			const onAction = (event) => {
+				lastAction = {
+					id: idFactory(),
+					type: event.type,
+					target: actionTargetName(event.target),
+					time: clock()
+				};
+			};
+			for (const event of actionEvents) root.addEventListener(event, onAction, true);
+			return () => {
+				for (const event of actionEvents) root.removeEventListener(event, onAction, true);
+				disposeProvider();
+			};
+		}
+	};
+}
+//#endregion
 //#region src/error-integration.ts
 function resourceInfo(target) {
 	const element = target;
@@ -2098,6 +2371,86 @@ function captureFrameworkErrorsIntegration(options = {}) {
 	};
 }
 //#endregion
+//#region src/framework-router-integrations.ts
+function routePath(input) {
+	if (typeof input === "string") return input;
+	if (input && typeof input === "object") {
+		const route = input;
+		if (typeof route.fullPath === "string") return route.fullPath;
+		if (typeof route.pathname === "string") return route.pathname;
+		if (typeof route.path === "string") return route.path;
+		if (route.location) return routePath(route.location);
+	}
+	return "";
+}
+function emitRouteChange(api, framework, level, to, from, options) {
+	const sanitize = options.sanitizeUrl;
+	const toPath = sanitize ? sanitize(routePath(to)) : routePath(to);
+	const fromPath = from === void 0 ? void 0 : sanitize ? sanitize(routePath(from)) : routePath(from);
+	api.capture({
+		level,
+		message: `${framework} route ${toPath}`,
+		props: { browser: {
+			kind: "framework-route-change",
+			framework,
+			route: {
+				to: toPath,
+				from: fromPath,
+				state: options.includeState ? (0, _loggerjs_core.normalizeValue)(to, { maxDepth: 4 }) : void 0
+			}
+		} }
+	});
+}
+function nextRouterIntegration(options) {
+	const level = options.level ?? "info";
+	return {
+		name: "next-router",
+		setup(api) {
+			const router = options.router;
+			if (!router.events?.on || !router.events.off) return;
+			const onRoute = api.guard((url) => emitRouteChange(api, "next", level, url, router.asPath, options));
+			router.events.on("routeChangeComplete", onRoute);
+			router.events.on("hashChangeComplete", onRoute);
+			return () => {
+				router.events?.off?.("routeChangeComplete", onRoute);
+				router.events?.off?.("hashChangeComplete", onRoute);
+			};
+		}
+	};
+}
+function reactRouterIntegration(options) {
+	const level = options.level ?? "info";
+	return {
+		name: "react-router",
+		setup(api) {
+			let previous = options.history.location;
+			const dispose = options.history.listen?.(api.guard((update) => {
+				const next = update?.location ?? update;
+				emitRouteChange(api, "react-router", level, next, previous, options);
+				previous = next;
+			}));
+			return typeof dispose === "function" ? dispose : void 0;
+		}
+	};
+}
+function vueRouterIntegration(options) {
+	const level = options.level ?? "info";
+	const framework = options.framework ?? "vue-router";
+	return {
+		name: framework,
+		setup(api) {
+			const dispose = options.router.afterEach?.(api.guard((to, from) => emitRouteChange(api, framework, level, to, from, options)));
+			return typeof dispose === "function" ? dispose : void 0;
+		}
+	};
+}
+function nuxtRouterIntegration(options) {
+	return vueRouterIntegration({
+		...options,
+		framework: "nuxt"
+	});
+}
+//#endregion
 //#region src/reporting-integration.ts
 const defaultReportTypes = [
 	"csp-violation",
@@ -3115,6 +3468,8 @@ function pageLifecycleIntegration(options = {}) {
 }
 //#endregion
 exports.browserBroadcastChannelTransport = browserBroadcastChannelTransport;
+exports.browserCompressionPayloadTransform = browserCompressionPayloadTransform;
+exports.browserContextPropagationIntegration = browserContextPropagationIntegration;
 exports.browserHttpTransport = browserHttpTransport;
 exports.browserServiceWorkerTransport = browserServiceWorkerTransport;
 exports.browserWebSocketTransport = browserWebSocketTransport;
@@ -3137,8 +3492,13 @@ exports.exportLogsToZip = exportLogsToZip;
 exports.indexedDbBrowserHttpOfflineQueue = indexedDbBrowserHttpOfflineQueue;
 exports.indexedDbTransport = indexedDbTransport;
 exports.memoryBrowserHttpOfflineQueue = memoryBrowserHttpOfflineQueue;
+exports.nextRouterIntegration = nextRouterIntegration;
 exports.normalizeBrowserPerformanceEntry = normalizeBrowserPerformanceEntry;
+exports.nuxtRouterIntegration = nuxtRouterIntegration;
+exports.offlineFirstTransport = offlineFirstTransport;
 exports.pageLifecycleIntegration = pageLifecycleIntegration;
+exports.reactRouterIntegration = reactRouterIntegration;
+exports.vueRouterIntegration = vueRouterIntegration;
 Object.keys(_loggerjs_core).forEach(function(k) {
 	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,