@flareapp/react 2.10.0 → 2.12.0

package/README.md

@@ -115,6 +115,18 @@ under that ancestor, whose own span closed when it finished mounting. The tree i
 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.
 
+### Self time
+
+Every component span carries `flare.component.self_time_ns`: the span's duration minus the time its own
+profiled children account for. Children that overlap in time are counted once, so the value never goes
+below zero.
+
+A child that mounts after its parent's span closed is not subtracted. Its work happened outside the
+parent's window, so the parent keeps its full duration.
+
+React starts every component during render and ends them all during commit, so sibling spans overlap in
+time. The self times of one tree therefore add up to more than the root span's duration.
+
 **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

package/dist/{flareReactErrorHandler-C-ilc2tu.mjs → flareReactErrorHandler-B2XS2p8Z.mjs}

@@ -4,25 +4,10 @@ import { Component, version } from "react";
 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+)$/;
-/**
-* 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.10.0" : "?";
+const PACKAGE_VERSION = typeof process !== "undefined" && true ? "2.12.0" : "?";
 
 //#endregion
 //#region src/identify.ts
@@ -31,12 +16,10 @@ const tagger = createIdentityTagger({
 	sdkVersion: PACKAGE_VERSION,
 	frameworkName: FrameworkName.React
 });
-/** Web path: full identity on the default singleton (sdk + framework). */
 function registerReactSdkIdentity(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) {
 	tagger.tagFramework(flare, React.version);
 }
@@ -53,12 +36,6 @@ 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);

package/dist/{flareReactErrorHandler-CnBAfhvX.cjs → flareReactErrorHandler-bT1t-xmg.cjs}

@@ -31,25 +31,10 @@ react = __toESM(react);
 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+)$/;
-/**
-* 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.10.0" : "?";
+const PACKAGE_VERSION = typeof process !== "undefined" && true ? "2.12.0" : "?";
 
 //#endregion
 //#region src/identify.ts
@@ -58,12 +43,10 @@ const tagger = (0, _flareapp_core.createIdentityTagger)({
 	sdkVersion: PACKAGE_VERSION,
 	frameworkName: _flareapp_core.FrameworkName.React
 });
-/** Web path: full identity on the default singleton (sdk + framework). */
 function registerReactSdkIdentity(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) {
 	tagger.tagFramework(flare, react.version);
 }
@@ -80,12 +63,6 @@ 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);

package/dist/index.cjs

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

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { i as registerReactSdkIdentity, n as FlareErrorBoundary, r as registerDefaultFlare, t as flareReactErrorHandler } from "./flareReactErrorHandler-C-ilc2tu.mjs";
+import { i as registerReactSdkIdentity, n as FlareErrorBoundary, r as registerDefaultFlare, t as flareReactErrorHandler } from "./flareReactErrorHandler-B2XS2p8Z.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-CnBAfhvX.cjs');
+const require_flareReactErrorHandler = require('./flareReactErrorHandler-bT1t-xmg.cjs');
 
 exports.FlareErrorBoundary = require_flareReactErrorHandler.FlareErrorBoundary;
 exports.flareReactErrorHandler = require_flareReactErrorHandler.flareReactErrorHandler;

package/dist/inject.mjs

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

package/dist/profiler.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_flareReactErrorHandler = require('./flareReactErrorHandler-CnBAfhvX.cjs');
+const require_flareReactErrorHandler = require('./flareReactErrorHandler-bT1t-xmg.cjs');
 let react = require("react");
 let _flareapp_js_browser = require("@flareapp/js/browser");
 

package/dist/react-router.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_flareReactErrorHandler = require('./flareReactErrorHandler-CnBAfhvX.cjs');
+const require_flareReactErrorHandler = require('./flareReactErrorHandler-bT1t-xmg.cjs');
 let _flareapp_js_browser = require("@flareapp/js/browser");
 
 //#region src/react-router.ts
