@logbrew/react-native 0.1.0 → 0.1.2

package/examples/package.json

@@ -2,9 +2,16 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "apollo-link-spans": "node ./index.mjs apollo-link-spans",
     "help": "node ./index.mjs --help",
+    "instrumentation-kit": "node ./index.mjs instrumentation-kit",
+    "lifecycle-spans": "node ./index.mjs lifecycle-spans",
     "list": "node ./index.mjs --list",
+    "native-bridge-scope": "node ./index.mjs native-bridge-scope",
+    "navigation-resource-spans": "node ./index.mjs navigation-resource-spans",
     "readme-example": "node ./index.mjs readme-example",
-    "real-user-smoke": "node ./index.mjs real-user-smoke"
+    "real-user-smoke": "node ./index.mjs real-user-smoke",
+    "resource-fetch-spans": "node ./index.mjs resource-fetch-spans",
+    "trace-correlation": "node ./index.mjs trace-correlation"
   }
 }

package/examples/real-user-smoke.mjs

@@ -1,12 +1,19 @@
 import { RecordingTransport } from "@logbrew/sdk";
 import {
+  captureReactNativeAction,
   captureReactNativeError,
+  captureReactNativeNetwork,
   captureScreenView,
   createAppStateListener,
   createLogBrewReactNativeClient,
+  createReactNativeSpanAttributes,
+  createReactNativeTraceContext,
+  createReactNativeTraceHeaders,
   createReactNativeTraceparent,
   createTraceparentFetch,
-  shouldPropagateTraceparent
+  getActiveLogBrewTrace,
+  shouldPropagateTraceparent,
+  withLogBrewTrace
 } from "@logbrew/react-native";
 
 const fakePlatform = {
@@ -34,19 +41,27 @@ const client = createLogBrewReactNativeClient({
   sdkVersion: "0.1.0",
   maxRetries: 1
 });
+const trace = createReactNativeTraceContext({
+  traceparent: "00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01",
+  spanId: "b7ad6b7169203331"
+});
+const activeTraceparent = createReactNativeTraceHeaders(trace).traceparent;
 
 addCoreEvents(client);
-captureScreenView(client, "Checkout", {
-  id: "evt_action_001",
-  timestamp: "2026-06-02T10:00:05Z",
-  platform: fakePlatform,
-  appState: fakeAppState,
-  metadata: { flow: "checkout" }
+withLogBrewTrace(trace, () => {
+  captureScreenView(client, "Checkout", {
+    id: "evt_action_001",
+    timestamp: "2026-06-02T10:00:05Z",
+    platform: fakePlatform,
+    appState: fakeAppState,
+    metadata: { flow: "checkout" }
+  });
 });
 const stopListening = createAppStateListener(client, fakeAppState, {
   id: "evt_action_app_state_background",
   timestamp: "2026-06-02T10:00:06Z",
-  platform: fakePlatform
+  platform: fakePlatform,
+  trace
 });
 appStateListener("background");
 stopListening();
@@ -57,6 +72,7 @@ captureReactNativeError(client, handledError, {
   platform: fakePlatform,
   appState: fakeAppState,
   screen: "Checkout",
+  trace,
   metadata: { flow: "checkout", handled: true }
 });
 
@@ -84,6 +100,19 @@ await tracedFetch("https://cdn.example.test/app.js", {
   headers: { accept: "text/javascript" }
 });
 await tracedFetch("/mobile-api/cart");
+const activeTraceRequests = [];
+let activeTraceFetchPromise;
+withLogBrewTrace(trace, () => {
+  const activeTraceFetch = createTraceparentFetch({
+    fetchImpl: async (input, init = {}) => {
+      activeTraceRequests.push({ input, init });
+      return { status: 204 };
+    },
+    tracePropagationTargets: ["https://api.example.test/"]
+  });
+  activeTraceFetchPromise = activeTraceFetch("https://api.example.test/mobile");
+});
+await activeTraceFetchPromise;
 const propagatedTraceparent = propagatedRequests[0].init.headers.traceparent;
 if (propagatedTraceparent !== "00-0102030405060708090a0b0c0d0e0f10-0102030405060708-01") {
   throw new Error(`unexpected propagated traceparent: ${propagatedTraceparent}`);
@@ -97,6 +126,71 @@ if (propagatedRequests[1].init.headers?.traceparent !== undefined) {
 if (propagatedRequests[2].init.headers.traceparent !== propagatedTraceparent) {
   throw new Error("relative matched requests should receive traceparent");
 }
+if (activeTraceRequests[0].init.headers.traceparent !== activeTraceparent) {
+  throw new Error(`expected active trace fetch to reuse current trace: ${activeTraceRequests[0].init.headers.traceparent}`);
+}
+if (getActiveLogBrewTrace() !== undefined) {
+  throw new Error("active trace should be cleared after scoped fetch");
+}
+
+const timelineClient = createLogBrewReactNativeClient({
+  clientKey: "LOGBREW_CLIENT_KEY",
+  sdkName: "logbrew-react-native-timeline-smoke",
+  sdkVersion: "0.1.0",
+  maxRetries: 1
+});
+captureReactNativeAction(timelineClient, {
+  id: "evt_native_action_checkout_submit",
+  timestamp: "2026-06-02T10:00:08Z",
+  platform: fakePlatform,
+  appState: fakeAppState,
+  name: "checkout.submit",
+  screen: "Checkout",
+  sessionId: "session_mobile_001",
+  traceId: "trace_mobile_001",
+  metadata: {
+    funnel: "checkout",
+    step: "submit",
+    nested: { dropped: true }
+  }
+});
+captureReactNativeNetwork(timelineClient, {
+  id: "evt_native_network_checkout",
+  timestamp: "2026-06-02T10:00:09Z",
+  platform: fakePlatform,
+  appState: fakeAppState,
+  method: "post",
+  routeTemplate: "/api/checkout?email=dev@example.test#pay",
+  statusCode: 503,
+  durationMs: 241,
+  screen: "Checkout",
+  sessionId: "session_mobile_001",
+  trace
+});
+timelineClient.span("evt_native_span_checkout", "2026-06-02T10:00:10Z", createReactNativeSpanAttributes({
+  name: "mobile.checkout",
+  status: "ok",
+  durationMs: 245,
+  trace
+}));
+const timelineEvents = JSON.parse(timelineClient.previewJson()).events;
+if (timelineEvents.length !== 3) {
+  throw new Error(`expected three timeline events, got ${timelineEvents.length}`);
+}
+const timelineAction = timelineEvents[0].attributes;
+if (timelineAction.metadata.source !== "react-native.action" || timelineAction.metadata.nested !== undefined) {
+  throw new Error(`unexpected action timeline metadata: ${JSON.stringify(timelineAction.metadata)}`);
+}
+const timelineNetwork = timelineEvents[1].attributes;
+if (timelineNetwork.name !== "POST /api/checkout" || timelineNetwork.status !== "failure") {
+  throw new Error(`unexpected network timeline event: ${JSON.stringify(timelineNetwork)}`);
+}
+if (timelineNetwork.metadata.routeTemplate !== "/api/checkout" || timelineNetwork.metadata.method !== "POST") {
+  throw new Error(`expected sanitized network metadata: ${JSON.stringify(timelineNetwork.metadata)}`);
+}
+if (timelineNetwork.metadata.traceId !== trace.traceId || timelineEvents[2].attributes.traceId !== trace.traceId) {
+  throw new Error("expected network and span timeline events to share the trace");
+}
 
 const preview = client.previewJson();
 const transport = new RecordingTransport([{ statusCode: 503 }, { statusCode: 202 }]);
@@ -108,7 +202,10 @@ console.error(JSON.stringify({
   attempts: response.attempts,
   events: 8,
   listenerRemoved: appStateListener === null,
-  propagatedTraceparent
+  timelineEvents: timelineEvents.length,
+  networkAction: timelineNetwork.name,
+  propagatedTraceparent,
+  activeTraceparent
 }));
 
 function addCoreEvents(client) {

package/examples/resource-fetch-spans.mjs

@@ -0,0 +1,133 @@
+import { RecordingTransport } from "@logbrew/sdk";
+import {
+  createLogBrewReactNativeClient,
+  createReactNativeTraceContext
+} from "@logbrew/react-native";
+import {
+  createReactNativeGraphQLMetadataFactory,
+  createReactNativeResourceFetch
+} from "@logbrew/react-native/resource-fetch";
+
+const platform = {
+  OS: "ios",
+  Version: "18.5",
+  isPad: false,
+  constants: { isTesting: true }
+};
+const appState = { currentState: "active" };
+const client = createLogBrewReactNativeClient({
+  clientKey: "LOGBREW_CLIENT_KEY",
+  sdkName: "logbrew-react-native-resource-fetch-spans",
+  sdkVersion: "0.1.0",
+  maxRetries: 1
+});
+const trace = createReactNativeTraceContext({
+  traceparent: "00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01",
+  spanId: "c2ad6b7169204442"
+});
+const requests = [];
+const timestamps = [
+  "2026-06-02T10:21:00Z",
+  "2026-06-02T10:21:01Z"
+];
+const phaseTimes = [1000, 1041, 1167, 2000, 2031];
+
+const resourceFetch = createReactNativeResourceFetch(client, {
+  fetchImpl: async (input, init = {}) => {
+    requests.push({ input, init });
+    if (String(input).includes("/api/fail")) {
+      throw new TypeError("network request failed");
+    }
+    return {
+      status: 202,
+      headers: {
+        get(name) {
+          return String(name).toLowerCase() === "content-length" ? "1536" : null;
+        }
+      }
+    };
+  },
+  metadata: { flow: "checkout", nested: { dropped: true } },
+  metadataFactory: createReactNativeGraphQLMetadataFactory(),
+  now: () => timestamps.shift(),
+  nowMs: () => phaseTimes.shift(),
+  platform,
+  appState,
+  screen: "Checkout",
+  sessionId: "session_mobile_001",
+  trace,
+  tracePropagationTargets: ["https://api.example.test/"]
+});
+
+await resourceFetch("https://api.example.test/api/checkout?email=dev@example.test", {
+  method: "POST",
+  headers: { accept: "application/json" },
+  body: JSON.stringify({
+    query: "mutation CheckoutSubmit($email: String!) { checkout(email: $email) { id } }",
+    variables: { email: "dev@example.test" }
+  })
+});
+try {
+  await resourceFetch("https://cdn.example.test/api/fail?debug=hidden", {
+    method: "GET"
+  });
+} catch (error) {
+  if (!(error instanceof TypeError)) {
+    throw error;
+  }
+}
+
+const events = JSON.parse(client.previewJson()).events;
+if (events.length !== 2) {
+  throw new Error(`expected two resource fetch spans, got ${events.length}`);
+}
+if (requests[0].init.headers.traceparent !== `00-${trace.traceId}-${trace.spanId}-01`) {
+  throw new Error(`expected API request traceparent, got ${requests[0].init.headers.traceparent}`);
+}
+if (requests[1].init.headers?.traceparent !== undefined) {
+  throw new Error("non-target resource fetch should not receive traceparent");
+}
+const success = events[0].attributes;
+if (
+  success.name !== "POST /api/checkout" ||
+  success.status !== "ok" ||
+  success.durationMs !== 167 ||
+  success.metadata.routeTemplate !== "/api/checkout" ||
+  success.metadata.responseStartDurationMs !== 41 ||
+  success.metadata.graphqlOperationName !== "CheckoutSubmit" ||
+  success.metadata.graphqlOperationType !== "mutation" ||
+  success.metadata.responseSizeBytes !== 1536 ||
+  success.metadata.graphqlVariables !== undefined ||
+  success.metadata.requestBody !== undefined ||
+  success.metadata.traceId !== trace.traceId ||
+  success.metadata.nested !== undefined
+) {
+  throw new Error(`unexpected success resource span: ${JSON.stringify(success)}`);
+}
+if (JSON.stringify(events).includes("dev@example.test") || JSON.stringify(events).includes("checkout(email")) {
+  throw new Error("GraphQL resource span leaked request body content");
+}
+const failure = events[1].attributes;
+if (
+  failure.name !== "GET /api/fail" ||
+  failure.status !== "error" ||
+  failure.durationMs !== 31 ||
+  failure.metadata.routeTemplate !== "/api/fail" ||
+  failure.metadata.fetchErrorName !== "TypeError" ||
+  failure.metadata.traceId !== trace.traceId
+) {
+  throw new Error(`unexpected failed resource span: ${JSON.stringify(failure)}`);
+}
+
+const preview = client.previewJson();
+const response = await client.shutdown(RecordingTransport.alwaysAccept());
+console.log(preview);
+console.error(JSON.stringify({
+  ok: true,
+  events: events.length,
+  status: response.statusCode,
+  successSpan: success.name,
+  failureSpan: failure.name,
+  propagatedTraceparent: requests[0].init.headers.traceparent,
+  traceId: trace.traceId
+}));

package/examples/trace-correlation.mjs

@@ -0,0 +1,135 @@
+import { RecordingTransport } from "@logbrew/sdk";
+import {
+  captureReactNativeAction,
+  captureReactNativeError,
+  captureReactNativeNetwork,
+  captureScreenView,
+  createLogBrewReactNativeClient,
+  createReactNativeSpanAttributes,
+  createReactNativeTraceContext,
+  createTraceparentFetch,
+  getActiveLogBrewTrace,
+  withLogBrewTrace
+} from "@logbrew/react-native";
+
+const platform = {
+  OS: "ios",
+  Version: "18.0",
+  isPad: false,
+  constants: { isTesting: true }
+};
+const appState = { currentState: "active" };
+const client = createLogBrewReactNativeClient({
+  clientKey: "LOGBREW_CLIENT_KEY",
+  sdkName: "logbrew-react-native-trace-correlation",
+  sdkVersion: "0.1.0",
+  maxRetries: 1
+});
+
+const trace = createReactNativeTraceContext({
+  traceparent: "00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01",
+  spanId: "b7ad6b7169203331"
+});
+const requests = [];
+let tracedFetchPromise;
+
+withLogBrewTrace(trace, (activeTrace) => {
+  captureScreenView(client, "Checkout", {
+    id: "evt_trace_screen_checkout",
+    timestamp: "2026-06-02T10:10:00Z",
+    platform,
+    appState,
+    metadata: { traceId: "spoofed_trace_id", flow: "checkout" }
+  });
+  captureReactNativeAction(client, {
+    id: "evt_trace_action_submit",
+    timestamp: "2026-06-02T10:10:01Z",
+    platform,
+    appState,
+    name: "checkout.submit",
+    screen: "Checkout"
+  });
+  captureReactNativeNetwork(client, {
+    id: "evt_trace_network_checkout",
+    timestamp: "2026-06-02T10:10:02Z",
+    platform,
+    appState,
+    method: "post",
+    routeTemplate: "/api/checkout?email=dev@example.test",
+    statusCode: 202,
+    durationMs: 128,
+    screen: "Checkout"
+  });
+  captureReactNativeError(client, new Error("Checkout failed on device"), {
+    id: "evt_trace_error_checkout",
+    timestamp: "2026-06-02T10:10:03Z",
+    platform,
+    appState,
+    screen: "Checkout"
+  });
+  client.span("evt_trace_span_checkout", "2026-06-02T10:10:04Z", createReactNativeSpanAttributes({
+    name: "mobile.checkout",
+    status: "ok",
+    durationMs: 132.5,
+    trace: activeTrace,
+    metadata: { screen: "Checkout" }
+  }));
+
+  const tracedFetch = createTraceparentFetch({
+    fetchImpl: async (input, init = {}) => {
+      requests.push({ input, init });
+      return { status: 204 };
+    },
+    tracePropagationTargets: ["https://api.example.test/"]
+  });
+  tracedFetchPromise = tracedFetch("https://api.example.test/checkout", {
+    headers: { accept: "application/json" }
+  });
+});
+await tracedFetchPromise;
+
+const events = JSON.parse(client.previewJson()).events;
+const propagatedTraceparent = requests[0]?.init?.headers?.traceparent;
+if (getActiveLogBrewTrace() !== undefined) {
+  throw new Error("active trace should be cleared after scope");
+}
+if (events.length !== 5) {
+  throw new Error(`expected five trace-correlated events, got ${events.length}`);
+}
+for (const event of events) {
+  const metadata = event.attributes.metadata ?? {};
+  if (event.type === "span") {
+    if (event.attributes.traceId !== trace.traceId || event.attributes.spanId !== trace.spanId) {
+      throw new Error(`span was not correlated: ${JSON.stringify(event.attributes)}`);
+    }
+    continue;
+  }
+  if (metadata.traceId !== trace.traceId || metadata.spanId !== trace.spanId || metadata.parentSpanId !== trace.parentSpanId) {
+    throw new Error(`event was not trace-correlated: ${JSON.stringify(event)}`);
+  }
+}
+if (events[0].attributes.metadata.traceId === "spoofed_trace_id") {
+  throw new Error("active trace metadata should overwrite spoofed trace keys");
+}
+if (events[2].attributes.metadata.routeTemplate !== "/api/checkout") {
+  throw new Error("network route metadata should strip query text");
+}
+if (events[3].attributes.metadata.errorStack !== undefined) {
+  throw new Error("React Native error stack should remain opt-in");
+}
+if (propagatedTraceparent !== "00-4bf92f3577b34da6a3ce929d0e0e4736-b7ad6b7169203331-01") {
+  throw new Error(`unexpected outgoing traceparent: ${propagatedTraceparent}`);
+}
+
+const preview = client.previewJson();
+const response = await client.shutdown(RecordingTransport.alwaysAccept());
+console.log(preview);
+console.error(JSON.stringify({
+  ok: true,
+  events: events.length,
+  status: response.statusCode,
+  traceId: trace.traceId,
+  spanId: trace.spanId,
+  parentSpanId: trace.parentSpanId,
+  propagatedTraceparent
+}));