@sudo-ping-pong/prism-expo-client 0.1.1

package/src/middleware/zustand.ts

@@ -0,0 +1,58 @@
+import type { StatePayload } from '@sudo-ping-pong/prism-protocol';
+import { captureStateEvent } from '../capture';
+
+export interface PrismZustandOptions {
+  storeId?: string;
+}
+
+type SetState<T> = (
+  partial: T | Partial<T> | ((state: T) => T | Partial<T>),
+  replace?: boolean,
+  actionName?: string,
+) => void;
+
+type StateCreator<T> = (
+  set: SetState<T>,
+  get: () => T,
+  api: unknown,
+) => T;
+
+/**
+ * Wrap a Zustand StateCreator to capture state mutations in Prism.
+ */
+export function prismZustandMiddleware<T>(storeIdOrOptions?: string | PrismZustandOptions) {
+  const storeId =
+    typeof storeIdOrOptions === 'string'
+      ? storeIdOrOptions
+      : (storeIdOrOptions?.storeId ?? 'default');
+
+  return (creator: StateCreator<T>): StateCreator<T> => {
+    return (set, get, api) => {
+      const wrappedSet: SetState<T> = (partial, replace, actionName) => {
+        const prevState = get();
+        set(partial, replace);
+        const nextState = get();
+
+        const payload: StatePayload = {
+          actionLabel: actionName ?? 'anonymous',
+          payload: typeof partial === 'function' ? '(function)' : partial,
+          prevState: structuredCloneSafe(prevState),
+          nextState: structuredCloneSafe(nextState),
+          storeId,
+          source: 'zustand',
+        };
+        captureStateEvent(payload);
+      };
+
+      return creator(wrappedSet, get, api);
+    };
+  };
+}
+
+function structuredCloneSafe<T>(value: T): T {
+  try {
+    return JSON.parse(JSON.stringify(value)) as T;
+  } catch {
+    return value;
+  }
+}

package/src/patches/axios.ts

