@flareapp/vue 2.6.0 → 2.8.0

package/README.md

@@ -54,6 +54,53 @@ See the [JavaScript identifying-users docs](https://flareapp.io/docs/javascript/
 
 Full documentation on the Vue error handler and its options is available at [flareapp.io/docs/vue/general/installation](https://flareapp.io/docs/vue/general/installation).
 
+## Component profiling
+
+Record a span per component mount, nested under the active page-load or navigation trace. Requires tracing
+(`enableTracing: true`) and an allowlist:
+
+```js
+app.use(flareVue, {
+    router,
+    profileComponents: ['ProductPage', 'CartPage', /^Checkout/],
+});
+```
+
+`app.use(flareVue, …)` and `flare.configure({ enableTracing: true })` can run in either order. Installing
+the plugin first is fine: the router guards and the profiler hook stay idle until tracing is on.
+
+Strings match the component name exactly. Regular expressions match by `test()`. `true` profiles every named
+component, which is useful when exploring but will hit the 1024 span per trace cap on a real page and bury the
+spans you care about.
+
+Names come from the same resolution the error reports use: the name the SFC compiler derives from the filename,
+then an explicit `name` option, then `AnonymousComponent`. Renaming a component silently stops profiling it.
+
+Only mounts are recorded. Updates, `<KeepAlive>` reactivation and unmounts are not.
+
+A component that mounts later inside an already-mounted profiled ancestor still nests under that ancestor, whose
+own span closed when it finished mounting. The tree is correct, but the waterfall shows the child starting after
+its parent ended. A page body swapped inside a persistent layout is the usual way to see this.
+
+**Async components and `<Suspense>`:** Vue treats a component as mounted once its _synchronous_ children
+are mounted. A component with an async `setup()`, or one inside a `<Suspense>` boundary, therefore mounts
+after its profiled ancestor's span has closed, so it appears after its parent in the waterfall. If the
+whole trace closed by then, the span is dropped rather than attached to a finished trace.
+
+### Naming with Inertia
+
+Inertia names navigation spans after the page component from its page object, so a root reads `Products/Show`.
+Vue names components after the file, so `./Pages/Products/Show.vue` is `Show`, and `./Pages/Orders/Show.vue` is
+also `Show`. Set the name explicitly on page components if you want the two to read the same:
+
+```vue
+<script setup>
+defineOptions({ name: 'Products/Show' });
+</script>
+```
+
+Without it, spans use the bare filename, which is usually still readable because the root span disambiguates.
+
 ## Compatibility
 
 - Vue 3

package/dist/{FlareErrorBoundary-G0Jqt8zN.cjs → FlareErrorBoundary-BndkpJFI.cjs}

@@ -1,31 +1,14 @@
+let _flareapp_js_browser = require("@flareapp/js/browser");
 let _flareapp_core = require("@flareapp/core");
 let vue = require("vue");
+let _flareapp_core_util = require("@flareapp/core/util");
 
 //#region src/resolveFlare.ts
-let defaultProvider = null;
-function isDevMode() {
-	try {
-		return process.env.NODE_ENV !== "production";
-	} catch {
-		return false;
-	}
-}
-function registerDefaultFlare(provider) {
-	if (typeof window !== "undefined" && window.__flare) {
-		const message = "[flare] @flareapp/vue (web root) was imported in a renderer where the Electron bridge is present, pulling the keyed @flareapp/js singleton into the renderer. Import @flareapp/vue/inject and pass the @flareapp/electron/renderer instance instead.";
-		if (isDevMode()) throw new Error(message);
-		console.warn(message);
-	}
-	defaultProvider = provider;
-}
-function resolveFlare(explicit) {
-	if (explicit) return explicit;
-	if (defaultProvider) return defaultProvider();
-	throw new Error("[flare] No Flare instance available. Pass `flare` (e.g. from @flareapp/electron/renderer), or import @flareapp/vue (the package root) to use the @flareapp/js default singleton.");
-}
+const { registerDefaultFlare, resolveFlare } = (0, _flareapp_js_browser.createFlareResolver)({ packageName: "@flareapp/vue" });
 
 //#endregion
 //#region src/constants.ts
+/** Injected at build time via tsdown --env.PACKAGE_VERSION (reads package.json version). */
 const PACKAGE_VERSION = typeof process !== "undefined" && typeof process.env?.PACKAGE_VERSION !== "undefined" ? process.env.PACKAGE_VERSION : "?";
 const MAX_HIERARCHY_DEPTH = 50;
 const DEFAULT_PROPS_DENYLIST = /password|passwd|pwd|token|secret|authorization|\bauth\b|bearer|oauth|credentials?|cookie|api[-_]?key|private[-_]?key|session|csrf|xsrf|\bpin\b|\bssn\b|card[-_]?number|\bcvv\b/i;
@@ -122,51 +105,19 @@ function buildComponentHierarchy(instance) {
 
 //#endregion
 //#region src/serializeProps.ts
+/**
+* JSON-safe, redacted, size-bounded copy of a Vue component's props for the report payload. Delegates
+* to core safeClone (display mode) so the cycle / BigInt / throwing-getter safety is shared with core.
+*/
 function serializeProps(value, maxDepth, denylist = DEFAULT_PROPS_DENYLIST) {
-	return serialize(value, 0, maxDepth, /* @__PURE__ */ new WeakSet(), denylist);
-}
-function serialize(value, depth, maxDepth, seen, denylist) {
-	if (value === null) return null;
-	const type = typeof value;
-	if (type === "function") return "[Function]";
-	if (type === "symbol") return "[Symbol]";
-	if (type === "bigint") return value.toString();
-	if (type === "string") return truncateString(value);
-	if (type !== "object") return value;
-	if (seen.has(value)) return "[Circular]";
-	if (Array.isArray(value)) {
-		if (depth > maxDepth) return "[Array]";
-		seen.add(value);
-		const out = (value.length > MAX_PROP_ARRAY_LENGTH ? value.slice(0, MAX_PROP_ARRAY_LENGTH) : value).map((item) => serialize(item, depth + 1, maxDepth, seen, denylist));
-		if (value.length > MAX_PROP_ARRAY_LENGTH) out.push(`[… ${value.length - MAX_PROP_ARRAY_LENGTH} more items]`);
-		seen.delete(value);
-		return out;
-	}
-	if (!isPlainObject(value)) return "[Object]";
-	if (depth > maxDepth) return "[Object]";
-	seen.add(value);
-	const out = {};
-	const keys = Object.keys(value);
-	const limitedKeys = keys.length > MAX_PROP_OBJECT_KEYS ? keys.slice(0, MAX_PROP_OBJECT_KEYS) : keys;
-	for (const key of limitedKeys) {
-		if (denylist.test(key)) {
-			out[key] = "[redacted]";
-			continue;
-		}
-		out[key] = serialize(value[key], depth + 1, maxDepth, seen, denylist);
-	}
-	if (keys.length > MAX_PROP_OBJECT_KEYS) out["…"] = `[${keys.length - MAX_PROP_OBJECT_KEYS} more keys]`;
-	seen.delete(value);
-	return out;
-}
-function truncateString(value) {
-	if (value.length <= MAX_PROP_STRING_LENGTH) return value;
-	return `${value.slice(0, MAX_PROP_STRING_LENGTH)}…[truncated ${value.length - MAX_PROP_STRING_LENGTH} chars]`;
-}
-function isPlainObject(value) {
-	if (value === null || typeof value !== "object") return false;
-	const prototype = Object.getPrototypeOf(value);
-	return prototype === null || prototype === Object.prototype;
+	return (0, _flareapp_core.safeClone)(value, {
+		mode: "display",
+		maxDepth,
+		arrayCap: MAX_PROP_ARRAY_LENGTH,
+		objectKeyCap: MAX_PROP_OBJECT_KEYS,
+		stringCap: MAX_PROP_STRING_LENGTH,
+		denylist
+	});
 }
 
 //#endregion
@@ -189,6 +140,10 @@ function buildComponentHierarchyFrames(instance, options) {
 
 //#endregion
 //#region src/getErrorOrigin.ts
+/**
+* Vue's `info` is a human-readable string in dev (e.g. "render function") but a numeric/short code
+* in production. INFO_TO_ORIGIN maps both forms to a stable origin category.
+*/
 function getErrorOrigin(info) {
 	return INFO_TO_ORIGIN[info] ?? "unknown";
 }
@@ -196,6 +151,29 @@ function getErrorOrigin(info) {
 //#endregion
 //#region src/getRouteContext.ts
 const ROUTE_PARAMS_DEPTH = 2;
+/** vue-router allows a symbol route name; neither shape survives JSON, so convert both to a string. */
+function routeNameOf(value) {
+	if (typeof value === "string") return value;
+	if (typeof value === "symbol") return value.toString();
+	return null;
+}
+function matchedNames(matched) {
+	if (!Array.isArray(matched)) return [];
+	return matched.map((record) => {
+		if (!record || typeof record !== "object") return "unknown";
+		return routeNameOf(record.name) ?? "unknown";
+	});
+}
+function recordOrEmpty(value) {
+	if (!value || typeof value !== "object") return {};
+	return value;
+}
+/**
+* `router` is typed `unknown` because vue-router is an optional peer (importing it would force every
+* consumer to install it, and the runtime shape may differ across v4.x patches). The chained
+* type-guards read defensively so a missing or shimmed router yields `null` rather than throwing
+* inside an error handler.
+*/
 function getRouteContext(router, options = {}) {
 	if (!router || typeof router !== "object" || !("currentRoute" in router)) return null;
 	const currentRouteRef = router.currentRoute;
@@ -203,44 +181,180 @@ function getRouteContext(router, options = {}) {
 	const route = currentRouteRef.value;
 	if (!route || typeof route !== "object") return null;
 	const r = route;
-	const name = r.name;
 	const denylist = options.denylist ?? DEFAULT_PROPS_DENYLIST;
-	const params = r.params && typeof r.params === "object" ? r.params : {};
-	const query = r.query && typeof r.query === "object" ? r.query : {};
+	const redactedParams = (0, _flareapp_core.redactObjectValues)(recordOrEmpty(r.params), denylist);
+	const redactedQuery = (0, _flareapp_core.redactObjectValues)(recordOrEmpty(r.query), denylist);
 	return {
-		name: typeof name === "string" ? name : typeof name === "symbol" ? name.toString() : null,
+		name: routeNameOf(r.name),
 		path: typeof r.path === "string" ? r.path : "",
 		fullPath: typeof r.fullPath === "string" ? (0, _flareapp_core.redactUrlQuery)(r.fullPath, denylist) : "",
-		params: serializeProps(params, ROUTE_PARAMS_DEPTH, denylist),
-		query: serializeProps(query, ROUTE_PARAMS_DEPTH, denylist),
+		params: serializeProps(redactedParams, ROUTE_PARAMS_DEPTH, denylist),
+		query: serializeProps(redactedQuery, ROUTE_PARAMS_DEPTH, denylist),
 		hash: typeof r.hash === "string" ? r.hash : "",
-		matched: Array.isArray(r.matched) ? r.matched.map((record) => {
-			if (!record || typeof record !== "object") return "unknown";
-			const n = record.name;
-			return typeof n === "string" ? n : typeof n === "symbol" ? n.toString() : "unknown";
-		}) : []
+		matched: matchedNames(r.matched)
 	};
 }
 
 //#endregion
 //#region src/identify.ts
-const sdkTagged = /* @__PURE__ */ new WeakSet();
-const frameworkTagged = /* @__PURE__ */ new WeakSet();
+const tagger = (0, _flareapp_core.createIdentityTagger)({
+	sdkName: "@flareapp/vue",
+	sdkVersion: PACKAGE_VERSION,
+	frameworkName: _flareapp_core.FrameworkName.Vue
+});
+/** Web path: SDK identity only; the framework version (app.version) is only known at install time. */
 function registerVueSdkInfo(flare) {
-	if (sdkTagged.has(flare)) return;
-	sdkTagged.add(flare);
-	flare.setSdkInfo({
-		name: "@flareapp/vue",
-		version: PACKAGE_VERSION
-	});
+	tagger.registerSdkIdentity(flare);
 }
+/** Both paths tag the framework; never touches sdkInfo (would clobber an injected SDK name). */
 function tagVueFramework(flare, appVersion) {
-	if (frameworkTagged.has(flare)) return;
-	frameworkTagged.add(flare);
-	flare.setFramework({
-		name: "Vue",
-		version: appVersion
-	});
+	tagger.tagFramework(flare, appVersion);
+}
+
+//#endregion
+//#region src/profileVueComponents.ts
+const PROFILE = Symbol("flareComponentProfile");
+/** Only matched components store a marker, so unmatched ones, and functional components, which get
+*  no lifecycle hooks at all, need no code of their own. */
+function nearestMarker(instance) {
+	for (let node = instance.parent; node; node = node.parent) {
+		const state = node[PROFILE];
+		if (state) return state.marker;
+	}
+	return null;
+}
+/**
+* Record one `browser_component` span per matched component mount. `beforeMount` reserves the span id
+* and captures the start; `mounted` records it. Vue runs `beforeMount` top-down and `mounted` bottom-up,
+* so a parent's span encloses its SYNCHRONOUS descendants in time. Async components and anything under
+* `<Suspense>` are outside that contract: their span can start after the parent's ended, or be dropped
+* entirely when the root closed in the meantime. Nesting by parent id holds while the trace is the
+* same; a trace change re-homes a descendant to the live root instead of its dead-trace ancestor.
+*/
+function createComponentProfilerMixin(matches) {
+	return {
+		beforeMount() {
+			try {
+				const live = (0, _flareapp_js_browser.activeComponentRoot)();
+				if (!live) return;
+				const name = getComponentName(this);
+				if (!matches(name)) return;
+				const internal = this.$;
+				const parent = (0, _flareapp_js_browser.resolveComponentParent)(nearestMarker(internal), live) ?? live;
+				const spanId = (0, _flareapp_js_browser.reserveSpanId)(parent.traceId);
+				if (!spanId) return;
+				internal[PROFILE] = {
+					marker: {
+						traceId: parent.traceId,
+						parentSpanId: spanId
+					},
+					pending: {
+						name,
+						spanId,
+						startNano: (0, _flareapp_js_browser.nowNano)(),
+						parent
+					}
+				};
+			} catch {}
+		},
+		mounted() {
+			try {
+				const state = this.$[PROFILE];
+				const pending = state?.pending;
+				if (!state || !pending) return;
+				state.pending = null;
+				(0, _flareapp_js_browser.recordComponentSpan)({
+					name: pending.name,
+					spanId: pending.spanId,
+					parent: pending.parent,
+					startTimeUnixNano: pending.startNano,
+					endTimeUnixNano: (0, _flareapp_js_browser.nowNano)()
+				});
+			} catch {}
+		}
+	};
+}
+
+//#endregion
+//#region src/traceVueRouter.ts
+const NAVIGATION_CANCELLED = 8;
+/** Internal, wired through `flareVue({ router })`. Opens a held navigation root per route change,
+*  settled when the navigation confirms. */
+function traceVueRouter(router) {
+	if (!isVueRouter(router)) return () => {};
+	return (0, _flareapp_js_browser.instrumentOnce)(router, (track) => install(router, track));
+}
+/** Guards only what the integration calls unconditionally; `resolve` and `onError` stay optional. */
+function isVueRouter(router) {
+	if (typeof router !== "object" || router === null) return false;
+	return "beforeEach" in router && typeof router.beforeEach === "function" && "afterEach" in router && typeof router.afterEach === "function";
+}
+function install(router, track) {
+	const nav = (0, _flareapp_js_browser.registerNavigationSource)();
+	track(() => nav.unregister());
+	function routeNameFor(loc) {
+		return (0, _flareapp_js_browser.routeName)(() => loc.matched?.[loc.matched.length - 1]?.path, loc.path, hrefOf(loc));
+	}
+	function hrefOf(loc) {
+		const path = loc.fullPath ?? loc.path;
+		if (!path) return;
+		return (0, _flareapp_js_browser.resolveHref)(() => router.resolve?.(path)?.href, path);
+	}
+	function isInitial(from) {
+		return !from || !from.matched || from.matched.length === 0;
+	}
+	let sawInitial = false;
+	let inFlight = false;
+	try {
+		const current = router.currentRoute?.value;
+		if (current && current.matched && current.matched.length > 0) {
+			nav.setActiveRouteName(routeNameFor(current));
+			sawInitial = true;
+		}
+	} catch {}
+	track(router.beforeEach((0, _flareapp_js_browser.insulate)((to, from) => {
+		if (!sawInitial && isInitial(from)) {
+			nav.setActiveRouteName(routeNameFor(to));
+			return;
+		}
+		if (to.fullPath && from?.fullPath && to.fullPath === from.fullPath) return;
+		if (!inFlight) {
+			inFlight = true;
+			nav.startNavigation({
+				path: to.path,
+				url: hrefOf(to),
+				hold: true
+			});
+		}
+		nav.setActiveRouteName(routeNameFor(to));
+	})));
+	track(router.afterEach((0, _flareapp_js_browser.insulate)((to, from, failure) => {
+		if (!sawInitial && isInitial(from)) {
+			if (!failure) {
+				sawInitial = true;
+				nav.setActiveRouteName(routeNameFor(to));
+			}
+			return;
+		}
+		if (!inFlight) return;
+		if (!failure) {
+			inFlight = false;
+			nav.settleNavigation(routeNameFor(to));
+			return;
+		}
+		if (failure.type === NAVIGATION_CANCELLED) return;
+		inFlight = false;
+		nav.settleNavigation(routeNameFor(from));
+	})));
+	if (typeof router.onError === "function") track(router.onError((0, _flareapp_js_browser.insulate)(() => {
+		if (!inFlight) return;
+		inFlight = false;
+		const current = router.currentRoute?.value;
+		nav.settleNavigation(current ? routeNameFor(current) : {
+			name: "",
+			source: "url"
+		});
+	})));
 }
 
 //#endregion
@@ -255,7 +369,7 @@ function vueContextToAttributes(context) {
 	};
 	if (context.vue.componentProps) vue.componentProps = context.vue.componentProps;
 	if (context.vue.route) vue.route = context.vue.route;
-	return { "context.custom": { vue } };
+	return (0, _flareapp_core.toCustomContext)("vue", vue);
 }
 function vueWarningContextToAttributes(context) {
 	const vue = {
@@ -265,7 +379,7 @@ function vueWarningContextToAttributes(context) {
 		componentTrace: context.vue.componentTrace
 	};
 	if (context.vue.route) vue.route = context.vue.route;
-	return { "context.custom": { vue } };
+	return (0, _flareapp_core.toCustomContext)("vue", vue);
 }
 const installedApps = /* @__PURE__ */ new WeakSet();
 const flareVue = (app, options) => {
@@ -339,6 +453,15 @@ const flareVue = (app, options) => {
 			if (typeof initialWarnHandler === "function") initialWarnHandler(msg, instance, trace);
 		};
 	}
+	if (options?.router) try {
+		const stopRouterTracing = traceVueRouter(options.router);
+		if (typeof app.onUnmount === "function") app.onUnmount(stopRouterTracing);
+	} catch {}
+	const profile = options?.profileComponents;
+	if (!(profile === true || Array.isArray(profile) && profile.length > 0)) return;
+	try {
+		app.mixin(createComponentProfilerMixin((0, _flareapp_core_util.createComponentMatcher)(profile)));
+	} catch {}
 };
 
 //#endregion

package/dist/{FlareErrorBoundary-9LmNTGFB.mjs → FlareErrorBoundary-CO0ZV9lZ.mjs}

@@ -1,31 +1,14 @@
-import { convertToError, redactUrlQuery, resolveDenylist } from "@flareapp/core";
+import { activeComponentRoot, createFlareResolver, instrumentOnce, insulate, nowNano, recordComponentSpan, registerNavigationSource, reserveSpanId, resolveComponentParent, resolveHref, routeName } from "@flareapp/js/browser";
+import { FrameworkName, convertToError, createIdentityTagger, redactObjectValues, redactUrlQuery, resolveDenylist, safeClone, toCustomContext } from "@flareapp/core";
 import { defineComponent, getCurrentInstance, onErrorCaptured, ref, watch } from "vue";
+import { createComponentMatcher } from "@flareapp/core/util";
 
 //#region src/resolveFlare.ts
-let defaultProvider = null;
-function isDevMode() {
-	try {
-		return process.env.NODE_ENV !== "production";
-	} catch {
-		return false;
-	}
-}
-function registerDefaultFlare(provider) {
-	if (typeof window !== "undefined" && window.__flare) {
-		const message = "[flare] @flareapp/vue (web root) was imported in a renderer where the Electron bridge is present, pulling the keyed @flareapp/js singleton into the renderer. Import @flareapp/vue/inject and pass the @flareapp/electron/renderer instance instead.";
-		if (isDevMode()) throw new Error(message);
-		console.warn(message);
-	}
-	defaultProvider = provider;
-}
-function resolveFlare(explicit) {
-	if (explicit) return explicit;
-	if (defaultProvider) return defaultProvider();
-	throw new Error("[flare] No Flare instance available. Pass `flare` (e.g. from @flareapp/electron/renderer), or import @flareapp/vue (the package root) to use the @flareapp/js default singleton.");
-}
+const { registerDefaultFlare, resolveFlare } = createFlareResolver({ packageName: "@flareapp/vue" });
 
 //#endregion
 //#region src/constants.ts
+/** Injected at build time via tsdown --env.PACKAGE_VERSION (reads package.json version). */
 const PACKAGE_VERSION = typeof process !== "undefined" && typeof process.env?.PACKAGE_VERSION !== "undefined" ? process.env.PACKAGE_VERSION : "?";
 const MAX_HIERARCHY_DEPTH = 50;
 const DEFAULT_PROPS_DENYLIST = /password|passwd|pwd|token|secret|authorization|\bauth\b|bearer|oauth|credentials?|cookie|api[-_]?key|private[-_]?key|session|csrf|xsrf|\bpin\b|\bssn\b|card[-_]?number|\bcvv\b/i;
@@ -122,51 +105,19 @@ function buildComponentHierarchy(instance) {
 
 //#endregion
 //#region src/serializeProps.ts
+/**
+* JSON-safe, redacted, size-bounded copy of a Vue component's props for the report payload. Delegates
+* to core safeClone (display mode) so the cycle / BigInt / throwing-getter safety is shared with core.
+*/
 function serializeProps(value, maxDepth, denylist = DEFAULT_PROPS_DENYLIST) {
-	return serialize(value, 0, maxDepth, /* @__PURE__ */ new WeakSet(), denylist);
-}
-function serialize(value, depth, maxDepth, seen, denylist) {
-	if (value === null) return null;
-	const type = typeof value;
-	if (type === "function") return "[Function]";
-	if (type === "symbol") return "[Symbol]";
-	if (type === "bigint") return value.toString();
-	if (type === "string") return truncateString(value);
-	if (type !== "object") return value;
-	if (seen.has(value)) return "[Circular]";
-	if (Array.isArray(value)) {
-		if (depth > maxDepth) return "[Array]";
-		seen.add(value);
-		const out = (value.length > MAX_PROP_ARRAY_LENGTH ? value.slice(0, MAX_PROP_ARRAY_LENGTH) : value).map((item) => serialize(item, depth + 1, maxDepth, seen, denylist));
-		if (value.length > MAX_PROP_ARRAY_LENGTH) out.push(`[… ${value.length - MAX_PROP_ARRAY_LENGTH} more items]`);
-		seen.delete(value);
-		return out;
-	}
-	if (!isPlainObject(value)) return "[Object]";
-	if (depth > maxDepth) return "[Object]";
-	seen.add(value);
-	const out = {};
-	const keys = Object.keys(value);
-	const limitedKeys = keys.length > MAX_PROP_OBJECT_KEYS ? keys.slice(0, MAX_PROP_OBJECT_KEYS) : keys;
-	for (const key of limitedKeys) {
-		if (denylist.test(key)) {
-			out[key] = "[redacted]";
-			continue;
-		}
-		out[key] = serialize(value[key], depth + 1, maxDepth, seen, denylist);
-	}
-	if (keys.length > MAX_PROP_OBJECT_KEYS) out["…"] = `[${keys.length - MAX_PROP_OBJECT_KEYS} more keys]`;
-	seen.delete(value);
-	return out;
-}
-function truncateString(value) {
-	if (value.length <= MAX_PROP_STRING_LENGTH) return value;
-	return `${value.slice(0, MAX_PROP_STRING_LENGTH)}…[truncated ${value.length - MAX_PROP_STRING_LENGTH} chars]`;
-}
-function isPlainObject(value) {
-	if (value === null || typeof value !== "object") return false;
-	const prototype = Object.getPrototypeOf(value);
-	return prototype === null || prototype === Object.prototype;
+	return safeClone(value, {
+		mode: "display",
+		maxDepth,
+		arrayCap: MAX_PROP_ARRAY_LENGTH,
+		objectKeyCap: MAX_PROP_OBJECT_KEYS,
+		stringCap: MAX_PROP_STRING_LENGTH,
+		denylist
+	});
 }
 
 //#endregion
@@ -189,6 +140,10 @@ function buildComponentHierarchyFrames(instance, options) {
 
 //#endregion
 //#region src/getErrorOrigin.ts
+/**
+* Vue's `info` is a human-readable string in dev (e.g. "render function") but a numeric/short code
+* in production. INFO_TO_ORIGIN maps both forms to a stable origin category.
+*/
 function getErrorOrigin(info) {
 	return INFO_TO_ORIGIN[info] ?? "unknown";
 }
@@ -196,6 +151,29 @@ function getErrorOrigin(info) {
 //#endregion
 //#region src/getRouteContext.ts
 const ROUTE_PARAMS_DEPTH = 2;
+/** vue-router allows a symbol route name; neither shape survives JSON, so convert both to a string. */
+function routeNameOf(value) {
+	if (typeof value === "string") return value;
+	if (typeof value === "symbol") return value.toString();
+	return null;
+}
+function matchedNames(matched) {
+	if (!Array.isArray(matched)) return [];
+	return matched.map((record) => {
+		if (!record || typeof record !== "object") return "unknown";
+		return routeNameOf(record.name) ?? "unknown";
+	});
+}
+function recordOrEmpty(value) {
+	if (!value || typeof value !== "object") return {};
+	return value;
+}
+/**
+* `router` is typed `unknown` because vue-router is an optional peer (importing it would force every
+* consumer to install it, and the runtime shape may differ across v4.x patches). The chained
+* type-guards read defensively so a missing or shimmed router yields `null` rather than throwing
+* inside an error handler.
+*/
 function getRouteContext(router, options = {}) {
 	if (!router || typeof router !== "object" || !("currentRoute" in router)) return null;
 	const currentRouteRef = router.currentRoute;
@@ -203,44 +181,180 @@ function getRouteContext(router, options = {}) {
 	const route = currentRouteRef.value;
 	if (!route || typeof route !== "object") return null;
 	const r = route;
-	const name = r.name;
 	const denylist = options.denylist ?? DEFAULT_PROPS_DENYLIST;
-	const params = r.params && typeof r.params === "object" ? r.params : {};
-	const query = r.query && typeof r.query === "object" ? r.query : {};
+	const redactedParams = redactObjectValues(recordOrEmpty(r.params), denylist);
+	const redactedQuery = redactObjectValues(recordOrEmpty(r.query), denylist);
 	return {
-		name: typeof name === "string" ? name : typeof name === "symbol" ? name.toString() : null,
+		name: routeNameOf(r.name),
 		path: typeof r.path === "string" ? r.path : "",
 		fullPath: typeof r.fullPath === "string" ? redactUrlQuery(r.fullPath, denylist) : "",
-		params: serializeProps(params, ROUTE_PARAMS_DEPTH, denylist),
-		query: serializeProps(query, ROUTE_PARAMS_DEPTH, denylist),
+		params: serializeProps(redactedParams, ROUTE_PARAMS_DEPTH, denylist),
+		query: serializeProps(redactedQuery, ROUTE_PARAMS_DEPTH, denylist),
 		hash: typeof r.hash === "string" ? r.hash : "",
-		matched: Array.isArray(r.matched) ? r.matched.map((record) => {
-			if (!record || typeof record !== "object") return "unknown";
-			const n = record.name;
-			return typeof n === "string" ? n : typeof n === "symbol" ? n.toString() : "unknown";
-		}) : []
+		matched: matchedNames(r.matched)
 	};
 }
 
 //#endregion
 //#region src/identify.ts
-const sdkTagged = /* @__PURE__ */ new WeakSet();
-const frameworkTagged = /* @__PURE__ */ new WeakSet();
+const tagger = createIdentityTagger({
+	sdkName: "@flareapp/vue",
+	sdkVersion: PACKAGE_VERSION,
+	frameworkName: FrameworkName.Vue
+});
+/** Web path: SDK identity only; the framework version (app.version) is only known at install time. */
 function registerVueSdkInfo(flare) {
-	if (sdkTagged.has(flare)) return;
-	sdkTagged.add(flare);
-	flare.setSdkInfo({
-		name: "@flareapp/vue",
-		version: PACKAGE_VERSION
-	});
+	tagger.registerSdkIdentity(flare);
 }
+/** Both paths tag the framework; never touches sdkInfo (would clobber an injected SDK name). */
 function tagVueFramework(flare, appVersion) {
-	if (frameworkTagged.has(flare)) return;
-	frameworkTagged.add(flare);
-	flare.setFramework({
-		name: "Vue",
-		version: appVersion
-	});
+	tagger.tagFramework(flare, appVersion);
+}
+
+//#endregion
+//#region src/profileVueComponents.ts
+const PROFILE = Symbol("flareComponentProfile");
+/** Only matched components store a marker, so unmatched ones, and functional components, which get
+*  no lifecycle hooks at all, need no code of their own. */
+function nearestMarker(instance) {
+	for (let node = instance.parent; node; node = node.parent) {
+		const state = node[PROFILE];
+		if (state) return state.marker;
+	}
+	return null;
+}
+/**
+* Record one `browser_component` span per matched component mount. `beforeMount` reserves the span id
+* and captures the start; `mounted` records it. Vue runs `beforeMount` top-down and `mounted` bottom-up,
+* so a parent's span encloses its SYNCHRONOUS descendants in time. Async components and anything under
+* `<Suspense>` are outside that contract: their span can start after the parent's ended, or be dropped
+* entirely when the root closed in the meantime. Nesting by parent id holds while the trace is the
+* same; a trace change re-homes a descendant to the live root instead of its dead-trace ancestor.
+*/
+function createComponentProfilerMixin(matches) {
+	return {
+		beforeMount() {
+			try {
+				const live = activeComponentRoot();
+				if (!live) return;
+				const name = getComponentName(this);
+				if (!matches(name)) return;
+				const internal = this.$;
+				const parent = resolveComponentParent(nearestMarker(internal), live) ?? live;
+				const spanId = reserveSpanId(parent.traceId);
+				if (!spanId) return;
+				internal[PROFILE] = {
+					marker: {
+						traceId: parent.traceId,
+						parentSpanId: spanId
+					},
+					pending: {
+						name,
+						spanId,
+						startNano: nowNano(),
+						parent
+					}
+				};
+			} catch {}
+		},
+		mounted() {
+			try {
+				const state = this.$[PROFILE];
+				const pending = state?.pending;
+				if (!state || !pending) return;
+				state.pending = null;
+				recordComponentSpan({
+					name: pending.name,
+					spanId: pending.spanId,
+					parent: pending.parent,
+					startTimeUnixNano: pending.startNano,
+					endTimeUnixNano: nowNano()
+				});
+			} catch {}
+		}
+	};
+}
+
+//#endregion
+//#region src/traceVueRouter.ts
+const NAVIGATION_CANCELLED = 8;
+/** Internal, wired through `flareVue({ router })`. Opens a held navigation root per route change,
+*  settled when the navigation confirms. */
+function traceVueRouter(router) {
+	if (!isVueRouter(router)) return () => {};
+	return instrumentOnce(router, (track) => install(router, track));
+}
+/** Guards only what the integration calls unconditionally; `resolve` and `onError` stay optional. */
+function isVueRouter(router) {
+	if (typeof router !== "object" || router === null) return false;
+	return "beforeEach" in router && typeof router.beforeEach === "function" && "afterEach" in router && typeof router.afterEach === "function";
+}
+function install(router, track) {
+	const nav = registerNavigationSource();
+	track(() => nav.unregister());
+	function routeNameFor(loc) {
+		return routeName(() => loc.matched?.[loc.matched.length - 1]?.path, loc.path, hrefOf(loc));
+	}
+	function hrefOf(loc) {
+		const path = loc.fullPath ?? loc.path;
+		if (!path) return;
+		return resolveHref(() => router.resolve?.(path)?.href, path);
+	}
+	function isInitial(from) {
+		return !from || !from.matched || from.matched.length === 0;
+	}
+	let sawInitial = false;
+	let inFlight = false;
+	try {
+		const current = router.currentRoute?.value;
+		if (current && current.matched && current.matched.length > 0) {
+			nav.setActiveRouteName(routeNameFor(current));
+			sawInitial = true;
+		}
+	} catch {}
+	track(router.beforeEach(insulate((to, from) => {
+		if (!sawInitial && isInitial(from)) {
+			nav.setActiveRouteName(routeNameFor(to));
+			return;
+		}
+		if (to.fullPath && from?.fullPath && to.fullPath === from.fullPath) return;
+		if (!inFlight) {
+			inFlight = true;
+			nav.startNavigation({
+				path: to.path,
+				url: hrefOf(to),
+				hold: true
+			});
+		}
+		nav.setActiveRouteName(routeNameFor(to));
+	})));
+	track(router.afterEach(insulate((to, from, failure) => {
+		if (!sawInitial && isInitial(from)) {
+			if (!failure) {
+				sawInitial = true;
+				nav.setActiveRouteName(routeNameFor(to));
+			}
+			return;
+		}
+		if (!inFlight) return;
+		if (!failure) {
+			inFlight = false;
+			nav.settleNavigation(routeNameFor(to));
+			return;
+		}
+		if (failure.type === NAVIGATION_CANCELLED) return;
+		inFlight = false;
+		nav.settleNavigation(routeNameFor(from));
+	})));
+	if (typeof router.onError === "function") track(router.onError(insulate(() => {
+		if (!inFlight) return;
+		inFlight = false;
+		const current = router.currentRoute?.value;
+		nav.settleNavigation(current ? routeNameFor(current) : {
+			name: "",
+			source: "url"
+		});
+	})));
 }
 
 //#endregion
@@ -255,7 +369,7 @@ function vueContextToAttributes(context) {
 	};
 	if (context.vue.componentProps) vue.componentProps = context.vue.componentProps;
 	if (context.vue.route) vue.route = context.vue.route;
-	return { "context.custom": { vue } };
+	return toCustomContext("vue", vue);
 }
 function vueWarningContextToAttributes(context) {
 	const vue = {
@@ -265,7 +379,7 @@ function vueWarningContextToAttributes(context) {
 		componentTrace: context.vue.componentTrace
 	};
 	if (context.vue.route) vue.route = context.vue.route;
-	return { "context.custom": { vue } };
+	return toCustomContext("vue", vue);
 }
 const installedApps = /* @__PURE__ */ new WeakSet();
 const flareVue = (app, options) => {
@@ -339,6 +453,15 @@ const flareVue = (app, options) => {
 			if (typeof initialWarnHandler === "function") initialWarnHandler(msg, instance, trace);
 		};
 	}
+	if (options?.router) try {
+		const stopRouterTracing = traceVueRouter(options.router);
+		if (typeof app.onUnmount === "function") app.onUnmount(stopRouterTracing);
+	} catch {}
+	const profile = options?.profileComponents;
+	if (!(profile === true || Array.isArray(profile) && profile.length > 0)) return;
+	try {
+		app.mixin(createComponentProfilerMixin(createComponentMatcher(profile)));
+	} catch {}
 };
 
 //#endregion

package/dist/{constants-B6O_8KY6.d.cts → constants-BFiYPDOl.d.cts}

@@ -1,6 +1,7 @@
 import * as vue from "vue";
 import { ComponentPublicInstance, Plugin, PropType } from "vue";
 import { Flare } from "@flareapp/js/browser";
+import { ProfileComponentsOption } from "@flareapp/core/util";
 
 //#region src/types.d.ts
 type ErrorOrigin = 'setup' | 'render' | 'lifecycle' | 'event' | 'watcher' | 'unknown';
@@ -46,7 +47,14 @@ type FlareErrorBoundaryHookParams = {
   info: string;
 };
 type FlareVueOptions = {
-  flare?: Flare;
+  flare?: Flare; /** A vue-router Router instance. When set, enables navigation/pageload performance tracing. */
+  router?: unknown;
+  /**
+   * Record a span per component mount. An array matches component names exactly (string) or by
+   * `test()` (RegExp). `true` profiles every named component, which is a debugging aid: a real page
+   * will hit `maxSpansPerTrace` and bury the useful spans. Requires `enableTracing`.
+   */
+  profileComponents?: ProfileComponentsOption;
   captureWarnings?: boolean;
   attachProps?: boolean;
   propsMaxDepth?: number;

package/dist/{constants-DCI9dIQ_.d.mts → constants-CFWxnFRO.d.mts}

@@ -1,6 +1,7 @@
+import { Flare } from "@flareapp/js/browser";
 import * as vue from "vue";
 import { ComponentPublicInstance, Plugin, PropType } from "vue";
-import { Flare } from "@flareapp/js/browser";
+import { ProfileComponentsOption } from "@flareapp/core/util";
 
 //#region src/types.d.ts
 type ErrorOrigin = 'setup' | 'render' | 'lifecycle' | 'event' | 'watcher' | 'unknown';
@@ -46,7 +47,14 @@ type FlareErrorBoundaryHookParams = {
   info: string;
 };
 type FlareVueOptions = {
-  flare?: Flare;
+  flare?: Flare; /** A vue-router Router instance. When set, enables navigation/pageload performance tracing. */
+  router?: unknown;
+  /**
+   * Record a span per component mount. An array matches component names exactly (string) or by
+   * `test()` (RegExp). `true` profiles every named component, which is a debugging aid: a real page
+   * will hit `maxSpansPerTrace` and bury the useful spans. Requires `enableTracing`.
+   */
+  profileComponents?: ProfileComponentsOption;
   captureWarnings?: boolean;
   attachProps?: boolean;
   propsMaxDepth?: number;

package/dist/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_FlareErrorBoundary = require('./FlareErrorBoundary-G0Jqt8zN.cjs');
+const require_FlareErrorBoundary = require('./FlareErrorBoundary-BndkpJFI.cjs');
 let _flareapp_js = require("@flareapp/js");
 
 //#region src/index.ts

package/dist/index.d.cts

@@ -1,2 +1,2 @@
-import { a as ErrorOrigin, c as FlareVueContext, d as RouteContext, f as RouteParamValue, i as ComponentHierarchyFrame, l as FlareVueOptions, n as flareVue, o as FlareErrorBoundaryFallbackProps, p as RouteQueryValue, r as FlareErrorBoundary, s as FlareErrorBoundaryHookParams, t as DEFAULT_PROPS_DENYLIST, u as FlareVueWarningContext } from "./constants-B6O_8KY6.cjs";
+import { a as ErrorOrigin, c as FlareVueContext, d as RouteContext, f as RouteParamValue, i as ComponentHierarchyFrame, l as FlareVueOptions, n as flareVue, o as FlareErrorBoundaryFallbackProps, p as RouteQueryValue, r as FlareErrorBoundary, s as FlareErrorBoundaryHookParams, t as DEFAULT_PROPS_DENYLIST, u as FlareVueWarningContext } from "./constants-BFiYPDOl.cjs";
 export { type ComponentHierarchyFrame, DEFAULT_PROPS_DENYLIST, type ErrorOrigin, FlareErrorBoundary, type FlareErrorBoundaryFallbackProps, type FlareErrorBoundaryHookParams, type FlareVueContext, type FlareVueOptions, type FlareVueWarningContext, type RouteContext, type RouteParamValue, type RouteQueryValue, flareVue };

package/dist/index.d.mts

@@ -1,2 +1,2 @@
-import { a as ErrorOrigin, c as FlareVueContext, d as RouteContext, f as RouteParamValue, i as ComponentHierarchyFrame, l as FlareVueOptions, n as flareVue, o as FlareErrorBoundaryFallbackProps, p as RouteQueryValue, r as FlareErrorBoundary, s as FlareErrorBoundaryHookParams, t as DEFAULT_PROPS_DENYLIST, u as FlareVueWarningContext } from "./constants-DCI9dIQ_.mjs";
+import { a as ErrorOrigin, c as FlareVueContext, d as RouteContext, f as RouteParamValue, i as ComponentHierarchyFrame, l as FlareVueOptions, n as flareVue, o as FlareErrorBoundaryFallbackProps, p as RouteQueryValue, r as FlareErrorBoundary, s as FlareErrorBoundaryHookParams, t as DEFAULT_PROPS_DENYLIST, u as FlareVueWarningContext } from "./constants-CFWxnFRO.mjs";
 export { type ComponentHierarchyFrame, DEFAULT_PROPS_DENYLIST, type ErrorOrigin, FlareErrorBoundary, type FlareErrorBoundaryFallbackProps, type FlareErrorBoundaryHookParams, type FlareVueContext, type FlareVueOptions, type FlareVueWarningContext, type RouteContext, type RouteParamValue, type RouteQueryValue, flareVue };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { i as registerDefaultFlare, n as flareVue, r as DEFAULT_PROPS_DENYLIST, t as FlareErrorBoundary } from "./FlareErrorBoundary-9LmNTGFB.mjs";
+import { i as registerDefaultFlare, n as flareVue, r as DEFAULT_PROPS_DENYLIST, t as FlareErrorBoundary } from "./FlareErrorBoundary-CO0ZV9lZ.mjs";
 import { flare } from "@flareapp/js";
 
 //#region src/index.ts

package/dist/inject.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_FlareErrorBoundary = require('./FlareErrorBoundary-G0Jqt8zN.cjs');
+const require_FlareErrorBoundary = require('./FlareErrorBoundary-BndkpJFI.cjs');
 
 exports.DEFAULT_PROPS_DENYLIST = require_FlareErrorBoundary.DEFAULT_PROPS_DENYLIST;
 exports.FlareErrorBoundary = require_FlareErrorBoundary.FlareErrorBoundary;

package/dist/inject.d.cts

@@ -1,2 +1,2 @@
-import { a as ErrorOrigin, c as FlareVueContext, d as RouteContext, f as RouteParamValue, i as ComponentHierarchyFrame, l as FlareVueOptions, n as flareVue, o as FlareErrorBoundaryFallbackProps, p as RouteQueryValue, r as FlareErrorBoundary, s as FlareErrorBoundaryHookParams, t as DEFAULT_PROPS_DENYLIST, u as FlareVueWarningContext } from "./constants-B6O_8KY6.cjs";
+import { a as ErrorOrigin, c as FlareVueContext, d as RouteContext, f as RouteParamValue, i as ComponentHierarchyFrame, l as FlareVueOptions, n as flareVue, o as FlareErrorBoundaryFallbackProps, p as RouteQueryValue, r as FlareErrorBoundary, s as FlareErrorBoundaryHookParams, t as DEFAULT_PROPS_DENYLIST, u as FlareVueWarningContext } from "./constants-BFiYPDOl.cjs";
 export { type ComponentHierarchyFrame, DEFAULT_PROPS_DENYLIST, type ErrorOrigin, FlareErrorBoundary, type FlareErrorBoundaryFallbackProps, type FlareErrorBoundaryHookParams, type FlareVueContext, type FlareVueOptions, type FlareVueWarningContext, type RouteContext, type RouteParamValue, type RouteQueryValue, flareVue };

package/dist/inject.d.mts

@@ -1,2 +1,2 @@
-import { a as ErrorOrigin, c as FlareVueContext, d as RouteContext, f as RouteParamValue, i as ComponentHierarchyFrame, l as FlareVueOptions, n as flareVue, o as FlareErrorBoundaryFallbackProps, p as RouteQueryValue, r as FlareErrorBoundary, s as FlareErrorBoundaryHookParams, t as DEFAULT_PROPS_DENYLIST, u as FlareVueWarningContext } from "./constants-DCI9dIQ_.mjs";
+import { a as ErrorOrigin, c as FlareVueContext, d as RouteContext, f as RouteParamValue, i as ComponentHierarchyFrame, l as FlareVueOptions, n as flareVue, o as FlareErrorBoundaryFallbackProps, p as RouteQueryValue, r as FlareErrorBoundary, s as FlareErrorBoundaryHookParams, t as DEFAULT_PROPS_DENYLIST, u as FlareVueWarningContext } from "./constants-CFWxnFRO.mjs";
 export { type ComponentHierarchyFrame, DEFAULT_PROPS_DENYLIST, type ErrorOrigin, FlareErrorBoundary, type FlareErrorBoundaryFallbackProps, type FlareErrorBoundaryHookParams, type FlareVueContext, type FlareVueOptions, type FlareVueWarningContext, type RouteContext, type RouteParamValue, type RouteQueryValue, flareVue };

package/dist/inject.mjs

@@ -1,3 +1,3 @@
-import { n as flareVue, r as DEFAULT_PROPS_DENYLIST, t as FlareErrorBoundary } from "./FlareErrorBoundary-9LmNTGFB.mjs";
+import { n as flareVue, r as DEFAULT_PROPS_DENYLIST, t as FlareErrorBoundary } from "./FlareErrorBoundary-CO0ZV9lZ.mjs";
 
 export { DEFAULT_PROPS_DENYLIST, FlareErrorBoundary, flareVue };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flareapp/vue",
-    "version": "2.6.0",
+    "version": "2.8.0",
     "description": "Vue client for flareapp.io",
     "homepage": "https://flareapp.io",
     "bugs": "https://github.com/spatie/flare-client-js/issues",
@@ -62,11 +62,12 @@
         "verify:inject": "node scripts/verify-inject-no-root.mjs"
     },
     "dependencies": {
-        "@flareapp/core": "2.6.0"
+        "@flareapp/core": "2.8.0"
     },
     "devDependencies": {
         "@flareapp/electron": "file:../electron",
         "@flareapp/js": "file:../js",
+        "@flareapp/test-helpers": "*",
         "@vue/test-utils": "^2.4.0",
         "jsdom": "^26.1.0",
         "tsdown": "^0.20.3",
@@ -76,7 +77,7 @@
         "vue-router": "^5.0.0"
     },
     "peerDependencies": {
-        "@flareapp/js": "^2.6.0",
+        "@flareapp/js": "^2.8.0",
         "vue": "^3.0.0",
         "vue-router": "^4.0.0 || ^5.0.0"
     },