@affogatosoftware/recorder 1.0.8 → 1.1.0

package/dist/recorder/networkRecorder.js

@@ -0,0 +1,376 @@
+import { logger } from "../logger";
+import { post } from "../requests";
+export class NetworkRecorder {
+    window;
+    requestsBuffer = [];
+    pendingRequests = new Map();
+    isRunning = false;
+    flushIntervalMs = 2000;
+    capturedSessionId;
+    flushTimerId = null;
+    // Store original implementations
+    originalFetch;
+    originalXHROpen;
+    originalXHRSend;
+    // URL sanitization - reuse pattern from EventRecorder
+    queryParamsAllowed = new Set([
+        "utm_source", "source", "ref", "utm_medium", "medium",
+        "utm_campaign", "campaign", "utm_content", "content", "utm_term", "term"
+    ]);
+    networkSettings = {
+        enabled: false, // Default disabled
+        maxRequestBodySize: 10 * 1024, // 10KB
+        maxResponseBodySize: 50 * 1024, // 50KB
+        excludeDomains: [],
+        captureHeaders: false,
+        captureRequestBodies: false,
+        captureResponseBodies: true,
+        excludeHeaders: []
+    };
+    constructor(window, settings) {
+        this.window = window;
+        this.originalFetch = this.window.fetch.bind(this.window);
+        this.originalXHROpen = XMLHttpRequest.prototype.open;
+        this.originalXHRSend = XMLHttpRequest.prototype.send;
+        if (settings) {
+            this.networkSettings = { ...this.networkSettings, ...settings };
+        }
+    }
+    start = () => {
+        if (this.isRunning || !this.networkSettings.enabled) {
+            return;
+        }
+        this.isRunning = true;
+        this.requestsBuffer = [];
+        this.patchFetch();
+        this.patchXHR();
+        this.scheduleFlush();
+    };
+    stop = () => {
+        this.isRunning = false;
+        // Restore original implementations
+        this.window.fetch = this.originalFetch;
+        XMLHttpRequest.prototype.open = this.originalXHROpen;
+        XMLHttpRequest.prototype.send = this.originalXHRSend;
+        if (this.flushTimerId) {
+            clearTimeout(this.flushTimerId);
+            this.flushTimerId = null;
+        }
+    };
+    setCapturedSessionId(uuid) {
+        this.capturedSessionId = uuid;
+    }
+    scheduleFlush = () => {
+        if (this.flushTimerId) {
+            clearTimeout(this.flushTimerId);
+        }
+        this.flushTimerId = setTimeout(this.flush, this.flushIntervalMs);
+    };
+    flush = async () => {
+        if (this.requestsBuffer.length > 0 && this.capturedSessionId) {
+            try {
+                const response = await post(`/public/captured-sessions/${this.capturedSessionId}/network-requests`, this.requestsBuffer, { withCredentials: false });
+                if (response.status !== 201) {
+                    logger.error("Failed to save network requests", response.data);
+                }
+                this.requestsBuffer = [];
+            }
+            catch (error) {
+                logger.error("Failed to save network requests", error);
+                this.requestsBuffer = [];
+            }
+        }
+        this.scheduleFlush();
+    };
+    patchFetch = () => {
+        const self = this;
+        this.window.fetch = async function (input, init) {
+            const requestId = self.generateRequestId();
+            const timestamp = Date.now();
+            let url = "";
+            let method = "GET";
+            let requestHeaders = {};
+            let requestBody;
+            // Parse input to extract URL and method
+            if (typeof input === "string") {
+                url = input;
+            }
+            else if (input instanceof URL) {
+                url = input.toString();
+            }
+            else if (input instanceof Request) {
+                url = input.url;
+                method = input.method;
+                if (self.networkSettings.captureHeaders) {
+                    input.headers.forEach((value, key) => {
+                        requestHeaders[key] = value;
+                    });
+                }
+                if (self.networkSettings.captureRequestBodies && input.body) {
+                    try {
+                        const clonedRequest = input.clone();
+                        requestBody = await clonedRequest.text();
+                    }
+                    catch (e) {
+                        // Body already consumed, skip
+                    }
+                }
+            }
+            if (init) {
+                method = init.method || method;
+                if (self.networkSettings.captureHeaders && init.headers) {
+                    if (init.headers instanceof Headers) {
+                        init.headers.forEach((value, key) => {
+                            requestHeaders[key] = value;
+                        });
+                    }
+                    else if (Array.isArray(init.headers)) {
+                        init.headers.forEach(([key, value]) => {
+                            requestHeaders[key] = value;
+                        });
+                    }
+                    else {
+                        Object.assign(requestHeaders, init.headers);
+                    }
+                }
+                if (self.networkSettings.captureRequestBodies && init.body) {
+                    if (typeof init.body === "string") {
+                        requestBody = init.body;
+                    }
+                    else {
+                        try {
+                            requestBody = JSON.stringify(init.body);
+                        }
+                        catch (e) {
+                            requestBody = "[Unable to serialize body]";
+                        }
+                    }
+                }
+            }
+            if (!self.shouldCaptureRequest(url)) {
+                return self.originalFetch(input, init);
+            }
+            const sanitizedUrl = self.sanitizeUrl(url);
+            const filteredHeaders = self.filterHeaders(requestHeaders);
+            const truncatedBody = self.truncateContent(requestBody, self.networkSettings.maxRequestBodySize);
+            // Create initial request record
+            const networkRequest = {
+                requestId,
+                type: "fetch",
+                method: method.toUpperCase(),
+                url: sanitizedUrl,
+                requestHeaders: Object.keys(filteredHeaders).length > 0 ? filteredHeaders : undefined,
+                requestBody: truncatedBody,
+                timestamp
+            };
+            self.pendingRequests.set(requestId, networkRequest);
+            try {
+                const response = await self.originalFetch(input, init);
+                const duration = Date.now() - timestamp;
+                let responseHeaders = {};
+                let responseBody;
+                if (self.networkSettings.captureHeaders) {
+                    response.headers.forEach((value, key) => {
+                        responseHeaders[key] = value;
+                    });
+                }
+                if (self.networkSettings.captureResponseBodies) {
+                    try {
+                        const clonedResponse = response.clone();
+                        const text = await clonedResponse.text();
+                        responseBody = self.truncateContent(text, self.networkSettings.maxResponseBodySize);
+                    }
+                    catch (e) {
+                        responseBody = "[Unable to read response body]";
+                    }
+                }
+                // Complete the request record
+                const completedRequest = {
+                    ...networkRequest,
+                    responseStatus: response.status,
+                    responseHeaders: Object.keys(responseHeaders).length > 0 ? self.filterHeaders(responseHeaders) : undefined,
+                    responseBody,
+                    duration
+                };
+                self.addCompletedRequest(requestId, completedRequest);
+                return response;
+            }
+            catch (error) {
+                const duration = Date.now() - timestamp;
+                const errorRequest = {
+                    ...networkRequest,
+                    error: error instanceof Error ? error.message : String(error),
+                    duration
+                };
+                self.addCompletedRequest(requestId, errorRequest);
+                throw error;
+            }
+        };
+    };
+    patchXHR = () => {
+        const self = this;
+        XMLHttpRequest.prototype.open = function (method, url, async, username, password) {
+            const xhr = this;
+            const urlString = typeof url === "string" ? url : url.toString();
+            if (self.shouldCaptureRequest(urlString)) {
+                const requestId = self.generateRequestId();
+                const timestamp = Date.now();
+                xhr.__networkRecorder = {
+                    requestId,
+                    timestamp,
+                    method: method.toUpperCase(),
+                    url: self.sanitizeUrl(urlString)
+                };
+            }
+            return self.originalXHROpen.call(this, method, url, async ?? true, username, password);
+        };
+        XMLHttpRequest.prototype.send = function (body) {
+            const xhr = this;
+            if (xhr.__networkRecorder) {
+                const { requestId, timestamp, method, url } = xhr.__networkRecorder;
+                let requestHeaders = {};
+                let requestBody;
+                if (self.networkSettings.captureRequestBodies && body) {
+                    if (typeof body === "string") {
+                        requestBody = body;
+                    }
+                    else {
+                        try {
+                            requestBody = JSON.stringify(body);
+                        }
+                        catch (e) {
+                            requestBody = "[Unable to serialize body]";
+                        }
+                    }
+                }
+                const networkRequest = {
+                    requestId,
+                    type: "xhr",
+                    method,
+                    url,
+                    requestHeaders: Object.keys(requestHeaders).length > 0 ? self.filterHeaders(requestHeaders) : undefined,
+                    requestBody: self.truncateContent(requestBody, self.networkSettings.maxRequestBodySize),
+                    timestamp
+                };
+                self.pendingRequests.set(requestId, networkRequest);
+                // Handle response
+                const originalOnReadyStateChange = xhr.onreadystatechange;
+                xhr.onreadystatechange = function () {
+                    if (xhr.readyState === XMLHttpRequest.DONE) {
+                        const duration = Date.now() - timestamp;
+                        let responseHeaders = {};
+                        let responseBody;
+                        if (self.networkSettings.captureHeaders) {
+                            const headerString = xhr.getAllResponseHeaders();
+                            if (headerString) {
+                                headerString.split('\r\n').forEach(line => {
+                                    const parts = line.split(': ');
+                                    if (parts.length === 2) {
+                                        responseHeaders[parts[0]] = parts[1];
+                                    }
+                                });
+                            }
+                        }
+                        if (self.networkSettings.captureResponseBodies) {
+                            try {
+                                responseBody = self.truncateContent(xhr.responseText, self.networkSettings.maxResponseBodySize);
+                            }
+                            catch (e) {
+                                responseBody = "[Unable to read response]";
+                            }
+                        }
+                        const completedRequest = {
+                            ...networkRequest,
+                            responseStatus: xhr.status,
+                            responseHeaders: Object.keys(responseHeaders).length > 0 ? self.filterHeaders(responseHeaders) : undefined,
+                            responseBody,
+                            duration,
+                            error: xhr.status === 0 ? "Network error" : undefined
+                        };
+                        self.addCompletedRequest(requestId, completedRequest);
+                    }
+                    if (originalOnReadyStateChange) {
+                        originalOnReadyStateChange.call(this, new Event('readystatechange'));
+                    }
+                };
+            }
+            return self.originalXHRSend.call(this, body ?? null);
+        };
+    };
+    shouldCaptureRequest(url) {
+        if (!this.isRunning || !this.networkSettings.enabled) {
+            return false;
+        }
+        try {
+            const urlObj = new URL(url, this.window.location.href);
+            // Don't capture requests to our own API endpoints
+            if (urlObj.pathname.includes('/public/captured-sessions')) {
+                return false;
+            }
+            // Check excluded domains
+            if (this.networkSettings.excludeDomains.some(domain => urlObj.hostname.includes(domain))) {
+                return false;
+            }
+            return true;
+        }
+        catch (e) {
+            return false;
+        }
+    }
+    sanitizeUrl(url) {
+        try {
+            const urlObj = new URL(url, this.window.location.href);
+            // Apply same sanitization as EventRecorder
+            for (const key of urlObj.searchParams.keys()) {
+                if (!this.queryParamsAllowed.has(key.toLowerCase())) {
+                    urlObj.searchParams.set(key, "$redacted");
+                }
+            }
+            return urlObj.toString();
+        }
+        catch (e) {
+            logger.error("Failed to sanitize URL", e);
+            return url;
+        }
+    }
+    filterHeaders(headers) {
+        const filtered = {};
+        const defaultSensitiveHeaders = new Set([
+            'authorization', 'cookie', 'x-api-key', 'x-auth-token',
+            'x-csrf-token', 'x-session-token', 'set-cookie'
+        ]);
+        // Combine default sensitive headers with user-specified excluded headers
+        const excludedHeaders = new Set([
+            ...defaultSensitiveHeaders,
+            ...this.networkSettings.excludeHeaders.map(h => h.toLowerCase())
+        ]);
+        for (const [key, value] of Object.entries(headers)) {
+            if (excludedHeaders.has(key.toLowerCase())) {
+                // Don't record excluded headers
+                continue;
+            }
+            filtered[key] = value;
+        }
+        return filtered;
+    }
+    truncateContent(content, maxSize) {
+        if (!content)
+            return content;
+        // Apply masking function if provided
+        let processedContent = content;
+        if (this.networkSettings.requestBodyMaskingFunction) {
+            processedContent = this.networkSettings.requestBodyMaskingFunction(content);
+        }
+        if (processedContent.length > maxSize) {
+            return processedContent.substring(0, maxSize) + `... [truncated from ${processedContent.length} chars]`;
+        }
+        return processedContent;
+    }
+    generateRequestId() {
+        return `req_${crypto.randomUUID()}`;
+    }
+    addCompletedRequest(requestId, request) {
+        this.pendingRequests.delete(requestId);
+        this.requestsBuffer.push(request);
+    }
+}