@@ -21,11 +21,9 @@ function routeNameFromMatches(matches) {
 	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.
+* Traces a React Router v7 data router: names the `browser_pageload` root from the initial route, then
+* opens a held, parameterized `browser_navigation` root per route change once it settles. Safe to call
+* before/after tracing is enabled, and to call twice (replaces the prior instrumentation).
 */
 function traceReactRouter(router) {
 	if (typeof router?.subscribe !== "function") return () => {};

package/dist/react-router.d.cts

@@ -28,10 +28,6 @@ type ReactRouterStateLike = {
 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
@@ -43,11 +39,9 @@ type ReactRouterLike = {
  */
 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.
+ * Traces a React Router v7 data router: names the `browser_pageload` root from the initial route, then
+ * opens a held, parameterized `browser_navigation` root per route change once it settles. Safe to call
+ * before/after tracing is enabled, and to call twice (replaces the prior instrumentation).
  */
 declare function traceReactRouter(router: ReactRouterLike): () => void;
 //#endregion

package/dist/react-router.d.mts

@@ -28,10 +28,6 @@ type ReactRouterStateLike = {
 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
@@ -43,11 +39,9 @@ type ReactRouterLike = {
  */
 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.
+ * Traces a React Router v7 data router: names the `browser_pageload` root from the initial route, then
+ * opens a held, parameterized `browser_navigation` root per route change once it settles. Safe to call
+ * before/after tracing is enabled, and to call twice (replaces the prior instrumentation).
  */
 declare function traceReactRouter(router: ReactRouterLike): () => void;
 //#endregion

package/dist/react-router.mjs

@@ -19,11 +19,9 @@ function routeNameFromMatches(matches) {
 	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.
+* Traces a React Router v7 data router: names the `browser_pageload` root from the initial route, then
+* opens a held, parameterized `browser_navigation` root per route change once it settles. Safe to call
+* before/after tracing is enabled, and to call twice (replaces the prior instrumentation).
 */
 function traceReactRouter(router) {
 	if (typeof router?.subscribe !== "function") return () => {};

package/dist/tanstack-router.cjs

@@ -1,20 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_flareReactErrorHandler = require('./flareReactErrorHandler-CnBAfhvX.cjs');
+const require_flareReactErrorHandler = require('./flareReactErrorHandler-bT1t-xmg.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.
+* Traces a TanStack Router instance: names the `browser_pageload` root from the initial route, then
+* opens a parameterized `browser_navigation` root per route change. Safe to call before/after tracing
+* is enabled, and to call twice (replaces the prior instrumentation instead of stacking subscriptions).
 */
 function traceTanStackRouter(router) {
 	if (typeof router?.subscribe !== "function") return () => {};

package/dist/tanstack-router.d.cts

@@ -27,18 +27,11 @@ type TanStackRouterLike = {
 };
 //#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.
+ * Traces a TanStack Router instance: names the `browser_pageload` root from the initial route, then
+ * opens a parameterized `browser_navigation` root per route change. Safe to call before/after tracing
+ * is enabled, and to call twice (replaces the prior instrumentation instead of stacking subscriptions).
  */
 declare function traceTanStackRouter(router: TanStackRouterLike): () => void;
 //#endregion

package/dist/tanstack-router.d.mts

@@ -27,18 +27,11 @@ type TanStackRouterLike = {
 };
 //#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.
+ * Traces a TanStack Router instance: names the `browser_pageload` root from the initial route, then
+ * opens a parameterized `browser_navigation` root per route change. Safe to call before/after tracing
+ * is enabled, and to call twice (replaces the prior instrumentation instead of stacking subscriptions).
  */
 declare function traceTanStackRouter(router: TanStackRouterLike): () => void;
 //#endregion

package/dist/tanstack-router.mjs

@@ -1,18 +1,11 @@
 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.
+* Traces a TanStack Router instance: names the `browser_pageload` root from the initial route, then
+* opens a parameterized `browser_navigation` root per route change. Safe to call before/after tracing
+* is enabled, and to call twice (replaces the prior instrumentation instead of stacking subscriptions).
 */
 function traceTanStackRouter(router) {
 	if (typeof router?.subscribe !== "function") return () => {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flareapp/react",
-    "version": "2.10.0",
+    "version": "2.12.0",
     "description": "React client for flareapp.io",
     "homepage": "https://flareapp.io",
     "bugs": "https://github.com/spatie/flare-client-js/issues",
@@ -92,7 +92,7 @@
         "release": "release-it"
     },
     "dependencies": {
-        "@flareapp/core": "2.10.0"
+        "@flareapp/core": "2.12.0"
     },
     "devDependencies": {
         "@flareapp/electron": "file:../electron",
@@ -111,7 +111,7 @@
         "vitest": "^4.0.0"
     },
     "peerDependencies": {
-        "@flareapp/js": "^2.10.0",
+        "@flareapp/js": "^2.12.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"