@goliapkg/sentori-react 0.4.1 → 0.4.3

package/lib/router.d.ts

@@ -1,19 +1,28 @@
 /**
- * Subscribe to `react-router` navigation and push a `nav` breadcrumb
- * on every pathname/search/hash change. Mount once high in the tree
- * (inside the `Router` and inside `SentoriProvider`):
+ * Subscribe to `react-router` navigation. On every pathname/search/
+ * hash change this:
+ *
+ *   - pushes a `nav` breadcrumb (`{ from, to }`)
+ *   - opens a `react.navigation` span (a fresh trace root) for the new
+ *     route and makes it the active span — so any `http.client` /
+ *     other spans created while that route is mounted attach to it as
+ *     children (one trace per route instead of one per request)
+ *
+ * Mount once high in the tree (inside the `Router` and inside
+ * `SentoriProvider`):
  *
  *     function AppShell() {
  *       useSentoriRouter()
  *       return <Outlet />
  *     }
  *
- * The first render does NOT emit a breadcrumb — only actual
- * transitions are recorded.
+ * The first render does NOT emit a `nav` breadcrumb (there's no
+ * transition) but DOES open the route span for the landing page, so
+ * its requests are grouped too. On unmount the open route span is
+ * finished and the active span cleared.
  *
- * Peer dependency: `react-router >= 7`. This hook is in a separate
- * entry point so apps not using react-router don't pay the import
- * cost or trip a missing-module error.
+ * Peer dependency: `react-router >= 7`. Separate entry point so apps
+ * not using react-router don't pay the import cost.
  */
 export declare function useSentoriRouter(): void;
 //# sourceMappingURL=router.d.ts.map

package/lib/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAcvC"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAgCvC"}

package/lib/router.js

@@ -1,34 +1,59 @@
+import { setActiveSpan, startSpan } from '@goliapkg/sentori-core';
 import { useEffect, useRef } from 'react';
 import { useLocation } from 'react-router';
 import { useSentoriCtx } from './SentoriProvider.js';
 /**
- * Subscribe to `react-router` navigation and push a `nav` breadcrumb
- * on every pathname/search/hash change. Mount once high in the tree
- * (inside the `Router` and inside `SentoriProvider`):
+ * Subscribe to `react-router` navigation. On every pathname/search/
+ * hash change this:
+ *
+ *   - pushes a `nav` breadcrumb (`{ from, to }`)
+ *   - opens a `react.navigation` span (a fresh trace root) for the new
+ *     route and makes it the active span — so any `http.client` /
+ *     other spans created while that route is mounted attach to it as
+ *     children (one trace per route instead of one per request)
+ *
+ * Mount once high in the tree (inside the `Router` and inside
+ * `SentoriProvider`):
  *
  *     function AppShell() {
  *       useSentoriRouter()
  *       return <Outlet />
  *     }
  *
- * The first render does NOT emit a breadcrumb — only actual
- * transitions are recorded.
+ * The first render does NOT emit a `nav` breadcrumb (there's no
+ * transition) but DOES open the route span for the landing page, so
+ * its requests are grouped too. On unmount the open route span is
+ * finished and the active span cleared.
  *
- * Peer dependency: `react-router >= 7`. This hook is in a separate
- * entry point so apps not using react-router don't pay the import
- * cost or trip a missing-module error.
+ * Peer dependency: `react-router >= 7`. Separate entry point so apps
+ * not using react-router don't pay the import cost.
  */
 export function useSentoriRouter() {
     const { addBreadcrumb } = useSentoriCtx();
     const location = useLocation();
     const prevRef = useRef(null);
+    const openSpanRef = useRef(null);
     const next = location.pathname + location.search + location.hash;
     useEffect(() => {
         const prev = prevRef.current;
-        if (prev !== null && prev !== next) {
+        if (prev === next)
+            return;
+        if (prev !== null)
             addBreadcrumb('nav', { from: prev, to: next });
-        }
+        openSpanRef.current?.finish({ status: 'ok' });
+        const span = startSpan('react.navigation', {
+            name: prev ? `${prev} → ${next}` : next,
+            parent: null, // each route is its own trace root
+            tags: { 'nav.from': prev ?? '', 'nav.to': next },
+        });
+        openSpanRef.current = span;
+        setActiveSpan(span);
         prevRef.current = next;
     }, [addBreadcrumb, next]);
+    useEffect(() => () => {
+        openSpanRef.current?.finish({ status: 'ok' });
+        openSpanRef.current = null;
+        setActiveSpan(null);
+    }, []);
 }
 //# sourceMappingURL=router.js.map

