@salve-software/mako-react-native 1.0.1

package/src/library/interceptors/xhr.ts

@@ -0,0 +1,123 @@
+import type { NetworkCallbacks } from '../types';
+
+export class XHRInterceptor {
+  private static instance: XHRInterceptor | null = null;
+
+  private readonly originalOpen = XMLHttpRequest.prototype.open;
+  private readonly originalSend = XMLHttpRequest.prototype.send;
+  private readonly originalSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
+
+  private enabled = false;
+
+  private callbacks: {
+    onOpen?: NetworkCallbacks['onOpen'];
+    onSend?: NetworkCallbacks['onSend'];
+    onRequestHeader?: NetworkCallbacks['onRequestHeader'];
+    onHeaderReceived?: NetworkCallbacks['onHeaderReceived'];
+    onResponse?: NetworkCallbacks['onResponse'];
+  } = {};
+
+  public static getInstance(): XHRInterceptor {
+    if (!XHRInterceptor.instance) {
+      XHRInterceptor.instance = new XHRInterceptor();
+    }
+
+    return XHRInterceptor.instance;
+  }
+
+  public isEnabled(): boolean {
+    return this.enabled;
+  }
+
+  public enable(callbacks: NetworkCallbacks): boolean {
+    if (this.enabled) {
+      console.warn('[Mako] Network interceptor already enabled');
+      return false;
+    }
+
+    this.callbacks = callbacks;
+
+    XMLHttpRequest.prototype.open = function (
+      this: XMLHttpRequest,
+      method: string,
+      url: string | URL
+    ) {
+      XHRInterceptor.getInstance().callbacks.onOpen?.(method, url.toString(), this);
+
+      return XHRInterceptor.getInstance().originalOpen.apply(this, arguments as any);
+    };
+
+    XMLHttpRequest.prototype.setRequestHeader = function (
+      this: XMLHttpRequest,
+      header: string,
+      value: string
+    ) {
+      XHRInterceptor.getInstance().callbacks.onRequestHeader?.(header, value, this);
+
+      return XHRInterceptor.getInstance().originalSetRequestHeader.apply(
+        this,
+        arguments as any
+      );
+    };
+
+    XMLHttpRequest.prototype.send = function (this: XMLHttpRequest, data?: unknown) {
+      const interceptor = XHRInterceptor.getInstance();
+
+      interceptor.callbacks.onSend?.(data, this);
+
+      if (this.addEventListener) {
+        this.addEventListener('readystatechange', () => {
+          if (!interceptor.enabled) {
+            return;
+          }
+
+          if (this.readyState === this.HEADERS_RECEIVED) {
+            const contentType = this.getResponseHeader('Content-Type');
+            const contentLength = this.getResponseHeader('Content-Length');
+
+            interceptor.callbacks.onHeaderReceived?.(
+              contentType?.split(';')[0],
+              contentLength ? parseInt(contentLength, 10) : undefined,
+              this.getAllResponseHeaders(),
+              this
+            );
+          }
+
+          if (this.readyState === this.DONE) {
+            interceptor.callbacks.onResponse?.(
+              this.status,
+              this.timeout > 0,
+              this.response,
+              this.responseURL,
+              this.responseType,
+              this
+            );
+          }
+        });
+      }
+
+      return interceptor.originalSend.apply(this, arguments as any);
+    };
+
+    this.enabled = true;
+
+    console.log('[Mako] Network interception enabled (XMLHttpRequest monkey-patch)');
+
+    return true;
+  }
+
+  public disable(): void {
+    if (!this.enabled) {
+      return;
+    }
+
+    XMLHttpRequest.prototype.open = this.originalOpen;
+    XMLHttpRequest.prototype.send = this.originalSend;
+    XMLHttpRequest.prototype.setRequestHeader = this.originalSetRequestHeader;
+
+    this.callbacks = {};
+    this.enabled = false;
+
+    console.log('[Mako] Network interception disabled');
+  }
+}

package/src/library/network-handler/__tests__/network-handler.test.ts

