@dreamhorizonorg/pulse-react-native 0.0.1 → 0.0.3

package/src/navigation/useNavigationTracking.ts

@@ -0,0 +1,59 @@
+import { useRef, useCallback, useEffect, useMemo, type RefObject } from 'react';
+import {
+  DEFAULT_NAVIGATION_OPTIONS,
+  type NavigationIntegrationOptions,
+} from './navigation.interface';
+import type { ReactNavigationIntegration } from './index';
+
+export function useNavigationTracking(
+  navigationRef: RefObject<any>,
+  options?: NavigationIntegrationOptions,
+  createIntegration?: (
+    options?: NavigationIntegrationOptions
+  ) => ReactNavigationIntegration
+): () => void {
+  const screenSessionTracking =
+    options?.screenSessionTracking ??
+    DEFAULT_NAVIGATION_OPTIONS.screenSessionTracking;
+  const screenNavigationTracking =
+    options?.screenNavigationTracking ??
+    DEFAULT_NAVIGATION_OPTIONS.screenNavigationTracking;
+  const screenInteractiveTracking =
+    options?.screenInteractiveTracking ??
+    DEFAULT_NAVIGATION_OPTIONS.screenInteractiveTracking;
+
+  const integration = useMemo(() => {
+    if (createIntegration) {
+      return createIntegration({
+        screenSessionTracking,
+        screenNavigationTracking,
+        screenInteractiveTracking,
+      });
+    }
+    throw new Error('createIntegration must be provided');
+  }, [
+    screenSessionTracking,
+    screenNavigationTracking,
+    screenInteractiveTracking,
+    createIntegration,
+  ]);
+
+  const cleanupRef = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+      }
+    };
+  }, []);
+
+  const onReady = useCallback(() => {
+    if (navigationRef.current && integration) {
+      cleanupRef.current =
+        integration.registerNavigationContainer(navigationRef);
+    }
+  }, [navigationRef, integration]);
+
+  return onReady;
+}

package/src/navigation/utils.ts

@@ -0,0 +1,19 @@
+const NAVIGATION_HISTORY_MAX_SIZE = 200;
+
+export const LOG_TAGS = {
+  NAVIGATION: '[Pulse Navigation]',
+  SCREEN_LOAD: '[Pulse Screen Load]',
+  SCREEN_SESSION: '[Pulse Screen Session]',
+  SCREEN_INTERACTIVE: '[Pulse Screen Interactive]',
+} as const;
+
+export function pushRecentRouteKey(
+  recentRouteKeys: string[],
+  key: string
+): string[] {
+  const updated = [...recentRouteKeys, key];
+  if (updated.length > NAVIGATION_HISTORY_MAX_SIZE) {
+    return updated.slice(updated.length - NAVIGATION_HISTORY_MAX_SIZE);
+  }
+  return updated;
+}

package/src/network-interceptor/graphql-helper.ts