package/lib/router.js.map

@@ -1 +1 @@
-{"version":3,"file":"router.js","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAEpD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,gBAAgB;IAC9B,MAAM,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,CAAA;IACzC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,MAAM,OAAO,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAA;IAE3C,MAAM,IAAI,GAAG,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAA;IAEhE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAC5B,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YACnC,aAAa,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAA;QAChD,CAAC;QACD,OAAO,CAAC,OAAO,GAAG,IAAI,CAAA;IACxB,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAA;AAC3B,CAAC"}
+{"version":3,"file":"router.js","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAmB,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,gBAAgB;IAC9B,MAAM,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,CAAA;IACzC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,MAAM,OAAO,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAA;IAC3C,MAAM,WAAW,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAEnD,MAAM,IAAI,GAAG,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAA;IAEhE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAC5B,IAAI,IAAI,KAAK,IAAI;YAAE,OAAM;QACzB,IAAI,IAAI,KAAK,IAAI;YAAE,aAAa,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAA;QAEjE,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAA;QAC7C,MAAM,IAAI,GAAG,SAAS,CAAC,kBAAkB,EAAE;YACzC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI;YACvC,MAAM,EAAE,IAAI,EAAE,mCAAmC;YACjD,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;SACjD,CAAC,CAAA;QACF,WAAW,CAAC,OAAO,GAAG,IAAI,CAAA;QAC1B,aAAa,CAAC,IAAI,CAAC,CAAA;QACnB,OAAO,CAAC,OAAO,GAAG,IAAI,CAAA;IACxB,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAA;IAEzB,SAAS,CACP,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAA;QAC7C,WAAW,CAAC,OAAO,GAAG,IAAI,CAAA;QAC1B,aAAa,CAAC,IAAI,CAAC,CAAA;IACrB,CAAC,EACD,EAAE,CACH,CAAA;AACH,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@goliapkg/sentori-react",
-  "version": "0.4.1",
-  "description": "React adapter for Sentori — Provider, ErrorBoundary (resetKeys + render-prop), Suspense, TraceRender, react-router breadcrumbs + auto-tracing.",
+  "version": "0.4.3",
+  "description": "React adapter for Sentori \u2014 Provider, ErrorBoundary (resetKeys + render-prop), Suspense, TraceRender, react-router breadcrumbs + auto-tracing.",
   "license": "MIT",
   "homepage": "https://sentori.golia.jp",
   "repository": {
@@ -56,8 +56,8 @@
     }
   },
   "dependencies": {
-    "@goliapkg/sentori-core": "0.3.0",
-    "@goliapkg/sentori-javascript": "0.3.1"
+    "@goliapkg/sentori-core": "0.4.0",
+    "@goliapkg/sentori-javascript": "0.3.3"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^17",

package/src/__tests__/router.test.tsx

@@ -1,5 +1,12 @@
+import {
+  __resetTraceContextForTests,
+  __useFallbackTraceContextForTests,
+  clearSpans,
+  drainSpans,
+  setActiveSpan,
+} from '@goliapkg/sentori-core'
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
-import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
+import { afterAll, afterEach, beforeEach, describe, expect, test } from 'bun:test'
 import { Link, MemoryRouter, Route, Routes } from 'react-router'
 
 import { clearBreadcrumbs, getBreadcrumbs } from '@goliapkg/sentori-javascript'
@@ -31,11 +38,23 @@ function Shell() {
   )
 }
 