@@ -0,0 +1,182 @@
+import type {
+  AxiosError,
+  AxiosInstance,
+  AxiosResponse,
+  AxiosStatic,
+  InternalAxiosRequestConfig,
+} from 'axios';
+import type { NetworkPayload } from '@sudo-ping-pong/prism-protocol';
+import { captureNetworkEvent } from '../capture';
+import { runWithoutNetworkCaptureAsync, shouldSkipNetworkCapture } from './capture-guard';
+import { headersToRecord } from './fetch';
+
+interface RequestMeta {
+  start: number;
+  method: string;
+  url: string;
+  requestHeaders: Record<string, string>;
+  requestBody?: string;
+}
+
+const patchedInstances = new WeakSet<AxiosInstance>();
+const requestMeta = new WeakMap<InternalAxiosRequestConfig, RequestMeta>();
+
+function serializeBody(data: unknown): string | undefined {
+  if (data == null) return undefined;
+  if (typeof data === 'string') return data;
+  if (typeof URLSearchParams !== 'undefined' && data instanceof URLSearchParams) {
+    return data.toString();
+  }
+  if (typeof FormData !== 'undefined' && data instanceof FormData) {
+    const parts: string[] = [];
+    data.forEach((value, key) => parts.push(`${key}=${String(value)}`));
+    return parts.join('&');
+  }
+  try {
+    return JSON.stringify(data);
+  } catch {
+    return String(data);
+  }
+}
+
+function flattenHeaders(headers: InternalAxiosRequestConfig['headers']): Record<string, string> {
+  if (!headers) return {};
+  if (typeof (headers as { toJSON?: () => Record<string, string> }).toJSON === 'function') {
+    return (headers as { toJSON: () => Record<string, string> }).toJSON();
+  }
+  return headersToRecord(headers as Record<string, string>);
+}
+
+function resolveUrl(config: InternalAxiosRequestConfig): string {
+  const url = config.url ?? '';
+  if (/^https?:\/\//i.test(url)) return url;
+  const base = config.baseURL ?? '';
+  if (!base) return url;
+  return `${base.replace(/\/$/, '')}/${url.replace(/^\//, '')}`;
+}
+
+function captureFromMeta(
+  meta: RequestMeta,
+  status: number,
+  statusText: string,
+  responseHeaders: Record<string, string>,
+  responseBody?: string,
+): void {
+  const payload: NetworkPayload = {
+    method: meta.method,
+    url: meta.url,
+    status,
+    statusText,
+    requestHeaders: meta.requestHeaders,
+    responseHeaders,
+    requestBody: meta.requestBody,
+    responseBody,
+    durationMs: Date.now() - meta.start,
+    initiator: 'axios',
+  };
+  captureNetworkEvent(payload);
+}
+
+function captureFromResponse(response: AxiosResponse): void {
+  const meta = requestMeta.get(response.config);
+  if (!meta) return;
+
+  const responseHeaders = flattenHeaders(response.headers as InternalAxiosRequestConfig['headers']);
+  const responseBody = serializeBody(response.data);
+
+  captureFromMeta(meta, response.status, response.statusText, responseHeaders, responseBody);
+  requestMeta.delete(response.config);
+}
+
+function captureFromError(error: AxiosError): void {
+  const config = error.config;
+  if (!config) return;
+
+  const meta = requestMeta.get(config);
+  if (!meta) return;
+
+  if (error.response) {
+    const responseHeaders = flattenHeaders(
+      error.response.headers as InternalAxiosRequestConfig['headers'],
+    );
+    captureFromMeta(
+      meta,
+      error.response.status,
+      error.response.statusText,
+      responseHeaders,
+      serializeBody(error.response.data),
+    );
+  } else {
+    captureFromMeta(meta, 0, error.message || 'Network Error', {}, undefined);
+  }
+
+  requestMeta.delete(config);
+}
+
+function patchAxiosInstance(instance: AxiosInstance): void {
+  if (patchedInstances.has(instance)) return;
+  patchedInstances.add(instance);
+
+  instance.interceptors.request.use((config) => {
+    requestMeta.set(config, {
+      start: Date.now(),
+      method: (config.method ?? 'get').toUpperCase(),
+      url: resolveUrl(config),
+      requestHeaders: flattenHeaders(config.headers),
+      requestBody: serializeBody(config.data),
+    });
+    return config;
+  });
+
+  instance.interceptors.response.use(
+    (response) => {
+      captureFromResponse(response);
+      return response;
+    },
+    (error: AxiosError) => {
+      captureFromError(error);
+      return Promise.reject(error);
+    },
+  );
+
+  const originalRequest = instance.request.bind(instance);
+  instance.request = ((config) =>
+    runWithoutNetworkCaptureAsync(() => originalRequest(config))) as typeof instance.request;
+}
+
+function resolveAxiosModule(axiosModule?: AxiosStatic): AxiosStatic | null {
+  if (axiosModule) return axiosModule;
+
+  const req = (globalThis as { require?: (id: string) => unknown }).require;
+  if (!req) return null;
+
+  try {
+    const mod = req('axios') as AxiosStatic | { default: AxiosStatic };
+    return ('default' in mod ? mod.default : mod) as AxiosStatic;
+  } catch {
+    return null;
+  }
+}
+
+export function installAxiosPatch(axiosModule?: AxiosStatic): () => void {
+  const axios = resolveAxiosModule(axiosModule);
+  if (!axios) return () => {};
+
+  patchAxiosInstance(axios);
+
+  const originalCreate = axios.create.bind(axios);
+  axios.create = ((...args: Parameters<AxiosStatic['create']>) => {
+    const instance = originalCreate(...args);
+    patchAxiosInstance(instance);
+    return instance;
+  }) as AxiosStatic['create'];
+
+  return () => {
+    // Axios has no public API to remove interceptors from the default instance;
+    // patch is idempotent per instance for the app lifetime.
+  };
+}
+
+export function isAxiosNetworkCaptureActive(): boolean {
+  return shouldSkipNetworkCapture();
+}

package/src/patches/capture-guard.ts

@@ -0,0 +1,24 @@
+let depth = 0;
+
+/** Suppress fetch/XHR patches while axios handles capture (avoids duplicate events). */
+export function runWithoutNetworkCapture<T>(fn: () => T): T {
+  depth += 1;
+  try {
+    return fn();
+  } finally {
+    depth -= 1;
+  }
+}
+
+export async function runWithoutNetworkCaptureAsync<T>(fn: () => Promise<T>): Promise<T> {
+  depth += 1;
+  try {
+    return await fn();
+  } finally {
+    depth -= 1;
+  }
+}
+
+export function shouldSkipNetworkCapture(): boolean {
+  return depth > 0;
+}

package/src/patches/console.ts

@@ -0,0 +1,27 @@
+import type { LogLevel } from '@sudo-ping-pong/prism-protocol';
+import { captureLogEvent } from '../capture';
+
+type ConsoleFn = (...args: unknown[]) => void;
+
+const LEVELS: LogLevel[] = ['log', 'warn', 'error'];
+
+export function installConsolePatch(): () => void {
+  const originals = new Map<LogLevel, ConsoleFn>();
+
+  for (const level of LEVELS) {
+    const original = console[level].bind(console) as ConsoleFn;
+    originals.set(level, original);
+
+    console[level] = (...args: unknown[]) => {
+      original(...args);
+      captureLogEvent(level, args);
+    };
+  }
+
+  return () => {
+    for (const level of LEVELS) {
+      const original = originals.get(level);
+      if (original) console[level] = original as typeof console.log;
+    }
+  };
+}

package/src/patches/fetch.ts

@@ -0,0 +1,118 @@
+import type { NetworkPayload } from '@sudo-ping-pong/prism-protocol';
+import { captureNetworkEvent } from '../capture';
+import { shouldSkipNetworkCapture } from './capture-guard';
+
+export function headersToRecord(
+  headers: Headers | Record<string, string> | undefined,
+): Record<string, string> {
+  if (!headers) return {};
+  if (headers instanceof Headers) {
+    const record: Record<string, string> = {};
+    headers.forEach((value, key) => {
+      record[key] = value;
+    });
+    return record;
+  }
+  return { ...headers };
+}
+
+export async function bodyToString(body: unknown): Promise<string | undefined> {
+  if (body == null) return undefined;
+  if (typeof body === 'string') return body;
+  if (body instanceof FormData) {
+    const parts: string[] = [];
+    body.forEach((value, key) => {
+      parts.push(`${key}=${String(value)}`);
+    });
+    return parts.join('&');
+  }
+  if (body instanceof URLSearchParams) return body.toString();
+  try {
+    return JSON.stringify(body);
+  } catch {
+    return String(body);
+  }
+}
+
+export function installFetchPatch(): () => void {
+  const originalFetch = globalThis.fetch;
+
+  globalThis.fetch = async function patchedFetch(
+    input: RequestInfo | URL,
+    init?: RequestInit,
+  ): Promise<Response> {
+    if (shouldSkipNetworkCapture()) {
+      return originalFetch(input, init);
+    }
+
+    const start = Date.now();
+    const url =
+      typeof input === 'string'
+        ? input
+        : input instanceof URL
+          ? input.href
+          : input.url;
+    const method = init?.method ?? (input instanceof Request ? input.method : 'GET');
+
+    let requestHeaders: Record<string, string> = {};
+    let requestBody: string | undefined;
+
+    if (input instanceof Request) {
+      requestHeaders = headersToRecord(input.headers);
+    }
+    if (init?.headers) {
+      requestHeaders = { ...requestHeaders, ...headersToRecord(init.headers as Headers) };
+    }
+    requestBody = await bodyToString(init?.body);
+
+    let response: Response;
+    let error: unknown;
+
+    try {
+      response = await originalFetch(input, init);
+    } catch (err) {
+      error = err;
+      const payload: NetworkPayload = {
+        method: method.toUpperCase(),
+        url,
+        status: 0,
+        statusText: 'Network Error',
+        requestHeaders,
+        responseHeaders: {},
+        requestBody,
+        durationMs: Date.now() - start,
+        initiator: 'fetch',
+      };
+      captureNetworkEvent(payload);
+      throw err;
+    }
+
+    const cloned = response.clone();
+    let responseBody: string | undefined;
+    try {
+      responseBody = await cloned.text();
+    } catch {
+      responseBody = undefined;
+    }
+
+    const payload: NetworkPayload = {
+      method: method.toUpperCase(),
+      url,
+      status: response.status,
+      statusText: response.statusText,
+      requestHeaders,
+      responseHeaders: headersToRecord(response.headers),
+      requestBody,
+      responseBody,
+      durationMs: Date.now() - start,
+      initiator: 'fetch',
+    };
+
+    captureNetworkEvent(payload);
+    return response;
+  } as typeof fetch;
+
+  return () => {
+    globalThis.fetch = originalFetch;
+  };
+}

package/src/patches/xhr.ts

@@ -0,0 +1,103 @@
+import type { NetworkPayload } from '@sudo-ping-pong/prism-protocol';
+import { captureNetworkEvent } from '../capture';
+import { shouldSkipNetworkCapture } from './capture-guard';
+
+type XHROpen = typeof XMLHttpRequest.prototype.open;
+type XHRSend = typeof XMLHttpRequest.prototype.send;
+type XHRSetHeader = typeof XMLHttpRequest.prototype.setRequestHeader;
+
+export function installXhrPatch(): () => void {
+  const originalOpen = XMLHttpRequest.prototype.open as XHROpen;
+  const originalSend = XMLHttpRequest.prototype.send as XHRSend;
+  const originalSetHeader = XMLHttpRequest.prototype.setRequestHeader as XHRSetHeader;
+
+  XMLHttpRequest.prototype.open = function (
+    method: string,
+    url: string | URL,
+    async?: boolean,
+    username?: string | null,
+    password?: string | null,
+  ) {
+  (this as XMLHttpRequest & { _prism?: { method: string; url: string; headers: Record<string, string>; start: number } })._prism = {
+      method: method.toUpperCase(),
+      url: typeof url === 'string' ? url : url.href,
+      headers: {},
+      start: 0,
+    };
+    return originalOpen.call(this, method, url, async ?? true, username, password);
+  };
+
+  XMLHttpRequest.prototype.setRequestHeader = function (name: string, value: string) {
+    const prism = (this as XMLHttpRequest & { _prism?: { headers: Record<string, string> } })._prism;
+    if (prism) prism.headers[name] = value;
+    return originalSetHeader.call(this, name, value);
+  };
+
+  XMLHttpRequest.prototype.send = function (body?: Document | XMLHttpRequestBodyInit | null) {
+    if (shouldSkipNetworkCapture()) {
+      return originalSend.call(this, body);
+    }
+
+    const prism = (this as XMLHttpRequest & {
+      _prism?: {
+        method: string;
+        url: string;
+        headers: Record<string, string>;
+        start: number;
+      };
+    })._prism;
+
+    if (prism) {
+      prism.start = Date.now();
+    }
+
+    const requestBody =
+      body == null
+        ? undefined
+        : typeof body === 'string'
+          ? body
+          : body instanceof URLSearchParams
+            ? body.toString()
+            : String(body);
+
+    const onLoadEnd = () => {
+      if (!prism) return;
+
+      let responseHeaders: Record<string, string> = {};
+      const raw = this.getAllResponseHeaders();
+      if (raw) {
+        raw.split('\r\n').forEach((line) => {
+          const idx = line.indexOf(':');
+          if (idx > 0) {
+            responseHeaders[line.slice(0, idx).trim()] = line.slice(idx + 1).trim();
+          }
+        });
+      }
+
+      const payload: NetworkPayload = {
+        method: prism.method,
+        url: prism.url,
+        status: this.status,
+        statusText: this.statusText,
+        requestHeaders: prism.headers,
+        responseHeaders,
+        requestBody,
+        responseBody: this.responseType === '' || this.responseType === 'text' ? String(this.responseText ?? '') : undefined,
+        durationMs: Date.now() - prism.start,
+        initiator: 'xhr',
+      };
+
+      captureNetworkEvent(payload);
+      this.removeEventListener('loadend', onLoadEnd);
+    };
+
+    this.addEventListener('loadend', onLoadEnd);
+    return originalSend.call(this, body);
+  };
+
+  return () => {
+    XMLHttpRequest.prototype.open = originalOpen;
+    XMLHttpRequest.prototype.send = originalSend;
+    XMLHttpRequest.prototype.setRequestHeader = originalSetHeader;
+  };
+}

package/src/profiler.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import { Profiler, type ProfilerOnRenderCallback } from 'react';
+import { createEnvelope } from '@sudo-ping-pong/prism-protocol';
+import type { PerformancePayload } from '@sudo-ping-pong/prism-protocol';
+import { sendToPrism } from './transport-registry';
+
+export interface PrismProfilerProps {
+  /** Component label shown in the performance timeline */
+  id: string;
+  children: ReactNode;
+}
+
+const onRender: ProfilerOnRenderCallback = (
+  id,
+  phase,
+  actualDuration,
+  baseDuration,
+) => {
+  const payload: PerformancePayload = {
+    type: 'render',
+    componentId: id,
+    phase: phase === 'mount' ? 'mount' : phase === 'update' ? 'update' : 'nested-update',
+    actualDurationMs: actualDuration,
+    baseDurationMs: baseDuration,
+  };
+  sendToPrism(createEnvelope('PERFORMANCE', payload));
+};
+
+/** Wrap a subtree to capture React render timings in Prism DevTools. */
+export function PrismProfiler({ id, children }: PrismProfilerProps) {
+  return (
+    <Profiler id={id} onRender={onRender}>
+      {children}
+    </Profiler>
+  );
+}

package/src/transport-registry.ts

@@ -0,0 +1,20 @@
+import type { PrismEnvelope } from '@sudo-ping-pong/prism-protocol';
+import type { PrismTransport } from './transport';
+
+export interface PrismTransportSink {
+  send(envelope: PrismEnvelope): void;
+}
+
+let activeTransport: PrismTransportSink | null = null;
+
+export function setActiveTransport(transport: PrismTransportSink | null): void {
+  activeTransport = transport;
+}
+
+export function getActiveTransport(): PrismTransportSink | null {
+  return activeTransport;
+}
+
+export function sendToPrism(envelope: PrismEnvelope): void {
+  activeTransport?.send(envelope);
+}