@@ -0,0 +1,110 @@
+import type { PulseAttributes } from '../pulse.interface';
+import { parseUrl } from './url-helper';
+import { ATTRIBUTE_KEYS } from '../pulse.constants';
+
+export interface GraphQLOperationData {
+  operationName?: string;
+  operationType?: string;
+}
+
+export function isGraphQLRequest(url: string): boolean {
+  if (!url || typeof url !== 'string') {
+    return false;
+  }
+  return url.toLowerCase().includes('graphql');
+}
+
+function parseGraphQLQuery(query: string): GraphQLOperationData {
+  if (!query || typeof query !== 'string') {
+    return {};
+  }
+
+  // Named query: "query MyQuery { ... }" or "mutation CreateUser { ... }"
+  const namedQueryRe =
+    /^(?:\s*)(query|mutation|subscription)(?:\s+)(\w+)(?:\s*)[{(]/;
+  const namedMatch = query.match(namedQueryRe);
+  if (namedMatch && namedMatch.length >= 3) {
+    return {
+      operationType: namedMatch[1],
+      operationName: namedMatch[2],
+    };
+  }
+
+  // Unnamed query: "query { ... }" or "mutation { ... }"
+  const unnamedQueryRe = /^(?:\s*)(query|mutation|subscription)(?:\s*)[{(]/;
+  const unnamedMatch = query.match(unnamedQueryRe);
+  if (unnamedMatch && unnamedMatch.length >= 2) {
+    return {
+      operationType: unnamedMatch[1],
+      operationName: undefined,
+    };
+  }
+
+  return {};
+}
+
+function extractFromBody(body: string): GraphQLOperationData {
+  try {
+    const payload = JSON.parse(body);
+    let data: GraphQLOperationData = {
+      operationName: payload?.operationName,
+      operationType: payload?.operation,
+    };
+
+    // Fallback: If operationName/operation not in payload, parse from query string
+    if ((!data.operationName || !data.operationType) && payload?.query) {
+      const parsedQuery = parseGraphQLQuery(payload.query);
+      data = {
+        operationName: data.operationName || parsedQuery.operationName,
+        operationType: data.operationType || parsedQuery.operationType,
+      };
+    }
+
+    return data;
+  } catch {
+    return {};
+  }
+}
+
+function extractFromQueryParams(url: string): GraphQLOperationData {
+  try {
+    const parsedUrl = parseUrl(url);
+    if (!parsedUrl) {
+      return {};
+    }
+    return {
+      operationName: parsedUrl.searchParams.get('operationName') || undefined,
+      operationType: parsedUrl.searchParams.get('operation') || undefined,
+    };
+  } catch {
+    return {};
+  }
+}
+
+export function updateAttributesWithGraphQLData(
+  url: string,
+  body?: Document | XMLHttpRequestBodyInit | null
+): PulseAttributes {
+  if (!isGraphQLRequest(url)) {
+    return {};
+  }
+
+  let data: GraphQLOperationData = {};
+
+  if (body && typeof body === 'string') {
+    data = extractFromBody(body);
+  }
+  if (!data.operationName && !data.operationType) {
+    data = extractFromQueryParams(url);
+  }
+
+  const attributes: PulseAttributes = {};
+  if (data.operationName) {
+    attributes[ATTRIBUTE_KEYS.GRAPHQL_OPERATION_NAME] = data.operationName;
+  }
+  if (data.operationType) {
+    attributes[ATTRIBUTE_KEYS.GRAPHQL_OPERATION_TYPE] = data.operationType;
+  }
+
+  return attributes;
+}

package/src/network-interceptor/header-helper.ts

@@ -0,0 +1,26 @@
+/**
+ * Normalizes header name according to OpenTelemetry HTTP semantic conventions:
+ * - Lowercase
+ * - Dashes replaced by underscores
+ * - Reference: https://opentelemetry.io/docs/specs/semconv/registry/attributes/http/
+ * @example
+ * normalizeHeaderName('Content-Type') => 'content_type'
+ * normalizeHeaderName('X-Request-ID') => 'x_request_id'
+ */
+export function normalizeHeaderName(headerName: string): string {
+  return headerName.toLowerCase().replace(/-/g, '_');
+}
+
+/**
+ * Checks if a header should be captured based on configuration.
+ */
+export function shouldCaptureHeader(
+  headerName: string,
+  headerList: string[]
+): boolean {
+  if (headerList.length === 0) return false;
+  // Case-insensitive comparison
+  return headerList.some(
+    (configHeader) => configHeader.toLowerCase() === headerName.toLowerCase()
+  );
+}

package/src/network-interceptor/initialization.ts

@@ -1,13 +1,34 @@
 import createXmlHttpRequestTracker from './request-tracker-xhr';
+import type { NetworkHeaderConfig } from '../config';
+// Re-export header utilities for convenience (they're in a separate file to avoid dependency issues)
+export { normalizeHeaderName, shouldCaptureHeader } from './header-helper';
 
 let isInitialized = false;
+let headerConfig: NetworkHeaderConfig = {
+  requestHeaders: [],
+  responseHeaders: [],
+};
 
-export function initializeNetworkInterceptor(): void {
+export function getHeaderConfig(): NetworkHeaderConfig {
+  return headerConfig;
+}
+
+export function initializeNetworkInterceptor(
+  config?: NetworkHeaderConfig
+): void {
   if (isInitialized) {
     console.warn('[Pulse] Network interceptor already initialized');
     return;
   }
 
+  // Store header configuration
+  if (config) {
+    headerConfig = {
+      requestHeaders: config.requestHeaders ?? [],
+      responseHeaders: config.responseHeaders ?? [],
+    };
+  }
+
   console.log('[Pulse] 🔄 Starting network interceptor initialization...');
 
   try {

package/src/network-interceptor/network.interface.ts

@@ -3,17 +3,20 @@ export interface RequestStartContext {
   method: string;
   type: 'fetch' | 'xmlhttprequest';
   baseUrl?: string;
+  requestHeaders?: Record<string, string>;
 }
 
 export interface RequestEndContextSuccess {
   status: number;
   state: 'success';
+  responseHeaders?: Record<string, string>;
 }
 
 export interface RequestEndContextError {
   state: 'error';
   status?: number;
   error?: Error;
+  responseHeaders?: Record<string, string>;
 }
 
 export type RequestEndContext =

package/src/network-interceptor/request-tracker-xhr.ts

@@ -6,6 +6,8 @@ import { RequestTracker } from './request-tracker';
 import { getAbsoluteUrl } from '../utility';
 import type { Span } from '../index';
 import { createNetworkSpan, completeNetworkSpan } from './span-helpers';
+import { getHeaderConfig } from './initialization';
+import { shouldCaptureHeader } from './header-helper';
 
 interface RequestData {
   method: string;
@@ -48,6 +50,28 @@ function createXmlHttpRequestTracker(
   };
   isXHRIntercepted = true;
 
+  // Store request headers before send
+  const requestHeadersMap = new WeakMap<
+    XMLHttpRequest,
+    Record<string, string>
+  >();
+  const originalSetRequestHeader = xhr.prototype.setRequestHeader;
+  xhr.prototype.setRequestHeader = function setRequestHeader(
+    name: string,
+    value: string
+  ): void {
+    const headerConfig = getHeaderConfig();
+    const requestHeadersList = headerConfig.requestHeaders ?? [];
+    if (
+      requestHeadersList.length > 0 &&
+      shouldCaptureHeader(name, requestHeadersList)
+    ) {
+      const existing = requestHeadersMap.get(this) || {};
+      requestHeadersMap.set(this, { ...existing, [name]: value });
+    }
+    originalSetRequestHeader.call(this, name, value);
+  };
+
   const originalSend = xhr.prototype.send;
   xhr.prototype.send = function send(
     body?: Document | XMLHttpRequestBodyInit | null
@@ -58,13 +82,33 @@ function createXmlHttpRequestTracker(
       if (existingHandler)
         this.removeEventListener('readystatechange', existingHandler);
 
+      // Capture request headers
+      const headerConfig = getHeaderConfig();
+      const capturedRequestHeaders = requestHeadersMap.get(this);
+      const requestHeadersList = headerConfig.requestHeaders ?? [];
+      const filteredRequestHeaders: Record<string, string> | undefined =
+        capturedRequestHeaders && requestHeadersList.length > 0
+          ? Object.fromEntries(
+              Object.entries(capturedRequestHeaders).filter(([name]) =>
+                shouldCaptureHeader(name, requestHeadersList)
+              )
+            )
+          : undefined;
+
       const startContext: RequestStartContext = {
         type: 'xmlhttprequest',
         method: requestData.method,
         url: requestData.url,
+        requestHeaders:
+          filteredRequestHeaders &&
+          Object.keys(filteredRequestHeaders).length > 0
+            ? filteredRequestHeaders
+            : undefined,
       };
 
-      const span = createNetworkSpan(startContext, 'xmlhttprequest');
+      this.setRequestHeader('X-Pulse-RN-Tracked', 'true');
+
+      const span = createNetworkSpan(startContext, 'xmlhttprequest', body);
       trackedSpans.set(this, span);
       const { onRequestEnd } = requestTracker.start(startContext);
 
@@ -72,13 +116,56 @@ function createXmlHttpRequestTracker(
         if (this.readyState === xhr.DONE && onRequestEnd) {
           const activeSpan = trackedSpans.get(this);
 
+          // Capture response headers
+          const responseHeaderConfig = getHeaderConfig();
+          const capturedResponseHeaders: Record<string, string> = {};
+          const responseHeadersList =
+            responseHeaderConfig.responseHeaders ?? [];
+          if (responseHeadersList.length > 0) {
+            try {
+              const allHeaders = this.getAllResponseHeaders();
+              if (allHeaders) {
+                const headerLines = allHeaders.trim().split(/[\r\n]+/);
+                for (const line of headerLines) {
+                  const parts = line.split(': ');
+                  if (parts.length === 2) {
+                    const [name, value] = parts;
+                    if (
+                      name &&
+                      value &&
+                      shouldCaptureHeader(name, responseHeadersList)
+                    ) {
+                      capturedResponseHeaders[name] = value;
+                    }
+                  }
+                }
+              }
+            } catch (e) {
+              // Headers may not be available in some cases (CORS, etc.)
+              console.debug('[Pulse] Could not read response headers:', e);
+            }
+          }
+
           // Determine request outcome based on status code
           let endContext: RequestEndContext;
 
+          const responseHeaders =
+            Object.keys(capturedResponseHeaders).length > 0
+              ? capturedResponseHeaders
+              : undefined;
+
           if (this.status <= 0 || this.status >= 400) {
-            endContext = { state: 'error', status: this.status };
+            endContext = {
+              state: 'error',
+              status: this.status,
+              responseHeaders,
+            };
           } else {
-            endContext = { state: 'success', status: this.status };
+            endContext = {
+              state: 'success',
+              status: this.status,
+              responseHeaders,
+            };
           }
 
           if (activeSpan) {
@@ -91,6 +178,9 @@ function createXmlHttpRequestTracker(
             trackedSpans.delete(this);
           }
 
+          // Clean up
+          requestHeadersMap.delete(this);
+
           onRequestEnd(endContext);
         }
       };

package/src/network-interceptor/span-helpers.ts

@@ -7,6 +7,9 @@ import type { Span } from '../index';
 import { Pulse, SpanStatusCode } from '../index';
 import type { PulseAttributes } from '../pulse.interface';
 import { extractHttpAttributes } from './url-helper';
+import { updateAttributesWithGraphQLData } from './graphql-helper';
+import { ATTRIBUTE_KEYS, PULSE_TYPES } from '../pulse.constants';
+import { normalizeHeaderName } from './header-helper';
 
 export function setNetworkSpanAttributes(
   span: Span,
@@ -15,51 +18,77 @@ export function setNetworkSpanAttributes(
 ): PulseAttributes {
   const method = startContext.method.toUpperCase();
   let attributes: PulseAttributes = {
-    'http.method': method,
-    'http.url': startContext.url,
-    'pulse.type': `network.${endContext.status ?? 0}`,
-    'http.request.type': startContext.type,
-    'platform': Platform.OS as 'android' | 'ios' | 'web',
+    [ATTRIBUTE_KEYS.HTTP_METHOD]: method,
+    [ATTRIBUTE_KEYS.HTTP_URL]: startContext.url,
+    [ATTRIBUTE_KEYS.PULSE_TYPE]: `${PULSE_TYPES.NETWORK}.${endContext.status ?? 0}`,
+    [ATTRIBUTE_KEYS.HTTP_REQUEST_TYPE]: startContext.type,
+    [ATTRIBUTE_KEYS.PLATFORM]: Platform.OS,
   };
 
-  // We had implemented our own URL parsing helper to avoid errors on RN < 0.80. Since this is not supported by React Native. 
+  // We had implemented our own URL parsing helper to avoid errors on RN < 0.80. Since this is not supported by React Native.
   // Check here: https://github.com/facebook/react-native/blob/v0.79.0/packages/react-native/Libraries/Blob/URL.js
   const urlAttributes = extractHttpAttributes(startContext.url);
   attributes = { ...attributes, ...urlAttributes };
 
   if (endContext.status) {
-    attributes['http.status_code'] = endContext.status;
+    attributes[ATTRIBUTE_KEYS.HTTP_STATUS_CODE] = endContext.status;
   }
 
   if (endContext.state === 'error' && endContext.error) {
     attributes.error = true;
-    attributes['error.message'] =
+    attributes[ATTRIBUTE_KEYS.ERROR_MESSAGE] =
       endContext.error.message || String(endContext.error);
     if (endContext.error.stack) {
-      attributes['error.stack'] = endContext.error.stack;
+      attributes[ATTRIBUTE_KEYS.ERROR_STACK] = endContext.error.stack;
     }
     span.recordException(endContext.error, attributes);
   }
 
+  if (startContext.requestHeaders) {
+    for (const [headerName, headerValue] of Object.entries(
+      startContext.requestHeaders
+    )) {
+      const normalizedName = normalizeHeaderName(headerName);
+      attributes[`${ATTRIBUTE_KEYS.HTTP_REQUEST_HEADER}.${normalizedName}`] =
+        headerValue;
+    }
+  }
+
+  if (endContext.responseHeaders) {
+    for (const [headerName, headerValue] of Object.entries(
+      endContext.responseHeaders
+    )) {
+      const normalizedName = normalizeHeaderName(headerName);
+      attributes[`${ATTRIBUTE_KEYS.HTTP_RESPONSE_HEADER}.${normalizedName}`] =
+        headerValue;
+    }
+  }
+
   span.setAttributes(attributes);
   return attributes;
 }
 
 export function createNetworkSpan(
   startContext: RequestStartContext,
-  interceptorType: 'fetch' | 'xmlhttprequest'
+  interceptorType: 'fetch' | 'xmlhttprequest',
+  body?: Document | XMLHttpRequestBodyInit | null
 ): Span {
   const method = startContext.method.toUpperCase();
   const spanName = `HTTP ${method}`;
 
-  const span = Pulse.startSpan(spanName, {
-    attributes: {
-      'http.method': method,
-      'http.url': startContext.url,
-      'pulse.type': 'network',
-      'http.request.type': interceptorType,
-    },
-  });
+  let baseAttributes: PulseAttributes = {
+    [ATTRIBUTE_KEYS.HTTP_METHOD]: method,
+    [ATTRIBUTE_KEYS.HTTP_URL]: startContext.url,
+    [ATTRIBUTE_KEYS.HTTP_REQUEST_TYPE]: interceptorType,
+  };
+
+  const graphqlAttributes = updateAttributesWithGraphQLData(
+    startContext.url,
+    body
+  );
+  const attributes = { ...baseAttributes, ...graphqlAttributes };
+
+  const span = Pulse.startSpan(spanName, { attributes });
 
   return span;
 }

package/src/network-interceptor/url-helper.ts

@@ -8,6 +8,67 @@
  * Based on: https://github.com/facebook/react-native/blob/v0.80.0/packages/react-native/Libraries/Blob/URL.js
  */
 
+export class SearchParams {
+  private params: Map<string, string> = new Map();
+
+  constructor(search: string) {
+    if (!search || typeof search !== 'string') {
+      return;
+    }
+
+    // Remove leading '?' if present
+    const queryString = search.startsWith('?') ? search.slice(1) : search;
+
+    if (!queryString) {
+      return;
+    }
+
+    try {
+      // Split by '&' to get individual parameters
+      const pairs = queryString.split('&');
+
+      for (const pair of pairs) {
+        if (!pair) continue;
+
+        // Split by '=' to get key and value
+        const equalIndex = pair.indexOf('=');
+        if (equalIndex === -1) {
+          // Parameter without value
+          const key = decodeURIComponent(pair);
+          if (key) {
+            this.params.set(key, '');
+          }
+        } else {
+          const key = decodeURIComponent(pair.substring(0, equalIndex));
+          const value = decodeURIComponent(pair.substring(equalIndex + 1));
+          if (key) {
+            this.params.set(key, value);
+          }
+        }
+      }
+    } catch (e) {
+      // If decoding fails, params remain empty
+      console.warn('[Pulse] Query parameter parsing failed:', e);
+    }
+  }
+
+  get(name: string): string | null {
+    return this.params.has(name) ? this.params.get(name)! : null;
+  }
+
+  has(name: string): boolean {
+    return this.params.has(name);
+  }
+
+  keys(): string[] {
+    return Array.from(this.params.keys());
+  }
+
+  values(): string[] {
+    return Array.from(this.params.values());
+  }
+}
+
 export interface ParsedUrl {
   protocol: string;
   hostname: string;
@@ -17,6 +78,7 @@ export interface ParsedUrl {
   search: string;
   hash: string;
   href: string;
+  searchParams: SearchParams;
 }
 
 /**
@@ -31,7 +93,7 @@ function safeMatch(
   try {
     const match = text.match(regex);
     return match && match[groupIndex] ? match[groupIndex] : '';
-  } catch (e) {
+  } catch {
     return '';
   }
 }
@@ -81,6 +143,9 @@ export function parseUrl(url: string): ParsedUrl | null {
     const hashContent = safeMatch(url, /#([^/]*)/);
     const hash = hashContent ? `#${hashContent}` : '';
 
+    // Create SearchParams instance for query parameters
+    const searchParams = new SearchParams(search);
+
     return {
       protocol: protocolWithColon,
       hostname: hostname,
@@ -90,6 +155,7 @@ export function parseUrl(url: string): ParsedUrl | null {
       search: search,
       hash: hash,
       href: url,
+      searchParams: searchParams,
     };
   } catch (e) {
     // Any unexpected error during parsing - return null

package/src/pulse.constants.ts

@@ -0,0 +1,52 @@
+/**
+ * Constants for Pulse React Native OpenTelemetry integration
+ */
+
+export enum SPAN_NAMES {
+  SCREEN_SESSION = 'ScreenSession',
+  NAVIGATED = 'Navigated',
+  SCREEN_INTERACTIVE = 'ScreenInteractive',
+}
+
+export enum ATTRIBUTE_KEYS {
+  PULSE_TYPE = 'pulse.type',
+  SCREEN_NAME = 'screen.name',
+  ROUTE_KEY = 'routeKey',
+  LAST_SCREEN_NAME = 'last.screen.name',
+  ROUTE_HAS_BEEN_SEEN = 'routeHasBeenSeen',
+  PLATFORM = 'platform',
+  GRAPHQL_OPERATION_NAME = 'graphql.operation.name',
+  GRAPHQL_OPERATION_TYPE = 'graphql.operation.type',
+  HTTP_METHOD = 'http.method',
+  HTTP_URL = 'http.url',
+  HTTP_STATUS_CODE = 'http.status_code',
+  HTTP_REQUEST_TYPE = 'http.request.type',
+  HTTP_REQUEST_HEADER = 'http.request.header',
+  HTTP_RESPONSE_HEADER = 'http.response.header',
+  ERROR_MESSAGE = 'error.message',
+  ERROR_STACK = 'error.stack',
+}
+
+export enum PULSE_TYPES {
+  SCREEN_SESSION = 'screen_session',
+  SCREEN_LOAD = 'screen_load',
+  SCREEN_INTERACTIVE = 'screen_interactive',
+  NETWORK = 'network',
+}
+
+export const PULSE_FEATURE_NAMES = {
+  RN_SCREEN_LOAD: 'rn_screen_load',
+  SCREEN_SESSION: 'screen_session',
+  RN_SCREEN_INTERACTIVE: 'rn_screen_interactive',
+  NETWORK_INSTRUMENTATION: 'network_instrumentation',
+  CUSTOM_EVENTS: 'custom_events',
+  JS_CRASH: 'js_crash',
+} as const;
+
+export type PulseFeatureName =
+  (typeof PULSE_FEATURE_NAMES)[keyof typeof PULSE_FEATURE_NAMES];
+
+export type NavigationFeatureName =
+  | typeof PULSE_FEATURE_NAMES.SCREEN_SESSION
+  | typeof PULSE_FEATURE_NAMES.RN_SCREEN_LOAD
+  | typeof PULSE_FEATURE_NAMES.RN_SCREEN_INTERACTIVE;

package/src/pulse.interface.ts

@@ -11,4 +11,9 @@ export type PulseAttributeValue =
   | number[]
   | boolean[];
 
-export type PulseAttributes = Record<string, PulseAttributeValue | undefined>;
+export type PulseAttributes = Record<
+  string,
+  PulseAttributeValue | undefined | null
+>;
+
+export type PulseFeatureConfig = Record<string, boolean> | null | undefined;