@@ -0,0 +1,265 @@
+import { NetworkHandler } from '../index';
+
+import * as utils from '../utils';
+
+jest.mock('../utils');
+
+describe('NetworkHandler', () => {
+  const onEvent = jest.fn();
+
+  const config = {
+    ignoredUrls: [],
+    onEvent,
+  };
+
+  let handler: NetworkHandler;
+  let callbacks: ReturnType<NetworkHandler['getCallbacks']>;
+  let xhr: XMLHttpRequest;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    handler = new NetworkHandler(config);
+    callbacks = handler.getCallbacks();
+
+    xhr = {} as XMLHttpRequest;
+
+    jest
+      .spyOn(utils, 'generateRequestId')
+      .mockReturnValue('request-id');
+
+    jest
+      .spyOn(Date, 'now')
+      .mockReturnValueOnce(1000)
+      .mockReturnValueOnce(1500);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should create pending request on open', () => {
+    jest
+      .spyOn(utils, 'shouldIgnoreUrl')
+      .mockReturnValue(false);
+
+    callbacks.onOpen(
+      'GET',
+      'https://api.com',
+      xhr,
+    );
+
+    callbacks.onSend(undefined, xhr);
+
+    expect(onEvent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        stage: 'request',
+        requestId: 'request-id',
+        method: 'GET',
+        url: 'https://api.com',
+      }),
+    );
+  });
+
+  it('should ignore urls that match ignored patterns', () => {
+    jest
+      .spyOn(utils, 'shouldIgnoreUrl')
+      .mockReturnValue(true);
+
+    callbacks.onOpen(
+      'GET',
+      'https://ignored.com',
+      xhr,
+    );
+
+    callbacks.onSend(undefined, xhr);
+
+    expect(onEvent).not.toHaveBeenCalled();
+  });
+
+  it('should attach request headers', () => {
+    jest
+      .spyOn(utils, 'shouldIgnoreUrl')
+      .mockReturnValue(false);
+
+    callbacks.onOpen(
+      'POST',
+      'https://api.com',
+      xhr,
+    );
+
+    callbacks.onRequestHeader(
+      'Authorization',
+      'Bearer token',
+      xhr,
+    );
+
+    callbacks.onSend(undefined, xhr);
+
+    expect(onEvent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        headers: {
+          Authorization: 'Bearer token',
+        },
+      }),
+    );
+  });
+
+  it('should attach request body', () => {
+    jest
+      .spyOn(utils, 'shouldIgnoreUrl')
+      .mockReturnValue(false);
+
+    callbacks.onOpen(
+      'POST',
+      'https://api.com',
+      xhr,
+    );
+
+    callbacks.onSend(
+      { name: 'Gabriel' },
+      xhr,
+    );
+
+    expect(onEvent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        body: JSON.stringify({
+          name: 'Gabriel',
+        }),
+      }),
+    );
+  });
+
+  it('should parse response headers', () => {
+    jest
+      .spyOn(utils, 'shouldIgnoreUrl')
+      .mockReturnValue(false);
+
+    jest
+      .spyOn(utils, 'parseResponseHeaders')
+      .mockReturnValue({
+        'content-type': 'application/json',
+      });
+
+    callbacks.onOpen(
+      'GET',
+      'https://api.com',
+      xhr,
+    );
+
+    callbacks.onHeaderReceived(
+      undefined,
+      undefined,
+      'Content-Type: application/json',
+      xhr,
+    );
+
+    callbacks.onResponse(
+      200,
+      false,
+      'ok',
+      'https://api.com',
+      'text',
+      xhr,
+    );
+
+    expect(onEvent).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        headers: {
+          'content-type':
+            'application/json',
+        },
+      }),
+    );
+  });
+
+  it('should emit response event', () => {
+    jest
+      .spyOn(utils, 'shouldIgnoreUrl')
+      .mockReturnValue(false);
+
+    jest
+      .spyOn(utils, 'responseToString')
+      .mockReturnValue('response body');
+
+    callbacks.onOpen(
+      'GET',
+      'https://api.com',
+      xhr,
+    );
+
+    callbacks.onSend(undefined, xhr);
+
+    callbacks.onResponse(
+      200,
+      false,
+      'response',
+      'https://api.com',
+      'text',
+      xhr,
+    );
+
+    expect(onEvent).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        stage: 'response',
+        statusCode: 200,
+        body: 'response body',
+        duration: 500,
+      }),
+    );
+  });
+
+  it('should handle blob responses', async () => {
+    jest
+      .spyOn(utils, 'shouldIgnoreUrl')
+      .mockReturnValue(false);
+
+    jest
+      .spyOn(utils, 'readBlobAsText')
+      .mockResolvedValue('blob content');
+
+    callbacks.onOpen(
+      'GET',
+      'https://api.com',
+      xhr,
+    );
+
+    callbacks.onResponse(
+      200,
+      false,
+      new Blob(['hello']),
+      'https://api.com',
+      'blob',
+      xhr,
+    );
+
+    await Promise.resolve();
+
+    expect(utils.readBlobAsText)
+      .toHaveBeenCalled();
+
+    expect(onEvent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        body: 'blob content',
+      }),
+    );
+  });
+
+  it('should clear pending requests', () => {
+    jest
+      .spyOn(utils, 'shouldIgnoreUrl')
+      .mockReturnValue(false);
+
+    callbacks.onOpen(
+      'GET',
+      'https://api.com',
+      xhr,
+    );
+
+    handler.clear();
+
+    callbacks.onSend(undefined, xhr);
+
+    expect(onEvent).not.toHaveBeenCalled();
+  });
+});

