@lognroll/lib 1.0.0

package/src/network/index.ts

@@ -0,0 +1,383 @@
+import Core from "../core";
+
+export class Network extends Core {
+    constructor() {
+        super();
+        this.wrap();
+    }
+    private responseLogs: any[] = [];
+    private processedResources = new Set<string>();
+    private resourceMonitorInterval: number | null = null;
+
+    getResponseLogs() {
+        return [...this.responseLogs];
+    }
+
+    clearResponseLogs() {
+        this.responseLogs = [];
+        this.processedResources.clear();
+    }
+
+    private monitorResourceTiming() {
+        if (typeof window === 'undefined' || !window.performance || !window.performance.getEntriesByType) {
+            return;
+        }
+
+        const resources = performance.getEntriesByType('resource') as PerformanceResourceTiming[];
+        
+        resources.forEach(resource => {
+            // Skip if already processed or if it's a lognroll request
+            if (this.processedResources.has(resource.name) || resource.name.includes('lognroll')) {
+                return;
+            }
+
+            // Add to processed set
+            this.processedResources.add(resource.name);
+
+            // Calculate timing details
+            const timing = {
+                startTime: resource.startTime,
+                duration: resource.duration,
+                fetchStart: resource.fetchStart,
+                responseEnd: resource.responseEnd,
+                // DNS lookup time
+                dnsTime: resource.domainLookupEnd - resource.domainLookupStart,
+                // Connection time
+                connectTime: resource.connectEnd - resource.connectStart,
+                // Time to First Byte (TTFB)
+                ttfb: resource.responseStart - resource.requestStart,
+                // Content download time
+                downloadTime: resource.responseEnd - resource.responseStart
+            };
+
+            // console.log('resource', resource)
+            // Create response log entry
+            const responseLog = {
+                type: 'network',
+                stage: 'response',
+                payload: {
+                    request: {
+                        id: `resource-${resource.startTime}`,
+                        url: resource.name,
+                        timestamp: Date.now() - resource.duration,
+                        method: 'GET',
+                        initiatorType: resource.initiatorType,
+                        body: null
+                    },
+                    response: {
+                        url: resource.name,
+                        status: 200, // Resources that fail to load won't appear in the performance entries
+                        statusText: 'OK',
+                        headers: {},
+                        timing,
+                        contentType: resource.initiatorType,
+                        decodedBodySize: resource.decodedBodySize,
+                        encodedBodySize: resource.encodedBodySize,
+                        transferSize: resource.transferSize,
+                        timestamp: Date.now(),
+                        responseTime: resource.duration
+                    }
+                }
+            };
+
+            this.responseLogs.push(responseLog);
+        });
+
+        // Clear the performance buffer to avoid processing the same resources again
+        performance.clearResourceTimings();
+    }
+
+    startResourceMonitoring(interval: number = 1000) {
+        if (this.resourceMonitorInterval !== null) {
+            return;
+        }
+
+        // Initial check
+        this.monitorResourceTiming();
+
+        // Set up periodic monitoring
+        this.resourceMonitorInterval = window.setInterval(() => {
+            this.monitorResourceTiming();
+        }, interval);
+    }
+
+    stopResourceMonitoring() {
+        if (this.resourceMonitorInterval !== null) {
+            clearInterval(this.resourceMonitorInterval);
+            this.resourceMonitorInterval = null;
+        }
+    }
+
+    wrap() {
+        // Start resource monitoring
+        this.startResourceMonitoring();
+
+        // Store for tracking requests
+        const requestStore = new Map<string, { url: string; timestamp: number, body: any }>();
+
+        // Wrap fetch
+        const originalFetch = window.fetch;
+        const _this = this;
+        window.fetch = async function (input: RequestInfo | URL, init?: RequestInit) {
+            const requestId = Date.now().toString();
+            const url = typeof input === 'string' ? input : (input as Request).url;
+            
+            // Skip requests containing 'lognroll' in the URL
+            if (url.includes('lognroll')) {
+                return originalFetch(input, init);
+            }
+            
+            const method = init?.method || 'GET';
+            const body = init?.body || null;
+
+            requestStore.set(requestId, {url, timestamp: Date.now(), body: null});
+
+            // Execute original fetch
+            const startTime = Date.now();
+            const requestDetails = requestStore.get(requestId);
+            try {
+                const response = await originalFetch(input, init);
+
+                // Clone response to read body
+                const clonedResponse = response.clone();
+                const responseData = await clonedResponse.text().catch(() => null);
+                // Log response
+                const responseTime = Date.now() - startTime;
+                const responseLog = {
+                    type: 'network',
+                    stage: 'response',
+                    payload: {
+                        request: {
+                            id: requestId,
+                            url: response.url,
+                            timestamp: requestDetails?.timestamp || Date.now() - 100,
+                            method,
+                            body
+                        },
+                        response: {
+                            url: response.url,
+                            status: response.status,
+                            statusText: response.statusText,
+                            headers: (() => {
+                                const headersObj: Record<string, string> = {};
+                                response.headers.forEach((value, key) => {
+                                    headersObj[key] = value;
+                                });
+                                return headersObj;
+                            })(),
+                            data: responseData,
+                            timestamp: Date.now(),
+                            responseTime
+                        }
+                    }
+                };
+
+                console.log('responseLog', responseLog);
+                _this.responseLogs.push(responseLog);
+                requestStore.delete(requestId);
+
+                return response;
+            } catch (error: unknown) {
+                // Log error
+                const errorLog = {
+                    type: 'network',
+                    stage: 'error',
+                    payload: {
+                        request: {
+                            id: requestId,
+                            url,
+                            timestamp: requestDetails?.timestamp || Date.now() - 100,
+                            method,
+                            body
+                        },
+                        error: {
+                            message: error instanceof Error ? error.message : 'Unknown error',
+                            timestamp: Date.now()
+                        }
+                    }
+                };
+
+                // console.error(JSON.stringify(errorLog));
+                _this.responseLogs.push(errorLog);
+                requestStore.delete(requestId);
+                throw error;
+            }
+        };
+
+        // Wrap XMLHttpRequest
+        const originalXHR = window.XMLHttpRequest;
+        // @ts-ignore - We're intentionally replacing the constructor
+        window.XMLHttpRequest = function () {
+            const xhr = new originalXHR();
+            const requestId = Date.now().toString();
+
+            const originalOpen = xhr.open;
+
+            // Store custom headers for this specific XHR instance
+            (xhr as any)._requestHeaders = {};
+
+            // Preserve the original setRequestHeader for this instance
+            const originalSetRequestHeader = xhr.setRequestHeader;
+            xhr.setRequestHeader = function(header, value) {
+                (xhr as any)._requestHeaders[header] = value;
+                originalSetRequestHeader.apply(this, arguments as any);
+            };
+
+            xhr.open = function (method: string, url: string | URL) {
+                if (url.toString().includes('lognroll')) {
+                    return originalOpen.apply(xhr, arguments as any);
+                }
+
+                requestStore.set(requestId, {url: url.toString(), timestamp: Date.now(), body: null});
+
+
+                // Store a reference to 'this' (the XHR object) to use in the modified onreadystatechange
+                const self = this;
+
+                // Preserve the original onreadystatechange handler if it exists
+                const originalOnReadyStateChange = this.onreadystatechange;
+
+                // Override onreadystatechange to intercept the response
+                this.onreadystatechange = function() {
+                    if (self.readyState === 4) { // DONE state
+                        // Log response details
+                        console.log('XHR Response Received:');
+                        console.log('  URL:', self.responseURL);
+                        console.log('  Status:', self.status);
+                        console.log('  Status Text:', self.statusText);
+                        console.log('  Response Data:', self.responseText); // Or self.response, self.responseXML, etc.
+
+                        // You can add additional logic here, like error handling or re-trying requests
+
+                        const data = requestStore.get(requestId);
+                        // Log response
+                        const responseTime = Date.now() - (data?.timestamp || Date.now());
+                        console.log('METHOD', method);
+                        const responseLog = {
+                            type: 'network',
+                            stage: 'response',
+                            payload: {
+                                request: {
+                                    id: requestId,
+                                    url: url,
+                                    timestamp: requestStore.get(requestId)?.timestamp || Date.now() - 100,
+                                    method: method || 'GET',
+                                    body: data?.body || null,
+                                    headers: (xhr as any)._requestHeaders || {}
+                                },
+                                response: {
+                                    status: self.status,
+                                    statusText: self.statusText,
+                                    headers: self.getAllResponseHeaders().split('\r\n').reduce((acc: Record<string, string>, line: string) => {
+                                        const [key, value] = line.split(': ');
+                                        if (key && value) acc[key] = value;
+                                        return acc;
+                                    }, {}),
+                                    data: self.responseText,
+                                    timestamp: Date.now(),
+                                    responseTime
+                                }
+                            }
+                        };
+
+                        // console.log(JSON.stringify(responseLog));
+                        console.log('responseLog', responseLog);
+
+                        _this.responseLogs.push(responseLog);
+                        requestStore.delete(requestId);
+
+                        // Call the original onreadystatechange if it was defined
+                        if (originalOnReadyStateChange) {
+                            originalOnReadyStateChange.apply(self, arguments as any);
+                        }
+                    } else {
+                        // If there was an original onreadystatechange, call it for other states
+                        if (originalOnReadyStateChange) {
+                            originalOnReadyStateChange.apply(self, arguments as any);
+                        }
+                    }
+                };
+
+
+                return originalOpen.apply(xhr, arguments as any);
+            };
+
+            const originalSend = xhr.send;
+            xhr.send = function (body: any) {
+                if (body instanceof FormData) {
+                    console.log("FormData entries:");
+                    const reqData: any = {};
+                    for (const [key, value] of (body as any).entries()) {
+                        console.log(`${key}:`, value);
+                        reqData[key] = value;
+                    }
+                    body = reqData;
+                    const data = requestStore.get(requestId);
+                    if (data != null) {
+                        data['body'] = reqData;
+                    }
+
+                } else {
+                    const data = requestStore.get(requestId);
+                    if (data != null) {
+                        data['body'] = body;
+                    }
+                    console.log("Non-FormData body:", body);
+                }
+
+                xhr.addEventListener('load', function (progressEvent) {
+
+                    const url = requestStore.get(requestId)?.url || '';
+                    // Skip if URL contains 'lognroll'
+                    if (url.includes('lognroll')) {
+                        return;
+                    }
+
+                    if(url.includes('/api/v1/requests/')) {
+                        // debugger;
+                    }
+
+
+                    console.log('url', url);
+                    console.log('xhr.response', xhr.response, xhr);
+
+                });
+
+                xhr.addEventListener('error', function () {
+                    // Skip if URL contains 'lognroll'
+                    if (xhr.responseURL.includes('lognroll')) {
+                        return;
+                    }
+                    
+                    // Log error
+                    const errorLog = {
+                        type: 'network',
+                        stage: 'error',
+                        payload: {
+                            request: {
+                                id: requestId,
+                                url: xhr.responseURL,
+                                timestamp: requestStore.get(requestId)?.timestamp || Date.now() - 100,
+                                method: (xhr as any)._method || 'GET',
+                                body
+                            },
+                            error: {
+                                message: 'XHR request failed',
+                                timestamp: Date.now()
+                            }
+                        }
+                    };
+
+                    _this.responseLogs.push(errorLog);
+                    requestStore.delete(requestId);
+                });
+
+                return originalSend.apply(xhr, arguments as any);
+            };
+
+            return xhr;
+        };
+    }
+}
+
+export default Network;

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es2019",
+    "module": "commonjs",
+    "outDir": "./dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "lib": ["es2019", "dom"]
+  },
+  "include": ["src"]
+}

package/webpack.config.js

@@ -0,0 +1,30 @@
+const webpack = require('webpack');
+const path = require('path');
+
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist')
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            PARAM_VALUE: JSON.stringify(process.env.PARAM_VALUE || 'defaultValue')
+        })
+    ],
+    mode: 'production',
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules|dist/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ['@babel/preset-env']
+                    }
+                }
+            }
+        ]
+    }
+};