+const navSpans = () => drainSpans().filter((s) => s.op === 'react.navigation')
+
 describe('useSentoriRouter', () => {
-  beforeEach(() => clearBreadcrumbs())
+  beforeEach(() => {
+    __useFallbackTraceContextForTests() // see navigation.test.ts
+    clearBreadcrumbs()
+    clearSpans()
+    setActiveSpan(null)
+  })
   afterEach(() => {
     cleanup()
     clearBreadcrumbs()
+    clearSpans()
+    setActiveSpan(null)
+  })
+  afterAll(() => {
+    __resetTraceContextForTests()
   })
 
   test('initial mount does NOT emit a nav breadcrumb', () => {
@@ -73,4 +92,24 @@ describe('useSentoriRouter', () => {
     expect(navsAfter).toHaveLength(2)
     expect(navsAfter[1]?.data).toEqual({ from: '/orders', to: '/billing' })
   })
+
+  test('opens a react.navigation span per route (initial + each transition)', () => {
+    render(
+      <SentoriProvider {...PROVIDER_PROPS}>
+        <MemoryRouter initialEntries={['/']}>
+          <Shell />
+        </MemoryRouter>
+      </SentoriProvider>,
+    )
+    fireEvent.click(screen.getByText('orders'))
+    fireEvent.click(screen.getByText('billing'))
+    cleanup() // unmount → finishes the last open span
+
+    const spans = navSpans()
+    expect(spans.map((s) => s.name)).toEqual(['/', '/ → /orders', '/orders → /billing'])
+    // each route is its own trace root
+    expect(spans.every((s) => s.parentSpanId === null)).toBe(true)
+    expect(new Set(spans.map((s) => s.traceId)).size).toBe(3)
+    expect(spans[1]?.tags).toEqual({ 'nav.from': '/', 'nav.to': '/orders' })
+  })
 })

package/src/router.ts

@@ -1,37 +1,65 @@
+import { setActiveSpan, type SpanHandle, startSpan } from '@goliapkg/sentori-core'
 import { useEffect, useRef } from 'react'
 import { useLocation } from 'react-router'
 
 import { useSentoriCtx } from './SentoriProvider.js'
 
 /**
- * Subscribe to `react-router` navigation and push a `nav` breadcrumb
- * on every pathname/search/hash change. Mount once high in the tree
- * (inside the `Router` and inside `SentoriProvider`):
+ * Subscribe to `react-router` navigation. On every pathname/search/
+ * hash change this:
+ *
+ *   - pushes a `nav` breadcrumb (`{ from, to }`)
+ *   - opens a `react.navigation` span (a fresh trace root) for the new
+ *     route and makes it the active span — so any `http.client` /
+ *     other spans created while that route is mounted attach to it as
+ *     children (one trace per route instead of one per request)
+ *
+ * Mount once high in the tree (inside the `Router` and inside
+ * `SentoriProvider`):
  *
  *     function AppShell() {
  *       useSentoriRouter()
  *       return <Outlet />
  *     }
  *
- * The first render does NOT emit a breadcrumb — only actual
- * transitions are recorded.
+ * The first render does NOT emit a `nav` breadcrumb (there's no
+ * transition) but DOES open the route span for the landing page, so
+ * its requests are grouped too. On unmount the open route span is
+ * finished and the active span cleared.
  *
- * Peer dependency: `react-router >= 7`. This hook is in a separate
- * entry point so apps not using react-router don't pay the import
- * cost or trip a missing-module error.
+ * Peer dependency: `react-router >= 7`. Separate entry point so apps
+ * not using react-router don't pay the import cost.
  */
 export function useSentoriRouter(): void {
   const { addBreadcrumb } = useSentoriCtx()
   const location = useLocation()
   const prevRef = useRef<null | string>(null)
+  const openSpanRef = useRef<null | SpanHandle>(null)
 
   const next = location.pathname + location.search + location.hash
 
   useEffect(() => {
     const prev = prevRef.current
-    if (prev !== null && prev !== next) {
-      addBreadcrumb('nav', { from: prev, to: next })
-    }
+    if (prev === next) return
+    if (prev !== null) addBreadcrumb('nav', { from: prev, to: next })
+
+    openSpanRef.current?.finish({ status: 'ok' })
+    const span = startSpan('react.navigation', {
+      name: prev ? `${prev} → ${next}` : next,
+      parent: null, // each route is its own trace root
+      tags: { 'nav.from': prev ?? '', 'nav.to': next },
+    })
+    openSpanRef.current = span
+    setActiveSpan(span)
     prevRef.current = next
   }, [addBreadcrumb, next])
+
+  useEffect(
+    () => () => {
+      openSpanRef.current?.finish({ status: 'ok' })
+      openSpanRef.current = null
+      setActiveSpan(null)
+    },
+    [],
+  )
 }