package/src/library/network-handler/index.ts

@@ -0,0 +1 @@
+export * from './network-handler'

package/src/library/network-handler/network-handler.ts

@@ -0,0 +1,141 @@
+/**
+ * Network interception handler
+ * Manages XHR request/response tracking and event creation
+ */
+
+import type {
+  NetworkCallbacks,
+  NetworkRequestEvent,
+  NetworkResponseEvent,
+  PendingRequest,
+} from '../types'
+import {
+  generateRequestId,
+  parseResponseHeaders,
+  shouldIgnoreUrl,
+  readBlobAsText,
+  responseToString,
+} from './utils'
+import type { NetworkHandlerConfig } from './types'
+import { projectHandler } from '../project'
+
+export class NetworkHandler {
+  private pendingRequests = new Map<XMLHttpRequest, PendingRequest>()
+  private config: NetworkHandlerConfig
+
+  constructor(config: NetworkHandlerConfig) {
+    this.config = config
+  }
+
+  getCallbacks(): NetworkCallbacks {
+    return {
+      onOpen: this.handleOpen.bind(this),
+      onRequestHeader: this.handleRequestHeader.bind(this),
+      onSend: this.handleSend.bind(this),
+      onHeaderReceived: this.handleHeaderReceived.bind(this),
+      onResponse: this.handleResponse.bind(this),
+    }
+  }
+
+  private handleOpen(method: string, url: string, xhr: XMLHttpRequest): void {
+    if (shouldIgnoreUrl(url, this.config.ignoredUrls)) return
+
+    const request: PendingRequest = {
+      id: generateRequestId(),
+      method,
+      url,
+      headers: {},
+      startTime: Date.now(),
+    }
+    this.pendingRequests.set(xhr, request)
+  }
+
+  private handleRequestHeader(
+    header: string,
+    value: string,
+    xhr: XMLHttpRequest
+  ): void {
+    const request = this.pendingRequests.get(xhr)
+    if (request) {
+      request.headers[header] = value
+    }
+  }
+
+  private handleSend(data: unknown, xhr: XMLHttpRequest): void {
+    const request = this.pendingRequests.get(xhr)
+    if (!request) return
+
+    if (data !== null && data !== undefined) {
+      request.body = typeof data === 'string' ? data : JSON.stringify(data)
+    }
+
+    const event: NetworkRequestEvent = {
+      type: 'network',
+      stage: 'request',
+      requestId: request.id,
+      method: request.method,
+      url: request.url,
+      headers: request.headers,
+      body: request.body,
+      timestamp: request.startTime,
+      projectId: projectHandler.getProjectId(),
+    }
+    this.config.onEvent(event)
+  }
+
+  private handleHeaderReceived(
+    _responseContentType: string | undefined,
+    _responseSize: number | undefined,
+    responseHeaders: string,
+    xhr: XMLHttpRequest
+  ): void {
+    const request = this.pendingRequests.get(xhr)
+    if (request) {
+      request.responseHeaders = parseResponseHeaders(responseHeaders)
+    }
+  }
+
+  private handleResponse(
+    status: number,
+    _timeout: boolean,
+    response: unknown,
+    responseURL: string,
+    responseType: string,
+    xhr: XMLHttpRequest
+  ): void {
+    const request = this.pendingRequests.get(xhr)
+    if (!request) return
+
+    const endTime = Date.now()
+    const projectId = projectHandler.getProjectId()
+
+    const sendResponseEvent = (bodyString: string | undefined) => {
+      const event: NetworkResponseEvent = {
+        type: 'network',
+        stage: 'response',
+        requestId: request.id,
+        method: request.method,
+        url: responseURL || request.url,
+        statusCode: status,
+        duration: endTime - request.startTime,
+        headers: request.responseHeaders,
+        body: bodyString,
+        timestamp: endTime,
+        projectId,
+      }
+      this.config.onEvent(event)
+      this.pendingRequests.delete(xhr)
+    }
+
+    if (responseType === 'blob' && response instanceof Blob) {
+      readBlobAsText(response).then(sendResponseEvent)
+      return
+    }
+
+    sendResponseEvent(responseToString(response, xhr))
+  }
+
+  clear(): void {
+    this.pendingRequests.clear()
+  }
+}

package/src/library/network-handler/types.ts

@@ -0,0 +1,6 @@
+import type { NetworkRequestEvent, NetworkResponseEvent } from '../types'
+
+export interface NetworkHandlerConfig {
+  ignoredUrls: RegExp[]
+  onEvent: (event: NetworkRequestEvent | NetworkResponseEvent) => void
+}

package/src/library/network-handler/utils/__tests__/generate-request-id.test.ts

