@logbrew/react-native 0.1.0 → 0.1.2

package/apollo.js

@@ -0,0 +1,294 @@
+import { SdkError } from "@logbrew/sdk";
+import {
+  captureReactNativeResourceSpan,
+  createReactNativeTraceContext,
+  createReactNativeTraceHeaders,
+  getActiveLogBrewTrace
+} from "./index.js";
+import {
+  safeReactNativeMetadataFactoryResult
+} from "./metadata.js";
+
+const MAX_GRAPHQL_OPERATION_NAME_CHARS = 128;
+const GRAPHQL_OPERATION_NAME_RE = /^[_A-Za-z][_0-9A-Za-z]*$/u;
+const GRAPHQL_OPERATION_TYPES = new Set(["query", "mutation", "subscription"]);
+
+export function createReactNativeApolloLink(client, {
+  ApolloLink,
+  appState,
+  metadata = {},
+  metadataFactory,
+  now = () => new Date().toISOString(),
+  nowMs = () => Date.now(),
+  platform,
+  propagateTraceparent = true,
+  randomValues,
+  screen,
+  sessionId,
+  trace,
+  traceFlags = "01"
+} = {}) {
+  if (typeof ApolloLink !== "function") {
+    throw new SdkError("configuration_error", "createReactNativeApolloLink requires an app-provided ApolloLink constructor");
+  }
+  if (metadataFactory !== undefined && typeof metadataFactory !== "function") {
+    throw new SdkError("configuration_error", "metadataFactory must be a function");
+  }
+
+  return new ApolloLink((operation, forward) => {
+    if (typeof forward !== "function") {
+      throw new SdkError("configuration_error", "createReactNativeApolloLink requires Apollo forward");
+    }
+
+    const startedAtMs = nowMs();
+    const timestamp = now();
+    const activeTrace = apolloTraceContext({ randomValues, trace, traceFlags });
+    const details = apolloOperationDetails(operation);
+    if (propagateTraceparent) {
+      setOperationTraceparent(operation, activeTrace);
+    }
+
+    let forwarded;
+    try {
+      forwarded = forward(operation);
+    } catch (error) {
+      captureApolloSpan(client, {
+        activeTrace,
+        appState,
+        details,
+        durationMs: elapsedMs(startedAtMs, nowMs),
+        error,
+        metadata,
+        metadataFactory,
+        now,
+        platform,
+        screen,
+        sessionId,
+        status: "error",
+        timestamp
+      });
+      throw error;
+    }
+
+    if (!forwarded || typeof forwarded.subscribe !== "function") {
+      throw new SdkError("configuration_error", "Apollo forward must return an observable-like value");
+    }
+
+    return apolloObservable(forwarded, {
+      activeTrace,
+      appState,
+      client,
+      details,
+      metadata,
+      metadataFactory,
+      now,
+      nowMs,
+      platform,
+      screen,
+      sessionId,
+      startedAtMs,
+      timestamp
+    });
+  });
+}
+
+function apolloObservable(forwarded, options) {
+  return {
+    subscribe(observerOrNext, onError, onComplete) {
+      const observer = apolloObserver(observerOrNext, onError, onComplete);
+      let finished = false;
+      let graphqlErrorCount = 0;
+
+      const finish = ({ error, status }) => {
+        if (finished) {
+          return;
+        }
+        finished = true;
+        captureApolloSpan(options.client, {
+          activeTrace: options.activeTrace,
+          appState: options.appState,
+          details: options.details,
+          durationMs: elapsedMs(options.startedAtMs, options.nowMs),
+          error,
+          graphqlErrorCount,
+          metadata: options.metadata,
+          metadataFactory: options.metadataFactory,
+          now: options.now,
+          platform: options.platform,
+          screen: options.screen,
+          sessionId: options.sessionId,
+          status,
+          timestamp: options.timestamp
+        });
+      };
+
+      try {
+        return forwarded.subscribe({
+          next(value) {
+            graphqlErrorCount += graphqlErrorCountFromResult(value);
+            observer.next?.(value);
+          },
+          error(error) {
+            finish({ error, status: "error" });
+            observer.error?.(error);
+          },
+          complete() {
+            finish({ status: graphqlErrorCount > 0 ? "error" : "ok" });
+            observer.complete?.();
+          }
+        });
+      } catch (error) {
+        finish({ error, status: "error" });
+        throw error;
+      }
+    }
+  };
+}
+
+function captureApolloSpan(client, {
+  activeTrace,
+  appState,
+  details,
+  durationMs,
+  error,
+  graphqlErrorCount,
+  metadata,
+  metadataFactory,
+  now,
+  platform,
+  screen,
+  sessionId,
+  status,
+  timestamp
+}) {
+  const context = {
+    durationMs,
+    error,
+    operationName: details.operationName,
+    operationType: details.operationType,
+    screen,
+    status
+  };
+  captureReactNativeResourceSpan(client, {
+    appState,
+    durationMs,
+    id: defaultApolloSpanId({ operationName: details.operationName, operationType: details.operationType, screen }),
+    kind: "graphql",
+    metadata: {
+      ...metadata,
+      ...safeReactNativeMetadataFactoryResult(typeof metadataFactory === "function" ? metadataFactory(context) : undefined),
+      errorName: errorName(error),
+      errorValueType: error === undefined ? undefined : typeof error,
+      framework: "apollo-client",
+      graphqlErrorCount: graphqlErrorCount && graphqlErrorCount > 0 ? graphqlErrorCount : undefined,
+      graphqlOperationName: details.operationName,
+      graphqlOperationType: details.operationType,
+      source: "react-native.apollo"
+    },
+    name: apolloSpanName(details),
+    now,
+    platform,
+    screen,
+    sessionId,
+    status,
+    timestamp,
+    trace: activeTrace
+  });
+}
+
+function setOperationTraceparent(operation, trace) {
+  if (!operation || typeof operation.setContext !== "function") {
+    return;
+  }
+  const traceparent = createReactNativeTraceHeaders(trace).traceparent;
+  operation.setContext(({ headers = {} } = {}) => ({
+    headers: {
+      ...headers,
+      traceparent
+    }
+  }));
+}
+
+function apolloOperationDetails(operation) {
+  const definition = operation?.query?.definitions?.find?.((candidate) => (
+    candidate?.kind === "OperationDefinition" && GRAPHQL_OPERATION_TYPES.has(candidate?.operation)
+  ));
+  return {
+    operationName: safeGraphqlOperationName(operation?.operationName) ?? safeGraphqlOperationName(definition?.name?.value),
+    operationType: GRAPHQL_OPERATION_TYPES.has(definition?.operation) ? definition.operation : undefined
+  };
+}
+
+function apolloSpanName({ operationName, operationType }) {
+  const base = `graphql.${operationType ?? "operation"}`;
+  return operationName ? `${base} ${operationName}` : base;
+}
+
+function apolloTraceContext({ randomValues, trace, traceFlags }) {
+  if (typeof trace === "string") {
+    return createReactNativeTraceContext({ randomValues, traceFlags, traceparent: trace });
+  }
+  return trace ?? getActiveLogBrewTrace() ?? createReactNativeTraceContext({ randomValues, traceFlags });
+}
+
+function apolloObserver(observerOrNext, onError, onComplete) {
+  if (typeof observerOrNext === "function") {
+    return {
+      next: observerOrNext,
+      error: onError,
+      complete: onComplete
+    };
+  }
+  return observerOrNext && typeof observerOrNext === "object" ? observerOrNext : {};
+}
+
+function graphqlErrorCountFromResult(value) {
+  return Array.isArray(value?.errors) ? value.errors.length : 0;
+}
+
+function safeGraphqlOperationName(value) {
+  if (typeof value !== "string") {
+    return undefined;
+  }
+  const name = value.trim();
+  if (
+    name.length === 0 ||
+    name.length > MAX_GRAPHQL_OPERATION_NAME_CHARS ||
+    !GRAPHQL_OPERATION_NAME_RE.test(name)
+  ) {
+    return undefined;
+  }
+  return name;
+}
+
+function elapsedMs(startedAtMs, nowMs) {
+  const durationMs = nowMs() - startedAtMs;
+  return Number.isFinite(durationMs) ? Math.max(0, durationMs) : undefined;
+}
+
+function errorName(error) {
+  if (error instanceof Error && typeof error.name === "string" && error.name.trim() !== "") {
+    return error.name;
+  }
+  if (typeof error?.name === "string" && error.name.trim() !== "") {
+    return error.name;
+  }
+  return undefined;
+}
+
+function defaultApolloSpanId({ operationName, operationType, screen }) {
+  return `evt_native_apollo_${slugify([screen, operationType, operationName].filter(Boolean).join("_") || "operation")}`;
+}
+
+function slugify(value) {
+  return String(value)
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/gu, "_")
+    .replace(/^_+|_+$/gu, "")
+    .slice(0, 96) || "event";
+}
+
+export default {
+  createReactNativeApolloLink
+};

