@flareapp/react 2.7.0 → 2.8.0

package/README.md

@@ -82,7 +82,59 @@ at [flareapp.io/docs/react/general/installation](https://flareapp.io/docs/react/
 
 - React 16, 17, 18, 19
 - `flareReactErrorHandler` requires React 19+
+- `withFlareProfiler` forwards `ref` on React 19 only
 
 ## License
 
 The MIT License (MIT). Please see [License File](../../LICENSE.md) for more information.
+
+## Component profiler (`@flareapp/react/profiler`)
+
+Opt-in mount profiling: wrap a component to record a `browser_component` span for
+its mount, nested under the active page-load / navigation trace. Requires tracing to be
+enabled (`enableTracing: true`).
+
+```tsx
+import { FlareProfiler, withFlareProfiler } from '@flareapp/react/profiler';
+
+// Wrap at the definition:
+export default withFlareProfiler(ProductPage);
+
+// Or wrap an inline subtree:
+<FlareProfiler name="Gallery">
+    <ProductGallery />
+</FlareProfiler>;
+```
+
+Spans nest into a tree: a profiled child nests under its nearest profiled ancestor;
+unprofiled components in between are transparent. A component with no active trace
+(tracing off, or no page-load/navigation root) records nothing and renders normally.
+
+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.
+
+**Import the main entry somewhere too.** `@flareapp/react/profiler` is deliberately dependency-free, so
+it does not register React as the framework. That identity (`flare.framework.name`) is what tells Flare a
+component span came from React, and importing `@flareapp/react` anywhere in the app sets it. An app that
+uses only the `/profiler` entry reports `js` instead, and its component spans are attributed to plain
+JavaScript rather than React.
+
+**Naming:** the span name is `name` (prop or `withFlareProfiler(Component, { name })`),
+then `Component.displayName`, then `Component.name`. Minified production builds can
+mangle `Component.name`, so pass an explicit `name` or set `displayName` for production.
+
+**Suspense (v1 limitation):** a `<Suspense>` boundary inside a profiled subtree can end a
+parent span before a suspended child resumes, so the child may appear outside its parent
+in the waterfall, and its duration includes the data wait. If the wait outlasts the
+trace's idle window the child span is dropped rather than attached to a closed trace.
+
+**Render-phase start:** the span starts when the component first renders, not when React commits it. A
+render React defers or discards (`useDeferredValue`, an interrupted transition, an `<Activity mode="hidden">`
+prerender revealed later) bills that whole gap to the component.
+
+**Refs and statics:** the wrapper is a plain function component. It forwards no `ref` through `forwardRef`
+and hoists no statics. On React 19 `ref` is a normal prop and passes straight through, so this only affects
+the React 16-18 half of the peer range; there, wrap with `FlareProfiler` inside the component instead of
+applying `withFlareProfiler` to it.

package/dist/{flareReactErrorHandler-CLRs3ATb.d.mts → flareReactErrorHandler-Ce0sCyMK.d.mts}

@@ -89,6 +89,10 @@ type FlareReactErrorHandlerOptions = {
     context: FlareReactContext;
   }) => void;
 };
+/**
+ * Callback shaped to match react-error-boundary's `onError` prop, so consumers using that library
+ * can report to Flare without our own boundary.
+ */
 declare function flareReactErrorHandler(options?: FlareReactErrorHandlerOptions): FlareReactErrorHandlerCallback;
 //#endregion
 export { FlareErrorBoundaryFallbackProps as a, FlareReactContext as c, FlareErrorBoundary as i, MinifiedReactError as l, FlareReactErrorHandlerOptions as n, FlareErrorBoundaryProps as o, flareReactErrorHandler as r, ComponentStackFrame as s, FlareReactErrorHandlerCallback as t };

package/dist/{flareReactErrorHandler-DDsrRIsz.d.cts → flareReactErrorHandler-CnFo8otu.d.cts}

@@ -89,6 +89,10 @@ type FlareReactErrorHandlerOptions = {
     context: FlareReactContext;
   }) => void;
 };
+/**
+ * Callback shaped to match react-error-boundary's `onError` prop, so consumers using that library
+ * can report to Flare without our own boundary.
+ */
 declare function flareReactErrorHandler(options?: FlareReactErrorHandlerOptions): FlareReactErrorHandlerCallback;
 //#endregion
 export { FlareErrorBoundaryFallbackProps as a, FlareReactContext as c, FlareErrorBoundary as i, MinifiedReactError as l, FlareReactErrorHandlerOptions as n, FlareErrorBoundaryProps as o, flareReactErrorHandler as r, ComponentStackFrame as s, FlareReactErrorHandlerCallback as t };

package/dist/{flareReactErrorHandler-e8mBB8Lg.cjs → flareReactErrorHandler-DBmb7u7U.cjs}

@@ -25,61 +25,52 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 
 //#endregion
+let _flareapp_core = require("@flareapp/core");
 let react = require("react");
 react = __toESM(react);
-let _flareapp_core = require("@flareapp/core");
+let _flareapp_js_browser = require("@flareapp/js/browser");
 
 //#region src/constants.ts
+/**
+* Chrome: `at ComponentName (http://localhost:5173/src/App.tsx:12:9)`; no source: `at div`.
+*/
 const CHROMIUM_STACK_REGEX = /^at\s+(\S+)(?:\s+\((.+):(\d+):(\d+)\))?$/;
+/**
+* Firefox/Safari: `ComponentName@http://localhost:5173/src/App.tsx:12:9`; no source: `div`.
+*/
 const FIREFOX_SAFARI_STACK_REGEX = /^(\S+?)@(.+):(\d+):(\d+)$/;
-const PACKAGE_VERSION = typeof process !== "undefined" && true ? "2.7.0" : "?";
+/**
+* React 16/17/18 synthetic component stack: `in ComponentName (at App.jsx:10)`; with an optional
+* column `in ComponentName (at App.jsx:10:5)`; no source: `in ComponentName`. These versions usually
+* emit a line only, so the column capture group is optional. The file capture is lazy so the trailing
+* `:line(:column)` binds to the numeric tail even when the file path itself contains colons. Without
+* `__source` React names the owner instead (`in App (created by Root)`), so that suffix is matched and
+* discarded; the group is greedy because an owner name can carry brackets of its own (`Connect(Form)`).
+*/
+const REACT_LEGACY_STACK_REGEX = /^in\s+(\S+)(?:\s+\(at\s+(.+?):(\d+)(?::(\d+))?\))?(?:\s+\(created by\s+.+\))?$/;
+/** Injected at build time via tsdown --env.PACKAGE_VERSION (reads package.json version). */
+const PACKAGE_VERSION = typeof process !== "undefined" && true ? "2.8.0" : "?";
 
 //#endregion
 //#region src/identify.ts
-const sdkTagged = /* @__PURE__ */ new WeakSet();
-const frameworkTagged = /* @__PURE__ */ new WeakSet();
+const tagger = (0, _flareapp_core.createIdentityTagger)({
+	sdkName: "@flareapp/react",
+	sdkVersion: PACKAGE_VERSION,
+	frameworkName: _flareapp_core.FrameworkName.React
+});
+/** Web path: full identity on the default singleton (sdk + framework). */
 function registerReactSdkIdentity(flare) {
-	if (!sdkTagged.has(flare)) {
-		sdkTagged.add(flare);
-		flare.setSdkInfo({
-			name: "@flareapp/react",
-			version: PACKAGE_VERSION
-		});
-	}
-	tagReactFramework(flare);
+	tagger.registerSdkIdentity(flare);
+	tagger.tagFramework(flare, react.version);
 }