package/dist/recorder/recorder.d.ts

@@ -1,33 +1,43 @@
 export declare class Recorder {
     private window;
     private publicToken;
-    private recorderSettings;
     private sessionRecorder;
     private eventRecorder;
+    private errorRecorder;
+    private networkRecorder;
+    private recorderSettings;
     private capturedSessionId;
     private pingIntervalMs;
     private pingTimeout;
-    constructor(window: Window, publicToken: string, recorderSettings: RecorderSettings);
+    constructor(window: Window, publicToken: string, userSettings?: Partial<RecorderSettings>);
     private schedulePing;
     private ping;
     /**
-     * Start both recorders
+     * Start all recorders
      */
     start(): void;
     /**
-     * Stop both recorders
+     * Stop all recorders
      */
     stop(): void;
     private collectCapturedUserMetadata;
 }
 export interface RecorderSettings {
-    maskingLevel: MaskingLevel | null;
-}
-export declare enum MaskingLevel {
-    None = "none",
-    All = "all",
-    InputAndTextArea = "input-and-textarea",
-    InputPasswordOrEmailAndTextArea = "input-password-or-email-and-textarea"
+    maskingLevel: "none" | "all" | "input-and-textarea" | "input-password-or-email-and-textarea";
+    consoleRecording: {
+        enabled: boolean;
+    };
+    networkRecording: {
+        enabled: boolean;
+        maxRequestBodySize: number;
+        maxResponseBodySize: number;
+        excludeDomains: string[];
+        captureHeaders: boolean;
+        captureRequestBodies: boolean;
+        captureResponseBodies: boolean;
+        excludeHeaders: string[];
+        requestBodyMaskingFunction?: (body: string) => string;
+    };
 }
 export interface CapturedUserMetadata {
     browserName?: string;

package/dist/recorder/recorder.js

@@ -1,31 +1,63 @@
 import { SessionRecorder } from "./sessionRecorder";
 import { EventRecorder } from "./eventRecorder";
+import { ErrorRecorder } from "./errorRecorder";
+import { NetworkRecorder } from "./networkRecorder";
 import { post, put } from "../requests";
 import { UAParser } from "ua-parser-js";
 export class Recorder {
     window;
     publicToken;
-    recorderSettings;
     sessionRecorder;
     eventRecorder;
+    errorRecorder;
+    networkRecorder;
+    recorderSettings;
     capturedSessionId = null;
     pingIntervalMs = 20000;
     pingTimeout = null;
-    constructor(window, publicToken, recorderSettings) {
+    constructor(window, publicToken, userSettings = {}) {
         this.window = window;
         this.publicToken = publicToken;
-        this.recorderSettings = recorderSettings;
-        if (recorderSettings.maskingLevel == null) {
-            recorderSettings.maskingLevel = MaskingLevel.InputAndTextArea;
-        }
-        this.sessionRecorder = new SessionRecorder(recorderSettings);
-        this.eventRecorder = new EventRecorder(window, recorderSettings);
+        // Default settings
+        const defaultSettings = {
+            maskingLevel: "all",
+            consoleRecording: { enabled: false },
+            networkRecording: {
+                enabled: false,
+                maxRequestBodySize: 10 * 1024,
+                maxResponseBodySize: 50 * 1024,
+                excludeDomains: [],
+                captureHeaders: true,
+                captureRequestBodies: true,
+                captureResponseBodies: true,
+                excludeHeaders: []
+            }
+        };
+        // Merge user settings with defaults
+        this.recorderSettings = {
+            ...defaultSettings,
+            ...userSettings,
+            consoleRecording: {
+                ...defaultSettings.consoleRecording,
+                ...(userSettings.consoleRecording || {})
+            },
+            networkRecording: {
+                ...defaultSettings.networkRecording,
+                ...(userSettings.networkRecording || {})
+            }
+        };
+        this.sessionRecorder = new SessionRecorder(this.recorderSettings);
+        this.eventRecorder = new EventRecorder(window, this.recorderSettings);
+        this.errorRecorder = new ErrorRecorder(window, this.recorderSettings.consoleRecording);
+        this.networkRecorder = new NetworkRecorder(window, this.recorderSettings.networkRecording);
         post(`public/captured-sessions`, { publicToken }, { withCredentials: false })
             .then(response => {
             const id = response.data;
             this.capturedSessionId = id;
             this.sessionRecorder.setCapturedSessionId(id);
             this.eventRecorder.setCapturedSessionId(id);
+            this.errorRecorder.setCapturedSessionId(id);
+            this.networkRecorder.setCapturedSessionId(id);
             this.schedulePing();
             const capturedUserMetadata = this.collectCapturedUserMetadata();
             post(`public/captured-sessions/${this.capturedSessionId}/captured-session/metadata`, capturedUserMetadata, { withCredentials: false });
@@ -34,6 +66,8 @@ export class Recorder {
             console.error(error);
             this.sessionRecorder.stop();
             this.eventRecorder.stop();
+            this.errorRecorder.stop();
+            this.networkRecorder.stop();
         });
     }
     schedulePing() {
@@ -47,18 +81,22 @@ export class Recorder {
         this.schedulePing();
     };
     /**
-     * Start both recorders
+     * Start all recorders
      */
     start() {
         this.sessionRecorder.start();
         this.eventRecorder.start();
+        this.errorRecorder.start();
+        this.networkRecorder.start();
     }
     /**
-     * Stop both recorders
+     * Stop all recorders
      */
     stop() {
         this.sessionRecorder.stop();
         this.eventRecorder.stop();
+        this.errorRecorder.stop();
+        this.networkRecorder.stop();
     }
     collectCapturedUserMetadata = () => {
         const ua = new UAParser();
@@ -105,10 +143,3 @@ export class Recorder {
         };
     };
 }
-export var MaskingLevel;
-(function (MaskingLevel) {
-    MaskingLevel["None"] = "none";
-    MaskingLevel["All"] = "all";
-    MaskingLevel["InputAndTextArea"] = "input-and-textarea";
-    MaskingLevel["InputPasswordOrEmailAndTextArea"] = "input-password-or-email-and-textarea";
-})(MaskingLevel || (MaskingLevel = {}));

package/dist/recorder/sessionRecorder.js

@@ -1,8 +1,7 @@
 import { record } from "rrweb";
 import { patch } from "../requests";
 import { logger } from "../logger";
-import { MaskingLevel } from "./recorder";
-import { assertNever } from "../utils";
+import {} from "./recorder";
 export class SessionRecorder {
     recorderSettings;
     capturedSessionId = null;
@@ -35,20 +34,18 @@ export class SessionRecorder {
         };
         const maskFn = (input) => input.replaceAll(/\S/g, "*");
         switch (this.recorderSettings.maskingLevel) {
-            case MaskingLevel.None:
+            case "none":
                 break;
-            case MaskingLevel.All:
+            case "all":
                 recordOptions.maskTextFn = maskFn;
                 recordOptions.maskTextSelector = "*";
                 recordOptions.maskAllInputs = true;
                 recordOptions.maskInputFn = maskFn;
                 break;
-            case null:
-            case MaskingLevel.InputAndTextArea:
-                logger.error("masking level: input and textarea");
+            case "input-and-textarea":
                 recordOptions.maskAllInputs = true;
                 break;
-            case MaskingLevel.InputPasswordOrEmailAndTextArea:
+            case "input-password-or-email-and-textarea":
                 recordOptions.maskInputOptions = {
                     password: true,
                     email: true,
@@ -56,7 +53,10 @@ export class SessionRecorder {
                 };
                 break;
             default:
-                assertNever(this.recorderSettings.maskingLevel);
+                recordOptions.maskTextFn = maskFn;
+                recordOptions.maskTextSelector = "*";
+                recordOptions.maskAllInputs = true;
+                recordOptions.maskInputFn = maskFn;
         }
         this.stopFn = record(recordOptions);
         this.scheduleFlush();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affogatosoftware/recorder",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "license": "MIT",
   "author": "Chris Ryan",
   "main": "./dist/index.js",