@@ -0,0 +1,22 @@
+import { generateRequestId } from '../generate-request-id'
+
+describe('generateRequestId', () => {
+  it('should return a string', () => {
+    const id = generateRequestId()
+
+    expect(typeof id).toBe('string')
+  })
+
+  it('should generate an id in the expected format', () => {
+    const id = generateRequestId()
+
+    expect(id).toMatch(/^\d+-[a-z0-9]+$/)
+  })
+
+  it('should generate unique ids', () => {
+    const id1 = generateRequestId()
+    const id2 = generateRequestId()
+
+    expect(id1).not.toBe(id2)
+  })
+})

package/src/library/network-handler/utils/__tests__/parse-response-headers.test.ts

@@ -0,0 +1,71 @@
+import { parseResponseHeaders } from '../parse-response-headers'
+
+describe('parseResponseHeaders', () => {
+  it('should return empty object when headers string is empty', () => {
+    expect(parseResponseHeaders('')).toEqual({})
+  })
+
+  it('should parse single header', () => {
+    const headers = parseResponseHeaders('Content-Type: application/json')
+
+    expect(headers).toEqual({
+      'Content-Type': 'application/json',
+    })
+  })
+
+  it('should parse multiple headers', () => {
+    const headers = parseResponseHeaders(
+      [
+        'Content-Type: application/json',
+        'Authorization: Bearer token',
+        'X-Test: 123',
+      ].join('\r\n')
+    )
+
+    expect(headers).toEqual({
+      'Content-Type': 'application/json',
+      'Authorization': 'Bearer token',
+      'X-Test': '123',
+    })
+  })
+
+  it('should trim spaces from keys and values', () => {
+    const headers = parseResponseHeaders(
+      '  Content-Type  :   application/json   '
+    )
+
+    expect(headers).toEqual({
+      'Content-Type': 'application/json',
+    })
+  })
+
+  it('should ignore invalid lines', () => {
+    const headers = parseResponseHeaders(
+      ['Content-Type: application/json', 'invalid-line', ': missing-key'].join(
+        '\n'
+      )
+    )
+
+    expect(headers).toEqual({
+      'Content-Type': 'application/json',
+    })
+  })
+
+  it('should support values containing colon', () => {
+    const headers = parseResponseHeaders('Authorization: Bearer abc:def:ghi')
+
+    expect(headers).toEqual({
+      Authorization: 'Bearer abc:def:ghi',
+    })
+  })
+
+  it('should overwrite duplicated headers', () => {
+    const headers = parseResponseHeaders(
+      ['X-Test: first', 'X-Test: second'].join('\n')
+    )
+
+    expect(headers).toEqual({
+      'X-Test': 'second',
+    })
+  })
+})

package/src/library/network-handler/utils/__tests__/read-blob-as-text.test.ts

@@ -0,0 +1,79 @@
+import { readBlobAsText } from '../read-blob-as-text'
+
+describe('readBlobAsText', () => {
+  const originalFileReader = global.FileReader
+
+  afterEach(() => {
+    global.FileReader = originalFileReader
+    jest.restoreAllMocks()
+  })
+
+  it('should resolve blob text successfully', async () => {
+    class MockFileReader {
+      result = 'hello world'
+
+      onloadend: (() => void) | null = null
+      onerror: (() => void) | null = null
+
+      readAsText() {
+        this.onloadend?.()
+      }
+    }
+
+    // @ts-ignore
+    global.FileReader = MockFileReader
+
+    const blob = new Blob(['hello world'])
+
+    const result = await readBlobAsText(blob)
+
+    expect(result).toBe('hello world')
+  })
+
+  it('should resolve undefined on error', async () => {
+    class MockFileReader {
+      result = null
+
+      onloadend: (() => void) | null = null
+      onerror: (() => void) | null = null
+
+      readAsText() {
+        this.onerror?.()
+      }
+    }
+
+    // @ts-ignore
+    global.FileReader = MockFileReader
+
+    const blob = new Blob(['test'])
+
+    const result = await readBlobAsText(blob)
+
+    expect(result).toBeUndefined()
+  })
+
+  it('should call readAsText with provided blob', async () => {
+    const readAsTextMock = jest.fn()
+
+    class MockFileReader {
+      result = 'ok'
+
+      onloadend: (() => void) | null = null
+      onerror: (() => void) | null = null
+
+      readAsText(blob: Blob) {
+        readAsTextMock(blob)
+        this.onloadend?.()
+      }
+    }
+
+    // @ts-ignore
+    global.FileReader = MockFileReader
+
+    const blob = new Blob(['content'])
+
+    await readBlobAsText(blob)
+
+    expect(readAsTextMock).toHaveBeenCalledWith(blob)
+  })
+})