+/** Injected path: framework tag only, never sdkInfo (would clobber the injected SDK name). */
 function tagReactFramework(flare) {
-	if (frameworkTagged.has(flare)) return;
-	frameworkTagged.add(flare);
-	flare.setFramework({
-		name: "React",
-		version: react.version
-	});
+	tagger.tagFramework(flare, react.version);
 }
 
 //#endregion
 //#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/react (web root) was imported in a renderer where the Electron bridge is present, pulling the keyed @flareapp/js singleton into the renderer. Import @flareapp/react/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/react (the package root) to use the @flareapp/js default singleton.");
-}
+const { registerDefaultFlare, resolveFlare } = (0, _flareapp_js_browser.createFlareResolver)({ packageName: "@flareapp/react" });
 
 //#endregion
 //#region src/formatComponentStack.ts
@@ -89,6 +80,12 @@ function formatComponentStack(stack) {
 
 //#endregion
 //#region src/parseComponentStack.ts
+/**
+* Parse React's newline-separated `errorInfo.componentStack` into structured frames so the Flare UI
+* can render file/line links. The line format is browser-native in React 19 (Chromium / Firefox /
+* Safari shapes) and React-synthetic in 16-18 (`in X (at File:line)`). Unrecognised lines fall back
+* to component-name-only rather than being dropped.
+*/
 function parseComponentStack(stack) {
 	return stack.split(/\s*\n\s*/g).filter((line) => line.length > 0).map((line) => {
 		const chromeMatch = line.match(CHROMIUM_STACK_REGEX);
@@ -105,6 +102,13 @@ function parseComponentStack(stack) {
 			line: Number(firefoxSafariMatch[3]),
 			column: Number(firefoxSafariMatch[4])
 		};
+		const reactLegacyMatch = line.match(REACT_LEGACY_STACK_REGEX);
+		if (reactLegacyMatch) return {
+			component: reactLegacyMatch[1],
+			file: reactLegacyMatch[2] ?? null,
+			line: reactLegacyMatch[3] ? Number(reactLegacyMatch[3]) : null,
+			column: reactLegacyMatch[4] ? Number(reactLegacyMatch[4]) : null
+		};
 		return {
 			component: line.replace(/^at\s+/, ""),
 			file: null,
@@ -128,11 +132,11 @@ function buildReactContext(rawStack) {
 //#region src/contextToAttributes.ts
 function contextToAttributes(context, minifiedError) {
 	return {
-		"context.custom": { react: {
+		...(0, _flareapp_core.toCustomContext)("react", {
 			componentStack: context.react.componentStack,
 			componentStackFrames: context.react.componentStackFrames,
 			...context.react.version ? { version: context.react.version } : {}
-		} },
+		}),
 		...minifiedError ? { "flare.exception.react_minified_error": {
 			number: minifiedError.number,
 			args: minifiedError.args,
@@ -147,20 +151,13 @@ function contextToAttributes(context, minifiedError) {
 const NUMBER_PATTERN = /Minified React error #(\d+)/;
 const ARG_PATTERN = /args\[\]=([^&\s]*)/g;
 const URL_PATTERN = /(https?:\/\/\S+)/;
-function safeDecode(value) {
-	try {
-		return decodeURIComponent(value);
-	} catch {
-		return value;
-	}
-}
 function parseMinifiedReactError(error) {
 	const message = error?.message;
 	if (!message) return null;
 	const numberMatch = message.match(NUMBER_PATTERN);
 	if (!numberMatch) return null;
 	const args = [];
-	for (const match of message.matchAll(ARG_PATTERN)) args.push(safeDecode(match[1]));
+	for (const match of message.matchAll(ARG_PATTERN)) args.push((0, _flareapp_core.safeDecode)(match[1]));
 	const urlMatch = message.match(URL_PATTERN);
 	return {
 		number: Number(numberMatch[1]),
@@ -237,6 +234,10 @@ var FlareErrorBoundary = class extends react.Component {
 
 //#endregion
 //#region src/flareReactErrorHandler.ts
+/**
+* Callback shaped to match react-error-boundary's `onError` prop, so consumers using that library
+* can report to Flare without our own boundary.
+*/
 function flareReactErrorHandler(options) {
 	const flare = resolveFlare(options?.flare);
 	tagReactFramework(flare);

package/dist/{flareReactErrorHandler-zU02JsUc.mjs → flareReactErrorHandler-sRmFoJAG.mjs}

@@ -1,58 +1,49 @@
+import { FrameworkName, convertToError, createIdentityTagger, safeDecode, toCustomContext } from "@flareapp/core";
 import * as React from "react";
 import { Component, version } from "react";
-import { convertToError } from "@flareapp/core";
+import { createFlareResolver } from "@flareapp/js/browser";
 
 //#region src/constants.ts
+/**
+* Chrome: `at ComponentName (http://localhost:5173/src/App.tsx:12:9)`; no source: `at div`.
+*/
 const CHROMIUM_STACK_REGEX = /^at\s+(\S+)(?:\s+\((.+):(\d+):(\d+)\))?$/;
+/**
+* Firefox/Safari: `ComponentName@http://localhost:5173/src/App.tsx:12:9`; no source: `div`.
+*/
 const FIREFOX_SAFARI_STACK_REGEX = /^(\S+?)@(.+):(\d+):(\d+)$/;
-const PACKAGE_VERSION = typeof process !== "undefined" && true ? "2.7.0" : "?";
+/**
+* React 16/17/18 synthetic component stack: `in ComponentName (at App.jsx:10)`; with an optional
+* column `in ComponentName (at App.jsx:10:5)`; no source: `in ComponentName`. These versions usually
+* emit a line only, so the column capture group is optional. The file capture is lazy so the trailing
+* `:line(:column)` binds to the numeric tail even when the file path itself contains colons. Without
+* `__source` React names the owner instead (`in App (created by Root)`), so that suffix is matched and
+* discarded; the group is greedy because an owner name can carry brackets of its own (`Connect(Form)`).
+*/
+const REACT_LEGACY_STACK_REGEX = /^in\s+(\S+)(?:\s+\(at\s+(.+?):(\d+)(?::(\d+))?\))?(?:\s+\(created by\s+.+\))?$/;
+/** Injected at build time via tsdown --env.PACKAGE_VERSION (reads package.json version). */
+const PACKAGE_VERSION = typeof process !== "undefined" && true ? "2.8.0" : "?";
 
 //#endregion
 //#region src/identify.ts
-const sdkTagged = /* @__PURE__ */ new WeakSet();
-const frameworkTagged = /* @__PURE__ */ new WeakSet();
+const tagger = createIdentityTagger({
+	sdkName: "@flareapp/react",
+	sdkVersion: PACKAGE_VERSION,
+	frameworkName: FrameworkName.React
+});
+/** Web path: full identity on the default singleton (sdk + framework). */
 function registerReactSdkIdentity(flare) {
-	if (!sdkTagged.has(flare)) {
-		sdkTagged.add(flare);
-		flare.setSdkInfo({
-			name: "@flareapp/react",
-			version: PACKAGE_VERSION
-		});
-	}
-	tagReactFramework(flare);
+	tagger.registerSdkIdentity(flare);
+	tagger.tagFramework(flare, React.version);
 }
+/** Injected path: framework tag only, never sdkInfo (would clobber the injected SDK name). */
 function tagReactFramework(flare) {
-	if (frameworkTagged.has(flare)) return;
-	frameworkTagged.add(flare);
-	flare.setFramework({
-		name: "React",
-		version: React.version
-	});
+	tagger.tagFramework(flare, React.version);
 }
 
 //#endregion
 //#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/react (web root) was imported in a renderer where the Electron bridge is present, pulling the keyed @flareapp/js singleton into the renderer. Import @flareapp/react/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/react (the package root) to use the @flareapp/js default singleton.");
-}
+const { registerDefaultFlare, resolveFlare } = createFlareResolver({ packageName: "@flareapp/react" });
 
 //#endregion
 //#region src/formatComponentStack.ts
@@ -62,6 +53,12 @@ function formatComponentStack(stack) {
 
 //#endregion
 //#region src/parseComponentStack.ts
+/**
+* Parse React's newline-separated `errorInfo.componentStack` into structured frames so the Flare UI
+* can render file/line links. The line format is browser-native in React 19 (Chromium / Firefox /
+* Safari shapes) and React-synthetic in 16-18 (`in X (at File:line)`). Unrecognised lines fall back
+* to component-name-only rather than being dropped.
+*/
 function parseComponentStack(stack) {
 	return stack.split(/\s*\n\s*/g).filter((line) => line.length > 0).map((line) => {
 		const chromeMatch = line.match(CHROMIUM_STACK_REGEX);
@@ -78,6 +75,13 @@ function parseComponentStack(stack) {
 			line: Number(firefoxSafariMatch[3]),
 			column: Number(firefoxSafariMatch[4])
 		};
+		const reactLegacyMatch = line.match(REACT_LEGACY_STACK_REGEX);
+		if (reactLegacyMatch) return {
+			component: reactLegacyMatch[1],
+			file: reactLegacyMatch[2] ?? null,
+			line: reactLegacyMatch[3] ? Number(reactLegacyMatch[3]) : null,
+			column: reactLegacyMatch[4] ? Number(reactLegacyMatch[4]) : null
+		};
 		return {
 			component: line.replace(/^at\s+/, ""),
 			file: null,
@@ -101,11 +105,11 @@ function buildReactContext(rawStack) {
 //#region src/contextToAttributes.ts
 function contextToAttributes(context, minifiedError) {
 	return {
-		"context.custom": { react: {
+		...toCustomContext("react", {
 			componentStack: context.react.componentStack,
 			componentStackFrames: context.react.componentStackFrames,
 			...context.react.version ? { version: context.react.version } : {}
-		} },
+		}),
 		...minifiedError ? { "flare.exception.react_minified_error": {
 			number: minifiedError.number,
 			args: minifiedError.args,
@@ -120,13 +124,6 @@ function contextToAttributes(context, minifiedError) {
 const NUMBER_PATTERN = /Minified React error #(\d+)/;
 const ARG_PATTERN = /args\[\]=([^&\s]*)/g;
 const URL_PATTERN = /(https?:\/\/\S+)/;
-function safeDecode(value) {
-	try {
-		return decodeURIComponent(value);
-	} catch {
-		return value;
-	}
-}
 function parseMinifiedReactError(error) {
 	const message = error?.message;
 	if (!message) return null;
@@ -210,6 +207,10 @@ var FlareErrorBoundary = class extends Component {
 
 //#endregion
 //#region src/flareReactErrorHandler.ts
+/**
+* Callback shaped to match react-error-boundary's `onError` prop, so consumers using that library
+* can report to Flare without our own boundary.
+*/
 function flareReactErrorHandler(options) {
 	const flare = resolveFlare(options?.flare);
 	tagReactFramework(flare);

package/dist/index.cjs

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

package/dist/index.d.cts

@@ -1,2 +1,2 @@
-import { a as FlareErrorBoundaryFallbackProps, c as FlareReactContext, i as FlareErrorBoundary, l as MinifiedReactError, n as FlareReactErrorHandlerOptions, o as FlareErrorBoundaryProps, r as flareReactErrorHandler, s as ComponentStackFrame, t as FlareReactErrorHandlerCallback } from "./flareReactErrorHandler-DDsrRIsz.cjs";
+import { a as FlareErrorBoundaryFallbackProps, c as FlareReactContext, i as FlareErrorBoundary, l as MinifiedReactError, n as FlareReactErrorHandlerOptions, o as FlareErrorBoundaryProps, r as flareReactErrorHandler, s as ComponentStackFrame, t as FlareReactErrorHandlerCallback } from "./flareReactErrorHandler-CnFo8otu.cjs";
 export { type ComponentStackFrame, FlareErrorBoundary, type FlareErrorBoundaryFallbackProps, type FlareErrorBoundaryProps, type FlareReactContext, type FlareReactErrorHandlerCallback, type FlareReactErrorHandlerOptions, type MinifiedReactError, flareReactErrorHandler };

package/dist/index.d.mts

@@ -1,2 +1,2 @@
-import { a as FlareErrorBoundaryFallbackProps, c as FlareReactContext, i as FlareErrorBoundary, l as MinifiedReactError, n as FlareReactErrorHandlerOptions, o as FlareErrorBoundaryProps, r as flareReactErrorHandler, s as ComponentStackFrame, t as FlareReactErrorHandlerCallback } from "./flareReactErrorHandler-CLRs3ATb.mjs";
+import { a as FlareErrorBoundaryFallbackProps, c as FlareReactContext, i as FlareErrorBoundary, l as MinifiedReactError, n as FlareReactErrorHandlerOptions, o as FlareErrorBoundaryProps, r as flareReactErrorHandler, s as ComponentStackFrame, t as FlareReactErrorHandlerCallback } from "./flareReactErrorHandler-Ce0sCyMK.mjs";
 export { type ComponentStackFrame, FlareErrorBoundary, type FlareErrorBoundaryFallbackProps, type FlareErrorBoundaryProps, type FlareReactContext, type FlareReactErrorHandlerCallback, type FlareReactErrorHandlerOptions, type MinifiedReactError, flareReactErrorHandler };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { i as registerReactSdkIdentity, n as FlareErrorBoundary, r as registerDefaultFlare, t as flareReactErrorHandler } from "./flareReactErrorHandler-zU02JsUc.mjs";
+import { i as registerReactSdkIdentity, n as FlareErrorBoundary, r as registerDefaultFlare, t as flareReactErrorHandler } from "./flareReactErrorHandler-sRmFoJAG.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_flareReactErrorHandler = require('./flareReactErrorHandler-e8mBB8Lg.cjs');
+const require_flareReactErrorHandler = require('./flareReactErrorHandler-DBmb7u7U.cjs');
 
 exports.FlareErrorBoundary = require_flareReactErrorHandler.FlareErrorBoundary;
 exports.flareReactErrorHandler = require_flareReactErrorHandler.flareReactErrorHandler;

package/dist/inject.d.cts

@@ -1,2 +1,2 @@
-import { a as FlareErrorBoundaryFallbackProps, c as FlareReactContext, i as FlareErrorBoundary, l as MinifiedReactError, n as FlareReactErrorHandlerOptions, o as FlareErrorBoundaryProps, r as flareReactErrorHandler, s as ComponentStackFrame, t as FlareReactErrorHandlerCallback } from "./flareReactErrorHandler-DDsrRIsz.cjs";
+import { a as FlareErrorBoundaryFallbackProps, c as FlareReactContext, i as FlareErrorBoundary, l as MinifiedReactError, n as FlareReactErrorHandlerOptions, o as FlareErrorBoundaryProps, r as flareReactErrorHandler, s as ComponentStackFrame, t as FlareReactErrorHandlerCallback } from "./flareReactErrorHandler-CnFo8otu.cjs";
 export { type ComponentStackFrame, FlareErrorBoundary, type FlareErrorBoundaryFallbackProps, type FlareErrorBoundaryProps, type FlareReactContext, type FlareReactErrorHandlerCallback, type FlareReactErrorHandlerOptions, type MinifiedReactError, flareReactErrorHandler };

package/dist/inject.d.mts

@@ -1,2 +1,2 @@
-import { a as FlareErrorBoundaryFallbackProps, c as FlareReactContext, i as FlareErrorBoundary, l as MinifiedReactError, n as FlareReactErrorHandlerOptions, o as FlareErrorBoundaryProps, r as flareReactErrorHandler, s as ComponentStackFrame, t as FlareReactErrorHandlerCallback } from "./flareReactErrorHandler-CLRs3ATb.mjs";
+import { a as FlareErrorBoundaryFallbackProps, c as FlareReactContext, i as FlareErrorBoundary, l as MinifiedReactError, n as FlareReactErrorHandlerOptions, o as FlareErrorBoundaryProps, r as flareReactErrorHandler, s as ComponentStackFrame, t as FlareReactErrorHandlerCallback } from "./flareReactErrorHandler-Ce0sCyMK.mjs";
 export { type ComponentStackFrame, FlareErrorBoundary, type FlareErrorBoundaryFallbackProps, type FlareErrorBoundaryProps, type FlareReactContext, type FlareReactErrorHandlerCallback, type FlareReactErrorHandlerOptions, type MinifiedReactError, flareReactErrorHandler };

package/dist/inject.mjs

@@ -1,3 +1,3 @@
-import { n as FlareErrorBoundary, t as flareReactErrorHandler } from "./flareReactErrorHandler-zU02JsUc.mjs";
+import { n as FlareErrorBoundary, t as flareReactErrorHandler } from "./flareReactErrorHandler-sRmFoJAG.mjs";
 
 export { FlareErrorBoundary, flareReactErrorHandler };

package/dist/profiler.cjs

@@ -0,0 +1,63 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_flareReactErrorHandler = require('./flareReactErrorHandler-DBmb7u7U.cjs');
+let react = require("react");
+let _flareapp_js_browser = require("@flareapp/js/browser");
+
+//#region src/profiler.ts
+const useMountEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+const FlareProfilerContext = (0, react.createContext)(null);
+/** Records one `browser_component` span for its mount, nested under the nearest profiled ancestor
+*  or the active `browser_pageload` / `browser_navigation` root. */
+function FlareProfiler({ name, children }) {
+	const context = (0, react.useContext)(FlareProfilerContext);
+	const parentRef = (0, react.useRef)(void 0);
+	if (parentRef.current === void 0) try {
+		parentRef.current = (0, _flareapp_js_browser.resolveComponentParent)(context, (0, _flareapp_js_browser.activeComponentRoot)());
+	} catch {
+		parentRef.current = null;
+	}
+	const parent = parentRef.current;
+	const ownRef = (0, react.useRef)(null);
+	if (parent && ownRef.current === null) try {
+		const spanId = (0, _flareapp_js_browser.reserveSpanId)(parent.traceId);
+		ownRef.current = spanId ? {
+			spanId,
+			startNano: (0, _flareapp_js_browser.nowNano)()
+		} : null;
+	} catch {}
+	const providedRef = (0, react.useRef)(void 0);
+	if (providedRef.current === void 0) providedRef.current = parent && ownRef.current ? {
+		traceId: parent.traceId,
+		parentSpanId: ownRef.current.spanId
+	} : null;
+	const hasRecorded = (0, react.useRef)(false);
+	useMountEffect(() => {
+		const own = ownRef.current;
+		if (!parent || !own || hasRecorded.current) return;
+		hasRecorded.current = true;
+		try {
+			(0, _flareapp_js_browser.recordComponentSpan)({
+				name,
+				spanId: own.spanId,
+				parent,
+				startTimeUnixNano: own.startNano,
+				endTimeUnixNano: (0, _flareapp_js_browser.nowNano)()
+			});
+		} catch {}
+	}, []);
+	if (providedRef.current === null) return children ?? null;
+	return (0, react.createElement)(FlareProfilerContext.Provider, { value: providedRef.current }, children ?? null);
+}
+/** Wraps `Component` in a `FlareProfiler`. Name it explicitly when the component is anonymous or minified. */
+function withFlareProfiler(Component, options) {
+	const name = options?.name || Component.displayName || Component.name || "Unknown";
+	function Profiled(props) {
+		return (0, react.createElement)(FlareProfiler, { name }, (0, react.createElement)(Component, props));
+	}
+	Profiled.displayName = `withFlareProfiler(${name})`;
+	return Profiled;
+}
+
+//#endregion
+exports.FlareProfiler = FlareProfiler;
+exports.withFlareProfiler = withFlareProfiler;

package/dist/profiler.d.cts

@@ -0,0 +1,19 @@
+import { ComponentType, FunctionComponent, ReactNode } from "react";
+
+//#region src/profiler.d.ts
+type FlareProfilerProps = {
+  /** The span's name, as it appears in the trace. */name: string;
+  children?: ReactNode;
+};
+/** Records one `browser_component` span for its mount, nested under the nearest profiled ancestor
+ *  or the active `browser_pageload` / `browser_navigation` root. */
+declare function FlareProfiler({
+  name,
+  children
+}: FlareProfilerProps): ReactNode;
+/** Wraps `Component` in a `FlareProfiler`. Name it explicitly when the component is anonymous or minified. */
+declare function withFlareProfiler<P extends object>(Component: ComponentType<P>, options?: {
+  name?: string;
+}): FunctionComponent<P>;
+//#endregion
+export { FlareProfiler, FlareProfilerProps, withFlareProfiler };

package/dist/profiler.d.mts

@@ -0,0 +1,19 @@
+import { ComponentType, FunctionComponent, ReactNode } from "react";
+
+//#region src/profiler.d.ts
+type FlareProfilerProps = {
+  /** The span's name, as it appears in the trace. */name: string;
+  children?: ReactNode;
+};
+/** Records one `browser_component` span for its mount, nested under the nearest profiled ancestor
+ *  or the active `browser_pageload` / `browser_navigation` root. */
+declare function FlareProfiler({
+  name,
+  children
+}: FlareProfilerProps): ReactNode;
+/** Wraps `Component` in a `FlareProfiler`. Name it explicitly when the component is anonymous or minified. */
+declare function withFlareProfiler<P extends object>(Component: ComponentType<P>, options?: {
+  name?: string;
+}): FunctionComponent<P>;
+//#endregion
+export { FlareProfiler, FlareProfilerProps, withFlareProfiler };

package/dist/profiler.mjs

@@ -0,0 +1,60 @@
+import { createContext, createElement, useContext, useEffect, useLayoutEffect, useRef } from "react";
+import { activeComponentRoot, nowNano, recordComponentSpan, reserveSpanId, resolveComponentParent } from "@flareapp/js/browser";
+
+//#region src/profiler.ts
+const useMountEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const FlareProfilerContext = createContext(null);
+/** Records one `browser_component` span for its mount, nested under the nearest profiled ancestor
+*  or the active `browser_pageload` / `browser_navigation` root. */
+function FlareProfiler({ name, children }) {
+	const context = useContext(FlareProfilerContext);
+	const parentRef = useRef(void 0);
+	if (parentRef.current === void 0) try {
+		parentRef.current = resolveComponentParent(context, activeComponentRoot());
+	} catch {
+		parentRef.current = null;
+	}
+	const parent = parentRef.current;
+	const ownRef = useRef(null);
+	if (parent && ownRef.current === null) try {
+		const spanId = reserveSpanId(parent.traceId);
+		ownRef.current = spanId ? {
+			spanId,
+			startNano: nowNano()
+		} : null;
+	} catch {}
+	const providedRef = useRef(void 0);
+	if (providedRef.current === void 0) providedRef.current = parent && ownRef.current ? {
+		traceId: parent.traceId,
+		parentSpanId: ownRef.current.spanId
+	} : null;
+	const hasRecorded = useRef(false);
+	useMountEffect(() => {
+		const own = ownRef.current;
+		if (!parent || !own || hasRecorded.current) return;
+		hasRecorded.current = true;
+		try {
+			recordComponentSpan({
+				name,
+				spanId: own.spanId,
+				parent,
+				startTimeUnixNano: own.startNano,
+				endTimeUnixNano: nowNano()
+			});
+		} catch {}
+	}, []);
+	if (providedRef.current === null) return children ?? null;
+	return createElement(FlareProfilerContext.Provider, { value: providedRef.current }, children ?? null);
+}
+/** Wraps `Component` in a `FlareProfiler`. Name it explicitly when the component is anonymous or minified. */
+function withFlareProfiler(Component, options) {
+	const name = options?.name || Component.displayName || Component.name || "Unknown";
+	function Profiled(props) {
+		return createElement(FlareProfiler, { name }, createElement(Component, props));
+	}
+	Profiled.displayName = `withFlareProfiler(${name})`;
+	return Profiled;
+}
+
+//#endregion
+export { FlareProfiler, withFlareProfiler };

package/dist/react-router.cjs

@@ -0,0 +1,94 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_flareReactErrorHandler = require('./flareReactErrorHandler-DBmb7u7U.cjs');
+let _flareapp_js_browser = require("@flareapp/js/browser");
+
+//#region src/react-router.ts
+/**
+* Rebuild the parameterized template (`/product/:id`) by joining each match's declared `route.path`.
+* Follows Sentry's getNormalizedName, but reads the router's already-resolved `state.matches` rather
+* than matching again.
+*/
+function routeNameFromMatches(matches) {
+	if (!matches || matches.length === 0) return;
+	let path = "";
+	for (const match of matches) {
+		const routePath = match.route?.path;
+		if (!routePath) continue;
+		path = routePath[0] === "/" ? routePath : (path.endsWith("/") ? path : path + "/") + routePath;
+	}
+	if (!path) return;
+	if (path[0] !== "/") path = "/" + path;
+	return path.replace(/\/{2,}/g, "/");
+}
+/**
+* Trace a React Router v7 data router (createBrowserRouter / createHashRouter / createMemoryRouter):
+* name the browser_pageload root from the initial route, and open a parameterized, held
+* browser_navigation root per route change, named once the router settles. Returns a cleanup that
+* unsubscribes and unregisters. Safe to call before or after tracing is enabled; no-ops when off.
+* Calling it twice on the same router replaces the first instrumentation.
+*/
+function traceReactRouter(router) {
+	if (typeof router?.subscribe !== "function") return () => {};
+	return (0, _flareapp_js_browser.instrumentOnce)(router, (track) => install(router, track));
+}
+function install(router, track) {
+	const nav = (0, _flareapp_js_browser.registerNavigationSource)();
+	track(() => nav.unregister());
+	function routeNameFor(state) {
+		return (0, _flareapp_js_browser.routeName)(() => routeNameFromMatches(state.matches), state.location.pathname, hrefOf(state.location));
+	}
+	function hrefOf(loc) {
+		return (0, _flareapp_js_browser.resolveHref)(() => router.createHref?.(loc), keyOf(loc));
+	}
+	function keyOf(loc) {
+		return (loc.pathname || "") + (loc.search || "") + (loc.hash || "");
+	}
+	let sawInitialSettle = false;
+	let inFlight = false;
+	let lastLocationKey = keyOf(router.state.location);
+	try {
+		if (router.state.matches.length > 0) nav.setActiveRouteName(routeNameFor(router.state));
+		sawInitialSettle = router.state.initialized === true;
+	} catch {}
+	function onState(state) {
+		if (!sawInitialSettle) {
+			lastLocationKey = keyOf(state.location);
+			if (state.matches.length > 0) nav.setActiveRouteName(routeNameFor(state));
+			if (state.initialized) sawInitialSettle = true;
+			return;
+		}
+		const navState = state.navigation.state;
+		if (!inFlight && navState !== "idle") {
+			inFlight = true;
+			const destination = state.navigation.location ?? state.location;
+			nav.startNavigation({
+				path: destination.pathname,
+				url: hrefOf(destination),
+				hold: true
+			});
+			return;
+		}
+		if (inFlight && navState === "idle") {
+			inFlight = false;
+			lastLocationKey = keyOf(state.location);
+			nav.settleNavigation(routeNameFor(state));
+			return;
+		}
+		if (!inFlight && navState === "idle") {
+			const locationKey = keyOf(state.location);
+			if (locationKey !== lastLocationKey) {
+				lastLocationKey = locationKey;
+				nav.startNavigation({
+					path: state.location.pathname,
+					url: hrefOf(state.location)
+				});
+				nav.settleNavigation(routeNameFor(state));
+			}
+		}
+	}
+	track(router.subscribe((0, _flareapp_js_browser.insulate)(onState)));
+}
+
+//#endregion
+exports.routeNameFromMatches = routeNameFromMatches;
+exports.traceReactRouter = traceReactRouter;

package/dist/react-router.d.cts

@@ -0,0 +1,54 @@
+//#region src/vendor/reactRouterTypes.d.ts
+type ReactRouterLocationLike = {
+  pathname: string;
+  search?: string;
+  hash?: string;
+  state?: unknown;
+};
+type ReactRouterRouteLike = {
+  path?: string;
+  index?: boolean;
+  id?: string;
+};
+type ReactRouterMatchLike = {
+  route: ReactRouterRouteLike;
+  pathname: string;
+  params?: Record<string, string | undefined>;
+};
+type ReactRouterNavigationLike = {
+  state: 'idle' | 'loading' | 'submitting';
+  location?: ReactRouterLocationLike;
+};
+type ReactRouterStateLike = {
+  location: ReactRouterLocationLike;
+  matches: ReactRouterMatchLike[];
+  navigation: ReactRouterNavigationLike;
+  initialized?: boolean;
+};
+type ReactRouterLike = {
+  subscribe(cb: (state: ReactRouterStateLike) => void): () => void;
+  state: ReactRouterStateLike;
+  /**
+   * Applies the router's `basename` (and, for a hash router, the `#` prefix) to a location.
+   * `state.location.pathname` has both stripped. Optional so a hand-built router still types.
+   */
+  createHref?(location: ReactRouterLocationLike): string;
+};
+//#endregion
+//#region src/react-router.d.ts
+/**
+ * Rebuild the parameterized template (`/product/:id`) by joining each match's declared `route.path`.
+ * Follows Sentry's getNormalizedName, but reads the router's already-resolved `state.matches` rather
+ * than matching again.
+ */
+declare function routeNameFromMatches(matches: ReactRouterMatchLike[] | undefined): string | undefined;
+/**
+ * Trace a React Router v7 data router (createBrowserRouter / createHashRouter / createMemoryRouter):
+ * name the browser_pageload root from the initial route, and open a parameterized, held
+ * browser_navigation root per route change, named once the router settles. Returns a cleanup that
+ * unsubscribes and unregisters. Safe to call before or after tracing is enabled; no-ops when off.
+ * Calling it twice on the same router replaces the first instrumentation.
+ */
+declare function traceReactRouter(router: ReactRouterLike): () => void;
+//#endregion
+export { type ReactRouterLike, type ReactRouterLocationLike, type ReactRouterMatchLike, type ReactRouterNavigationLike, type ReactRouterRouteLike, type ReactRouterStateLike, routeNameFromMatches, traceReactRouter };

package/dist/react-router.d.mts

@@ -0,0 +1,54 @@
+//#region src/vendor/reactRouterTypes.d.ts
+type ReactRouterLocationLike = {
+  pathname: string;
+  search?: string;
+  hash?: string;
+  state?: unknown;
+};
+type ReactRouterRouteLike = {
+  path?: string;
+  index?: boolean;
+  id?: string;
+};
+type ReactRouterMatchLike = {
+  route: ReactRouterRouteLike;
+  pathname: string;
+  params?: Record<string, string | undefined>;
+};
+type ReactRouterNavigationLike = {
+  state: 'idle' | 'loading' | 'submitting';
+  location?: ReactRouterLocationLike;
+};
+type ReactRouterStateLike = {
+  location: ReactRouterLocationLike;
+  matches: ReactRouterMatchLike[];
+  navigation: ReactRouterNavigationLike;
+  initialized?: boolean;
+};
+type ReactRouterLike = {
+  subscribe(cb: (state: ReactRouterStateLike) => void): () => void;
+  state: ReactRouterStateLike;
+  /**
+   * Applies the router's `basename` (and, for a hash router, the `#` prefix) to a location.
+   * `state.location.pathname` has both stripped. Optional so a hand-built router still types.
+   */
+  createHref?(location: ReactRouterLocationLike): string;
+};
+//#endregion
+//#region src/react-router.d.ts
+/**
+ * Rebuild the parameterized template (`/product/:id`) by joining each match's declared `route.path`.
+ * Follows Sentry's getNormalizedName, but reads the router's already-resolved `state.matches` rather
+ * than matching again.
+ */
+declare function routeNameFromMatches(matches: ReactRouterMatchLike[] | undefined): string | undefined;
+/**
+ * Trace a React Router v7 data router (createBrowserRouter / createHashRouter / createMemoryRouter):
+ * name the browser_pageload root from the initial route, and open a parameterized, held
+ * browser_navigation root per route change, named once the router settles. Returns a cleanup that
+ * unsubscribes and unregisters. Safe to call before or after tracing is enabled; no-ops when off.
+ * Calling it twice on the same router replaces the first instrumentation.
+ */
+declare function traceReactRouter(router: ReactRouterLike): () => void;
+//#endregion
+export { type ReactRouterLike, type ReactRouterLocationLike, type ReactRouterMatchLike, type ReactRouterNavigationLike, type ReactRouterRouteLike, type ReactRouterStateLike, routeNameFromMatches, traceReactRouter };

package/dist/react-router.mjs

@@ -0,0 +1,91 @@
+import { instrumentOnce, insulate, registerNavigationSource, resolveHref, routeName } from "@flareapp/js/browser";
+
+//#region src/react-router.ts
+/**
+* Rebuild the parameterized template (`/product/:id`) by joining each match's declared `route.path`.
+* Follows Sentry's getNormalizedName, but reads the router's already-resolved `state.matches` rather
+* than matching again.
+*/
+function routeNameFromMatches(matches) {
+	if (!matches || matches.length === 0) return;
+	let path = "";
+	for (const match of matches) {
+		const routePath = match.route?.path;
+		if (!routePath) continue;
+		path = routePath[0] === "/" ? routePath : (path.endsWith("/") ? path : path + "/") + routePath;
+	}
+	if (!path) return;
+	if (path[0] !== "/") path = "/" + path;
+	return path.replace(/\/{2,}/g, "/");
+}
+/**
+* Trace a React Router v7 data router (createBrowserRouter / createHashRouter / createMemoryRouter):
+* name the browser_pageload root from the initial route, and open a parameterized, held
+* browser_navigation root per route change, named once the router settles. Returns a cleanup that
+* unsubscribes and unregisters. Safe to call before or after tracing is enabled; no-ops when off.
+* Calling it twice on the same router replaces the first instrumentation.
+*/
+function traceReactRouter(router) {
+	if (typeof router?.subscribe !== "function") return () => {};
+	return instrumentOnce(router, (track) => install(router, track));
+}
+function install(router, track) {
+	const nav = registerNavigationSource();
+	track(() => nav.unregister());
+	function routeNameFor(state) {
+		return routeName(() => routeNameFromMatches(state.matches), state.location.pathname, hrefOf(state.location));
+	}
+	function hrefOf(loc) {
+		return resolveHref(() => router.createHref?.(loc), keyOf(loc));
+	}
+	function keyOf(loc) {
+		return (loc.pathname || "") + (loc.search || "") + (loc.hash || "");
+	}
+	let sawInitialSettle = false;
+	let inFlight = false;
+	let lastLocationKey = keyOf(router.state.location);
+	try {
+		if (router.state.matches.length > 0) nav.setActiveRouteName(routeNameFor(router.state));
+		sawInitialSettle = router.state.initialized === true;
+	} catch {}
+	function onState(state) {
+		if (!sawInitialSettle) {
+			lastLocationKey = keyOf(state.location);
+			if (state.matches.length > 0) nav.setActiveRouteName(routeNameFor(state));
+			if (state.initialized) sawInitialSettle = true;
+			return;
+		}
+		const navState = state.navigation.state;
+		if (!inFlight && navState !== "idle") {
+			inFlight = true;
+			const destination = state.navigation.location ?? state.location;
+			nav.startNavigation({
+				path: destination.pathname,
+				url: hrefOf(destination),
+				hold: true
+			});
+			return;
+		}
+		if (inFlight && navState === "idle") {
+			inFlight = false;
+			lastLocationKey = keyOf(state.location);
+			nav.settleNavigation(routeNameFor(state));
+			return;
+		}
+		if (!inFlight && navState === "idle") {
+			const locationKey = keyOf(state.location);
+			if (locationKey !== lastLocationKey) {
+				lastLocationKey = locationKey;
+				nav.startNavigation({
+					path: state.location.pathname,
+					url: hrefOf(state.location)
+				});
+				nav.settleNavigation(routeNameFor(state));
+			}
+		}
+	}
+	track(router.subscribe(insulate(onState)));
+}
+
+//#endregion
+export { routeNameFromMatches, traceReactRouter };

package/dist/tanstack-router.cjs

@@ -0,0 +1,89 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_flareReactErrorHandler = require('./flareReactErrorHandler-DBmb7u7U.cjs');
+let _flareapp_js_browser = require("@flareapp/js/browser");
+
+//#region src/tanstack-router.ts
+/**
+* How long a held navigation root waits for `onResolved` before settling itself. Exported so the suite
+* drives it instead of hardcoding the number; not part of the supported surface.
+*/
+const STALE_NAVIGATION_TIMEOUT_MS = 5e3;
+/**
+* Trace a TanStack Router instance: name the `browser_pageload` root from the
+* initial route and open a parameterized `browser_navigation` root per route
+* change. Returns a cleanup that unsubscribes and unregisters. Safe to call
+* before or after tracing is enabled; no-ops when tracing is off. Calling it
+* twice on the same router replaces the first instrumentation rather than
+* stacking a second set of subscriptions.
+*/
+function traceTanStackRouter(router) {
+	if (typeof router?.subscribe !== "function") return () => {};
+	return (0, _flareapp_js_browser.instrumentOnce)(router, (track) => install(router, track));
+}
+function install(router, track) {
+	const nav = (0, _flareapp_js_browser.registerNavigationSource)();
+	track(() => nav.unregister());
+	function hrefOf(loc) {
+		return (0, _flareapp_js_browser.resolveHref)(() => loc.publicHref ?? loc.href, loc.pathname);
+	}
+	function routeNameFor(loc) {
+		return (0, _flareapp_js_browser.routeName)(() => {
+			const matches = router.matchRoutes(loc.pathname, loc.search, {
+				preload: false,
+				throwOnError: false
+			});
+			if (!matches.some((m) => m.routeId !== "__root__")) return;
+			const last = matches[matches.length - 1];
+			return last?.fullPath || last?.routeId;
+		}, loc.pathname, hrefOf(loc));
+	}
+	try {
+		nav.setActiveRouteName(routeNameFor(router.state.location));
+	} catch {}
+	let inFlight = false;
+	let destination = null;
+	let staleTimer = null;
+	function clearStaleTimer() {
+		if (staleTimer !== null) {
+			clearTimeout(staleTimer);
+			staleTimer = null;
+		}
+	}
+	function settle(location) {
+		clearStaleTimer();
+		inFlight = false;
+		destination = null;
+		nav.settleNavigation(routeNameFor(location));
+	}
+	track(clearStaleTimer);
+	track(router.subscribe("onBeforeLoad", (0, _flareapp_js_browser.insulate)((event) => {
+		if (event.fromLocation === void 0) return;
+		if (event.hrefChanged === false) return;
+		if (event.toLocation.state === event.fromLocation.state) return;
+		if (!inFlight) {
+			inFlight = true;
+			nav.startNavigation({
+				path: event.toLocation.pathname,
+				hold: true
+			});
+		}
+		destination = event.toLocation;
+		nav.setActiveRouteName(routeNameFor(event.toLocation));
+		clearStaleTimer();
+		staleTimer = setTimeout((0, _flareapp_js_browser.insulate)(() => {
+			staleTimer = null;
+			if (destination) settle(destination);
+		}), STALE_NAVIGATION_TIMEOUT_MS);
+	})));
+	track(router.subscribe("onResolved", (0, _flareapp_js_browser.insulate)((event) => {
+		if (event.fromLocation === void 0) {
+			nav.setActiveRouteName(routeNameFor(event.toLocation));
+			return;
+		}
+		if (inFlight) settle(event.toLocation);
+	})));
+}
+
+//#endregion
+exports.STALE_NAVIGATION_TIMEOUT_MS = STALE_NAVIGATION_TIMEOUT_MS;
+exports.traceTanStackRouter = traceTanStackRouter;

package/dist/tanstack-router.d.cts

@@ -0,0 +1,45 @@
+//#region src/vendor/tanstackRouterTypes.d.ts
+type TanStackLocationLike = {
+  pathname: string;
+  search: unknown;
+  href?: string;
+  publicHref?: string;
+  state?: unknown;
+};
+type TanStackNavEventLike = {
+  fromLocation?: TanStackLocationLike;
+  toLocation: TanStackLocationLike;
+  hrefChanged?: boolean;
+};
+type TanStackMatchLike = {
+  routeId?: string;
+  fullPath?: string;
+};
+type TanStackRouterLike = {
+  subscribe(eventType: 'onBeforeLoad' | 'onResolved', cb: (event: TanStackNavEventLike) => void): () => void;
+  matchRoutes(pathname: string, search: unknown, opts?: {
+    preload?: boolean;
+    throwOnError?: boolean;
+  }): TanStackMatchLike[];
+  state: {
+    location: TanStackLocationLike;
+  };
+};
+//#endregion
+//#region src/tanstack-router.d.ts
+/**
+ * How long a held navigation root waits for `onResolved` before settling itself. Exported so the suite
+ * drives it instead of hardcoding the number; not part of the supported surface.
+ */
+declare const STALE_NAVIGATION_TIMEOUT_MS = 5000;
+/**
+ * Trace a TanStack Router instance: name the `browser_pageload` root from the
+ * initial route and open a parameterized `browser_navigation` root per route
+ * change. Returns a cleanup that unsubscribes and unregisters. Safe to call
+ * before or after tracing is enabled; no-ops when tracing is off. Calling it
+ * twice on the same router replaces the first instrumentation rather than
+ * stacking a second set of subscriptions.
+ */
+declare function traceTanStackRouter(router: TanStackRouterLike): () => void;
+//#endregion
+export { STALE_NAVIGATION_TIMEOUT_MS, type TanStackLocationLike, type TanStackMatchLike, type TanStackNavEventLike, type TanStackRouterLike, traceTanStackRouter };

package/dist/tanstack-router.d.mts

@@ -0,0 +1,45 @@
+//#region src/vendor/tanstackRouterTypes.d.ts
+type TanStackLocationLike = {
+  pathname: string;
+  search: unknown;
+  href?: string;
+  publicHref?: string;
+  state?: unknown;
+};
+type TanStackNavEventLike = {
+  fromLocation?: TanStackLocationLike;
+  toLocation: TanStackLocationLike;
+  hrefChanged?: boolean;
+};
+type TanStackMatchLike = {
+  routeId?: string;
+  fullPath?: string;
+};
+type TanStackRouterLike = {
+  subscribe(eventType: 'onBeforeLoad' | 'onResolved', cb: (event: TanStackNavEventLike) => void): () => void;
+  matchRoutes(pathname: string, search: unknown, opts?: {
+    preload?: boolean;
+    throwOnError?: boolean;
+  }): TanStackMatchLike[];
+  state: {
+    location: TanStackLocationLike;
+  };
+};
+//#endregion
+//#region src/tanstack-router.d.ts
+/**
+ * How long a held navigation root waits for `onResolved` before settling itself. Exported so the suite
+ * drives it instead of hardcoding the number; not part of the supported surface.
+ */
+declare const STALE_NAVIGATION_TIMEOUT_MS = 5000;
+/**
+ * Trace a TanStack Router instance: name the `browser_pageload` root from the
+ * initial route and open a parameterized `browser_navigation` root per route
+ * change. Returns a cleanup that unsubscribes and unregisters. Safe to call
+ * before or after tracing is enabled; no-ops when tracing is off. Calling it
+ * twice on the same router replaces the first instrumentation rather than
+ * stacking a second set of subscriptions.
+ */
+declare function traceTanStackRouter(router: TanStackRouterLike): () => void;
+//#endregion
+export { STALE_NAVIGATION_TIMEOUT_MS, type TanStackLocationLike, type TanStackMatchLike, type TanStackNavEventLike, type TanStackRouterLike, traceTanStackRouter };

package/dist/tanstack-router.mjs

@@ -0,0 +1,86 @@
+import { instrumentOnce, insulate, registerNavigationSource, resolveHref, routeName } from "@flareapp/js/browser";
+
+//#region src/tanstack-router.ts
+/**
+* How long a held navigation root waits for `onResolved` before settling itself. Exported so the suite
+* drives it instead of hardcoding the number; not part of the supported surface.
+*/
+const STALE_NAVIGATION_TIMEOUT_MS = 5e3;
+/**
+* Trace a TanStack Router instance: name the `browser_pageload` root from the
+* initial route and open a parameterized `browser_navigation` root per route
+* change. Returns a cleanup that unsubscribes and unregisters. Safe to call
+* before or after tracing is enabled; no-ops when tracing is off. Calling it
+* twice on the same router replaces the first instrumentation rather than
+* stacking a second set of subscriptions.
+*/
+function traceTanStackRouter(router) {
+	if (typeof router?.subscribe !== "function") return () => {};
+	return instrumentOnce(router, (track) => install(router, track));
+}
+function install(router, track) {
+	const nav = registerNavigationSource();
+	track(() => nav.unregister());
+	function hrefOf(loc) {
+		return resolveHref(() => loc.publicHref ?? loc.href, loc.pathname);
+	}
+	function routeNameFor(loc) {
+		return routeName(() => {
+			const matches = router.matchRoutes(loc.pathname, loc.search, {
+				preload: false,
+				throwOnError: false
+			});
+			if (!matches.some((m) => m.routeId !== "__root__")) return;
+			const last = matches[matches.length - 1];
+			return last?.fullPath || last?.routeId;
+		}, loc.pathname, hrefOf(loc));
+	}
+	try {
+		nav.setActiveRouteName(routeNameFor(router.state.location));
+	} catch {}
+	let inFlight = false;
+	let destination = null;
+	let staleTimer = null;
+	function clearStaleTimer() {
+		if (staleTimer !== null) {
+			clearTimeout(staleTimer);
+			staleTimer = null;
+		}
+	}
+	function settle(location) {
+		clearStaleTimer();
+		inFlight = false;
+		destination = null;
+		nav.settleNavigation(routeNameFor(location));
+	}
+	track(clearStaleTimer);
+	track(router.subscribe("onBeforeLoad", insulate((event) => {
+		if (event.fromLocation === void 0) return;
+		if (event.hrefChanged === false) return;
+		if (event.toLocation.state === event.fromLocation.state) return;
+		if (!inFlight) {
+			inFlight = true;
+			nav.startNavigation({
+				path: event.toLocation.pathname,
+				hold: true
+			});
+		}
+		destination = event.toLocation;
+		nav.setActiveRouteName(routeNameFor(event.toLocation));
+		clearStaleTimer();
+		staleTimer = setTimeout(insulate(() => {
+			staleTimer = null;
+			if (destination) settle(destination);
+		}), STALE_NAVIGATION_TIMEOUT_MS);
+	})));
+	track(router.subscribe("onResolved", insulate((event) => {
+		if (event.fromLocation === void 0) {
+			nav.setActiveRouteName(routeNameFor(event.toLocation));
+			return;
+		}
+		if (inFlight) settle(event.toLocation);
+	})));
+}
+
+//#endregion
+export { STALE_NAVIGATION_TIMEOUT_MS, traceTanStackRouter };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flareapp/react",
-    "version": "2.7.0",
+    "version": "2.8.0",
     "description": "React client for flareapp.io",
     "homepage": "https://flareapp.io",
     "bugs": "https://github.com/spatie/flare-client-js/issues",
@@ -51,22 +51,53 @@
                 "types": "./dist/inject.d.cts",
                 "default": "./dist/inject.cjs"
             }
+        },
+        "./tanstack-router": {
+            "import": {
+                "types": "./dist/tanstack-router.d.mts",
+                "default": "./dist/tanstack-router.mjs"
+            },
+            "require": {
+                "types": "./dist/tanstack-router.d.cts",
+                "default": "./dist/tanstack-router.cjs"
+            }
+        },
+        "./react-router": {
+            "import": {
+                "types": "./dist/react-router.d.mts",
+                "default": "./dist/react-router.mjs"
+            },
+            "require": {
+                "types": "./dist/react-router.d.cts",
+                "default": "./dist/react-router.cjs"
+            }
+        },
+        "./profiler": {
+            "import": {
+                "types": "./dist/profiler.d.mts",
+                "default": "./dist/profiler.mjs"
+            },
+            "require": {
+                "types": "./dist/profiler.d.cts",
+                "default": "./dist/profiler.cjs"
+            }
         }
     },
     "scripts": {
         "prepublishOnly": "npm run build",
-        "build": "tsdown src/index.ts src/inject.ts --format cjs,esm --dts --env.PACKAGE_VERSION=$(node -p \"require('./package.json').version\") --clean",
+        "build": "tsdown src/index.ts src/inject.ts src/tanstack-router.ts src/react-router.ts src/profiler.ts --format cjs,esm --dts --env.PACKAGE_VERSION=$(node -p \"require('./package.json').version\") --clean",
         "test": "vitest run",
         "typescript": "tsc --noEmit",
         "verify:inject": "node scripts/verify-inject-no-root.mjs",
         "release": "release-it"
     },
     "dependencies": {
-        "@flareapp/core": "2.7.0"
+        "@flareapp/core": "2.8.0"
     },
     "devDependencies": {
         "@flareapp/electron": "file:../electron",
         "@flareapp/js": "file:../js",
+        "@flareapp/test-helpers": "*",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.0.0",
         "@types/react": "^19.0.0",
@@ -74,13 +105,24 @@
         "jsdom": "^26.1.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-router": "^7.6.0",
         "tsdown": "^0.20.3",
         "typescript": "^5.7.0",
         "vitest": "^4.0.0"
     },
     "peerDependencies": {
-        "@flareapp/js": "^2.7.0",
-        "react": "^16.0.0||^17.0.0||^18.0.0||^19.0.0"
+        "@flareapp/js": "^2.8.0",
+        "@tanstack/react-router": ">=1.64.0 <2",
+        "react": "^16.0.0||^17.0.0||^18.0.0||^19.0.0",
+        "react-router": ">=7.0.0 <8"
+    },
+    "peerDependenciesMeta": {
+        "@tanstack/react-router": {
+            "optional": true
+        },
+        "react-router": {
+            "optional": true
+        }
     },
     "publishConfig": {
         "access": "public"