package/examples/apollo-link-spans.mjs

@@ -0,0 +1,149 @@
+import { RecordingTransport } from "@logbrew/sdk";
+import {
+  createLogBrewReactNativeClient,
+  createReactNativeTraceContext
+} from "@logbrew/react-native";
+import {
+  createReactNativeApolloLink
+} from "@logbrew/react-native/apollo";
+
+class ApolloLink {
+  constructor(request) {
+    this.request = request;
+  }
+}
+
+function observableFrom(handler) {
+  return {
+    subscribe(observer) {
+      handler(observer);
+      return { unsubscribe() {} };
+    }
+  };
+}
+
+let context = {
+  headers: {
+    accept: "application/json",
+    authorization: "RedactedAuthHeader"
+  }
+};
+const operation = {
+  operationName: "CheckoutSubmit",
+  query: {
+    definitions: [
+      { kind: "OperationDefinition", operation: "mutation" }
+    ]
+  },
+  getContext() {
+    return context;
+  },
+  setContext(nextContext) {
+    const resolved = typeof nextContext === "function" ? nextContext(context) : nextContext;
+    context = {
+      ...context,
+      ...resolved,
+      headers: {
+        ...(context.headers ?? {}),
+        ...(resolved?.headers ?? {})
+      }
+    };
+  }
+};
+
+const client = createLogBrewReactNativeClient({
+  clientKey: "LOGBREW_CLIENT_KEY",
+  sdkName: "logbrew-react-native-apollo-link-spans",
+  sdkVersion: "0.1.0",
+  maxRetries: 1
+});
+const trace = createReactNativeTraceContext({
+  traceparent: "00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01",
+  spanId: "c3ad6b7169205553"
+});
+const times = [1000, 1041, 2000, 2027];
+const timestamps = [
+  "2026-06-30T08:10:00Z",
+  "2026-06-30T08:10:01Z"
+];
+const link = createReactNativeApolloLink(client, {
+  ApolloLink,
+  metadata: { flow: "checkout" },
+  metadataFactory(details) {
+    return {
+      feature: details.operationName,
+      requestBody: "{ redacted }",
+      variables: { email: "hidden@example.test" }
+    };
+  },
+  now: () => timestamps.shift(),
+  nowMs: () => times.shift(),
+  screen: "Checkout",
+  sessionId: "session_mobile_001",
+  trace
+});
+
+link.request(operation, () => observableFrom((observer) => {
+  observer.next({ data: { checkout: { id: "order_123" } } });
+  observer.complete();
+})).subscribe({});
+
+link.request({
+  ...operation,
+  operationName: "CheckoutRetry"
+}, () => observableFrom((observer) => {
+  observer.error(new TypeError("network request failed with private marker"));
+})).subscribe({
+  error() {}
+});
+
+const events = JSON.parse(client.previewJson()).events;
+if (events.length !== 2) {
+  throw new Error(`expected two Apollo spans, got ${events.length}`);
+}
+if (operation.getContext().headers.traceparent !== `00-${trace.traceId}-${trace.spanId}-01`) {
+  throw new Error(`expected Apollo traceparent, got ${operation.getContext().headers.traceparent}`);
+}
+const success = events[0].attributes;
+const failure = events[1].attributes;
+if (
+  success.name !== "graphql.mutation CheckoutSubmit" ||
+  success.status !== "ok" ||
+  success.durationMs !== 41 ||
+  success.metadata.source !== "react-native.apollo" ||
+  success.metadata.framework !== "apollo-client" ||
+  success.metadata.graphqlOperationName !== "CheckoutSubmit" ||
+  success.metadata.graphqlOperationType !== "mutation" ||
+  success.metadata.feature !== "CheckoutSubmit" ||
+  success.metadata.requestBody !== undefined ||
+  success.metadata.variables !== undefined ||
+  success.metadata.traceId !== trace.traceId
+) {
+  throw new Error(`unexpected Apollo success span: ${JSON.stringify(success)}`);
+}
+if (
+  failure.name !== "graphql.mutation CheckoutRetry" ||
+  failure.status !== "error" ||
+  failure.durationMs !== 27 ||
+  failure.metadata.errorName !== "TypeError" ||
+  failure.metadata.errorValueType !== "object" ||
+  failure.metadata.traceId !== trace.traceId
+) {
+  throw new Error(`unexpected Apollo failure span: ${JSON.stringify(failure)}`);
+}
+if (JSON.stringify(events).includes("hidden@example.test") || JSON.stringify(events).includes("private marker")) {
+  throw new Error("Apollo GraphQL span leaked variables or error message");
+}
+
+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: operation.getContext().headers.traceparent,
+  traceId: trace.traceId
+}));

package/examples/index.mjs

@@ -1,8 +1,15 @@
 #!/usr/bin/env node
 
 const commands = new Map([
+  ["apollo-link-spans", new URL("./apollo-link-spans.mjs", import.meta.url)],
+  ["instrumentation-kit", new URL("./instrumentation-kit.mjs", import.meta.url)],
+  ["lifecycle-spans", new URL("./lifecycle-spans.mjs", import.meta.url)],
+  ["native-bridge-scope", new URL("./native-bridge-scope.mjs", import.meta.url)],
+  ["navigation-resource-spans", new URL("./navigation-resource-spans.mjs", import.meta.url)],
   ["readme-example", new URL("./readme-example.mjs", import.meta.url)],
-  ["real-user-smoke", new URL("./real-user-smoke.mjs", import.meta.url)]
+  ["real-user-smoke", new URL("./real-user-smoke.mjs", import.meta.url)],
+  ["resource-fetch-spans", new URL("./resource-fetch-spans.mjs", import.meta.url)],
+  ["trace-correlation", new URL("./trace-correlation.mjs", import.meta.url)]
 ]);
 
 const command = process.argv[2] ?? "real-user-smoke";
@@ -21,16 +28,37 @@ if (command === "--help" || command === "-h") {
 
 function printHelp() {
   console.log("LogBrew React Native examples");
+  console.log("node node_modules/@logbrew/react-native/examples/index.mjs apollo-link-spans");
+  console.log("node node_modules/@logbrew/react-native/examples/index.mjs instrumentation-kit");
+  console.log("node node_modules/@logbrew/react-native/examples/index.mjs lifecycle-spans");
+  console.log("node node_modules/@logbrew/react-native/examples/index.mjs native-bridge-scope");
   console.log("node node_modules/@logbrew/react-native/examples/index.mjs --list");
+  console.log("node node_modules/@logbrew/react-native/examples/index.mjs navigation-resource-spans");
   console.log("node node_modules/@logbrew/react-native/examples/index.mjs readme-example");
   console.log("node node_modules/@logbrew/react-native/examples/index.mjs real-user-smoke");
+  console.log("node node_modules/@logbrew/react-native/examples/index.mjs resource-fetch-spans");
+  console.log("node node_modules/@logbrew/react-native/examples/index.mjs trace-correlation");
   console.log("node node_modules/@logbrew/react-native/examples/index.mjs");
   console.log("npm --prefix node_modules/@logbrew/react-native/examples run list");
+  console.log("npm --prefix node_modules/@logbrew/react-native/examples run apollo-link-spans");
+  console.log("npm --prefix node_modules/@logbrew/react-native/examples run instrumentation-kit");
+  console.log("npm --prefix node_modules/@logbrew/react-native/examples run lifecycle-spans");
+  console.log("npm --prefix node_modules/@logbrew/react-native/examples run native-bridge-scope");
+  console.log("npm --prefix node_modules/@logbrew/react-native/examples run navigation-resource-spans");
   console.log("npm --prefix node_modules/@logbrew/react-native/examples run readme-example");
   console.log("npm --prefix node_modules/@logbrew/react-native/examples run real-user-smoke");
+  console.log("npm --prefix node_modules/@logbrew/react-native/examples run resource-fetch-spans");
+  console.log("npm --prefix node_modules/@logbrew/react-native/examples run trace-correlation");
 }
 
 function printList() {
+  console.log("apollo-link-spans -> node node_modules/@logbrew/react-native/examples/index.mjs apollo-link-spans");
+  console.log("instrumentation-kit -> node node_modules/@logbrew/react-native/examples/index.mjs instrumentation-kit");
+  console.log("lifecycle-spans -> node node_modules/@logbrew/react-native/examples/index.mjs lifecycle-spans");
+  console.log("native-bridge-scope -> node node_modules/@logbrew/react-native/examples/index.mjs native-bridge-scope");
+  console.log("navigation-resource-spans -> node node_modules/@logbrew/react-native/examples/index.mjs navigation-resource-spans");
   console.log("readme-example -> node node_modules/@logbrew/react-native/examples/index.mjs readme-example");
   console.log("real-user-smoke -> node node_modules/@logbrew/react-native/examples/index.mjs real-user-smoke");
+  console.log("resource-fetch-spans -> node node_modules/@logbrew/react-native/examples/index.mjs resource-fetch-spans");
+  console.log("trace-correlation -> node node_modules/@logbrew/react-native/examples/index.mjs trace-correlation");
 }