@echoteam/signoz-react 1.2.1 → 1.2.3

package/README.md

@@ -24,6 +24,12 @@ Library React untuk monitoring dan tracing aplikasi menggunakan OpenTelemetry da
   - First Paint, First Contentful Paint
   - DOM Content Loaded, Load Complete
   - Resource timing
+- **WebSocket Logging**: Otomatis track WebSocket connections dan messages
+  - Track connection open, close, error
+  - Log messages sent dan received
+  - Extract message type dan text dari JSON
+  - Connection duration tracking
+  - Data tersimpan di SignOz span attributes
 - **No Click Tracking**: User interaction (click events) tidak di-track untuk privacy dan performa
 - **Error Boundary**: Komponen React untuk menangkap dan melaporkan error dengan tracing
 - **Error Page**: Halaman error untuk React Router dengan integrasi tracing
@@ -66,10 +72,17 @@ REACT_APP_SIGNOZ_LOG_REQUEST_BODY=true
 REACT_APP_SIGNOZ_LOG_RESPONSE_BODY=true
 REACT_APP_SIGNOZ_MAX_BODY_LOG_SIZE=10000
 
-# Konfigurasi Tracking (opsional, default: true)
-REACT_APP_SIGNOZ_ENABLE_DOCUMENT_LOAD=true
-REACT_APP_SIGNOZ_ENABLE_ERROR_TRACKING=true
-REACT_APP_SIGNOZ_ENABLE_NAVIGATION_TRACKING=true
+# Konfigurasi Tracking (opsional)
+REACT_APP_SIGNOZ_ENABLE_DOCUMENT_LOAD=false  # default: false
+REACT_APP_SIGNOZ_ENABLE_ERROR_TRACKING=true  # default: true
+REACT_APP_SIGNOZ_ENABLE_NAVIGATION_TRACKING=false  # default: false
+
+# WebSocket Logging (opsional, default: false)
+REACT_APP_SIGNOZ_ENABLE_WEBSOCKET_LOGGING=false
+REACT_APP_SIGNOZ_LOG_WEBSOCKET_MESSAGES=false
+
+# Console Logging (opsional, default: false)
+REACT_APP_SIGNOZ_ENABLE_CONSOLE_LOG=false
 ```
 
 > **Catatan untuk REACT_APP_SIGNOZ_ALLOWED_ORIGINS:**
@@ -131,9 +144,14 @@ initializeSignOzTracing({
   logResponseBody: true, // Log response body (default: true)
   maxBodyLogSize: 10000, // Maksimal 10KB per log (default: 10000)
   // Konfigurasi tracking
-  enableDocumentLoad: true, // Track page load performance (default: true)
+  enableDocumentLoad: false, // Track page load performance (default: false)
   enableErrorTracking: true, // Track unhandled errors (default: true)
-  enableNavigationTracking: true // Track route changes (default: true)
+  enableNavigationTracking: false, // Track route changes (default: false)
+  // WebSocket logging (default: false)
+  enableWebSocketLogging: false, // Track WebSocket connections and messages
+  logWebSocketMessages: false, // Log WebSocket message content
+  // Console logging (default: false, hanya kirim ke SignOz tanpa console.log)
+  enableConsoleLog: false // Set true untuk enable console.log di browser
 });
 ```
 
@@ -171,10 +189,12 @@ Library ini secara otomatis melog semua HTTP request dan response yang dilakukan
 3. Pilih trace yang ingin dilihat
 4. Lihat span attributes:
    - `http.request.body`: Body dari request (untuk POST/PUT/PATCH)
-   - `http.response.body`: Body dari response
+   - `response.data`: Body dari response
+   - `response.message`: Message dari response JSON (jika ada field `message`)
    - `http.url`: URL endpoint
    - `http.method`: HTTP method
    - `http.status_code`: Status code response
+   - `duration_ms`: Durasi request dalam milliseconds
    - `page.url`: URL halaman frontend yang melakukan request
    - `page.pathname`: Pathname halaman frontend
    - `page.search`: Query parameters halaman frontend
@@ -298,6 +318,64 @@ initializeSignOzTracing({
 });
 ```
 
+### WebSocket Logging
+
+Library ini otomatis track semua WebSocket connections dan messages.
+
+**Contoh Output di Console:**
+```
+[SignOz] WebSocket Connected to wss://api.example.com/ws from page /dashboard [45ms]
+[SignOz] WebSocket Send to wss://api.example.com/ws from page /dashboard: {"type":"subscribe","channel":"updates"}
+[SignOz] WebSocket Receive from wss://api.example.com/ws on page /dashboard: {"type":"message","data":"Hello"}
+[SignOz] WebSocket Closed wss://api.example.com/ws on page /dashboard - Code: 1000, Reason: Normal closure, Clean: true
+```
+
+**Data yang Di-track:**
+- WebSocket connection (open, close, error)
+- Connection duration
+- Messages sent (dengan content)
+- Messages received (dengan content)
+- Close code dan reason
+- URL halaman frontend yang membuat connection
+- Message type (jika ada field `type` atau `event` di JSON)
+- Message text (jika ada field `message` di JSON)
+
+**Melihat di SignOz:**
+1. Navigasi ke **Traces**
+2. Filter by span name: "WebSocket Connection", "WebSocket Send", "WebSocket Receive", "WebSocket Close", atau "WebSocket Error"
+3. Lihat span attributes:
+   - `websocket.url`: URL WebSocket
+   - `websocket.protocols`: Protocols yang digunakan
+   - `websocket.state`: State connection (open, closed, error)
+   - `websocket.direction`: Arah message (send/receive)
+   - `websocket.message`: Content message
+   - `websocket.message.type`: Tipe message (jika ada)
+   - `websocket.message.text`: Text message (jika ada field `message`)
+   - `websocket.close.code`: Close code
+   - `websocket.close.reason`: Alasan close
+   - `websocket.close.wasClean`: Apakah close dengan clean
+   - `duration_ms`: Durasi connection
+   - `page.url`: URL halaman frontend
+   - `page.pathname`: Pathname halaman frontend
+
+**Mengaktifkan WebSocket Logging:**
+```typescript
+// WebSocket logging disabled by default
+// Untuk mengaktifkan:
+initializeSignOzTracing({
+  // ... konfigurasi lainnya
+  enableWebSocketLogging: true,
+  logWebSocketMessages: true // Enable message logging
+});
+
+// Atau hanya track connection tanpa log messages
+initializeSignOzTracing({
+  // ... konfigurasi lainnya
+  enableWebSocketLogging: true,
+  logWebSocketMessages: false // Hanya track connection, tidak log messages
+});
+```
+
 ### Error Boundary
 
 #### Penggunaan Dasar
@@ -452,9 +530,12 @@ Inisialisasi SignOz tracing untuk aplikasi React.
   - `logRequestBody` (opsional): Log request body untuk POST/PUT/PATCH (default: true)
   - `logResponseBody` (opsional): Log response body untuk semua request (default: true)
   - `maxBodyLogSize` (opsional): Maksimal ukuran body yang di-log dalam bytes (default: 10000)
-  - `enableDocumentLoad` (opsional): Aktifkan document load instrumentation (default: true)
+  - `enableDocumentLoad` (opsional): Aktifkan document load instrumentation (default: false)
   - `enableErrorTracking` (opsional): Aktifkan automatic error tracking (default: true)
-  - `enableNavigationTracking` (opsional): Aktifkan navigation/route tracking (default: true)
+  - `enableNavigationTracking` (opsional): Aktifkan navigation/route tracking (default: false)
+  - `enableConsoleLog` (opsional): Aktifkan console.log output di browser (default: false)
+  - `enableWebSocketLogging` (opsional): Aktifkan WebSocket connection dan message tracking (default: false)
+  - `logWebSocketMessages` (opsional): Log WebSocket message content (default: false)
 
 ### `ErrorBoundary`
 

package/dist/index.d.ts

@@ -20,6 +20,9 @@ interface SignOzConfig {
     enableDocumentLoad?: boolean;
     enableErrorTracking?: boolean;
     enableNavigationTracking?: boolean;
+    enableConsoleLog?: boolean;
+    enableWebSocketLogging?: boolean;
+    logWebSocketMessages?: boolean;
 }
 declare global {
     interface Window {

package/dist/index.esm.js

@@ -15318,6 +15318,8 @@ function addFetchLogging(config) {
         // Capture current page info
         const pageUrl = window.location.href;
         const pagePath = window.location.pathname;
+        // Track start time
+        const startTime = performance.now();
         const tracer = trace.getTracer('fetch-logger');
         const span = tracer.startSpan(`HTTP ${method} ${url}`);
         try {
@@ -15332,9 +15334,14 @@ function addFetchLogging(config) {
             if (config.logRequestBody && (init === null || init === void 0 ? void 0 : init.body) && ['POST', 'PUT', 'PATCH'].includes(method.toUpperCase())) {
                 const bodyStr = truncateBody(init.body, config.maxBodyLogSize);
                 span.setAttribute('http.request.body', bodyStr);
-                console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath}:`, bodyStr);
+                if (config.enableConsoleLog) {
+                    console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath}:`, bodyStr);
+                }
             }
             const response = await originalFetch.apply(this, args);
+            // Calculate duration
+            const duration = performance.now() - startTime;
+            span.setAttribute('duration_ms', Math.round(duration));
             // Log response data
             span.setAttribute('http.status_code', response.status);
             if (config.logResponseBody && response.ok) {
@@ -15342,23 +15349,42 @@ function addFetchLogging(config) {
                 try {
                     const responseData = await clonedResponse.text();
                     const truncatedData = truncateBody(responseData, config.maxBodyLogSize);
-                    span.setAttribute('http.response.body', truncatedData);
-                    console.log(`[SignOz] ${method} Response from ${url} (${response.status}) on page ${pagePath}:`, truncatedData);
+                    span.setAttribute('response.data', truncatedData);
+                    // Try to parse JSON and extract message if exists
+                    try {
+                        const jsonData = JSON.parse(responseData);
+                        if (jsonData.message) {
+                            span.setAttribute('response.message', jsonData.message);
+                        }
+                    }
+                    catch (e) {
+                        // Not JSON or no message field, ignore
+                    }
+                    if (config.enableConsoleLog) {
+                        console.log(`[SignOz] ${method} Response from ${url} (${response.status}) on page ${pagePath} [${Math.round(duration)}ms]:`, truncatedData);
+                    }
                 }
                 catch (e) {
-                    console.warn('[SignOz] Failed to read response body:', e);
+                    if (config.enableConsoleLog) {
+                        console.warn('[SignOz] Failed to read response body:', e);
+                    }
                 }
             }
-            else if (!response.ok) {
-                console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath} - Status: ${response.status}`);
+            else if (!response.ok && config.enableConsoleLog) {
+                console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath} - Status: ${response.status} [${Math.round(duration)}ms]`);
             }
             span.setStatus({ code: SpanStatusCode.OK });
             return response;
         }
         catch (error) {
+            // Calculate duration even on error
+            const duration = performance.now() - startTime;
+            span.setAttribute('duration_ms', Math.round(duration));
             span.recordException(error);
             span.setStatus({ code: SpanStatusCode.ERROR, message: error.message });
-            console.error(`[SignOz] ${method} Error for ${url} on page ${pagePath}:`, error);
+            if (config.enableConsoleLog) {
+                console.error(`[SignOz] ${method} Error for ${url} on page ${pagePath} [${Math.round(duration)}ms]:`, error);
+            }
             throw error;
         }
         finally {
@@ -15375,6 +15401,7 @@ function addXHRLogging(config) {
         const xhr = new OriginalXHR();
         let method = '';
         let url = '';
+        let startTime = 0;
         // Capture current page info when XHR is created
         const pageUrl = window.location.href;
         const pagePath = window.location.pathname;
@@ -15386,6 +15413,8 @@ function addXHRLogging(config) {
         };
         const originalSend = xhr.send;
         xhr.send = function (body) {
+            // Track start time
+            startTime = performance.now();
             const tracer = trace.getTracer('xhr-logger');
             const span = tracer.startSpan(`HTTP ${method} ${url}`);
             span.setAttribute('http.url', url);
@@ -15399,27 +15428,49 @@ function addXHRLogging(config) {
             if (config.logRequestBody && body && ['POST', 'PUT', 'PATCH'].includes(method.toUpperCase())) {
                 const bodyStr = truncateBody(body, config.maxBodyLogSize);
                 span.setAttribute('http.request.body', bodyStr);
-                console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath}:`, bodyStr);
+                if (config.enableConsoleLog) {
+                    console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath}:`, bodyStr);
+                }
             }
             this.addEventListener('load', function () {
+                // Calculate duration
+                const duration = performance.now() - startTime;
+                span.setAttribute('duration_ms', Math.round(duration));
                 span.setAttribute('http.status_code', xhr.status);
                 // Log response body
                 if (config.logResponseBody && xhr.status >= 200 && xhr.status < 300) {
                     const responseData = xhr.responseText;
                     const truncatedData = truncateBody(responseData, config.maxBodyLogSize);
-                    span.setAttribute('http.response.body', truncatedData);
-                    console.log(`[SignOz] ${method} Response from ${url} (${xhr.status}) on page ${pagePath}:`, truncatedData);
+                    span.setAttribute('response.data', truncatedData);
+                    // Try to parse JSON and extract message if exists
+                    try {
+                        const jsonData = JSON.parse(responseData);
+                        if (jsonData.message) {
+                            span.setAttribute('response.message', jsonData.message);
+                        }
+                    }
+                    catch (e) {
+                        // Not JSON or no message field, ignore
+                    }
+                    if (config.enableConsoleLog) {
+                        console.log(`[SignOz] ${method} Response from ${url} (${xhr.status}) on page ${pagePath} [${Math.round(duration)}ms]:`, truncatedData);
+                    }
                 }
-                else if (xhr.status >= 300) {
-                    console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath} - Status: ${xhr.status}`);
+                else if (xhr.status >= 300 && config.enableConsoleLog) {
+                    console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath} - Status: ${xhr.status} [${Math.round(duration)}ms]`);
                 }
                 span.setStatus({ code: SpanStatusCode.OK });
                 span.end();
             });
             this.addEventListener('error', function () {
+                // Calculate duration even on error
+                const duration = performance.now() - startTime;
+                span.setAttribute('duration_ms', Math.round(duration));
                 span.recordException(new Error('XHR request failed'));
                 span.setStatus({ code: SpanStatusCode.ERROR, message: 'XHR request failed' });
-                console.error(`[SignOz] ${method} Error for ${url} on page ${pagePath}`);
+                if (config.enableConsoleLog) {
+                    console.error(`[SignOz] ${method} Error for ${url} on page ${pagePath} [${Math.round(duration)}ms]`);
+                }
                 span.end();
             });
             return originalSend.call(this, body);
@@ -15428,7 +15479,7 @@ function addXHRLogging(config) {
     };
 }
 // Fungsi untuk menambahkan error tracking
-function addErrorTracking() {
+function addErrorTracking(enableConsoleLog = false) {
     // Track unhandled errors
     window.addEventListener('error', (event) => {
         var _a;
@@ -15444,13 +15495,15 @@ function addErrorTracking() {
             span.setAttribute('error.stack', event.error.stack || '');
         }
         span.setStatus({ code: SpanStatusCode.ERROR, message: event.message });
-        console.error('[SignOz] Unhandled Error:', {
-            message: event.message,
-            filename: event.filename,
-            lineno: event.lineno,
-            colno: event.colno,
-            stack: (_a = event.error) === null || _a === void 0 ? void 0 : _a.stack
-        });
+        if (enableConsoleLog) {
+            console.error('[SignOz] Unhandled Error:', {
+                message: event.message,
+                filename: event.filename,
+                lineno: event.lineno,
+                colno: event.colno,
+                stack: (_a = event.error) === null || _a === void 0 ? void 0 : _a.stack
+            });
+        }
         span.end();
     });
     // Track unhandled promise rejections
@@ -15465,12 +15518,14 @@ function addErrorTracking() {
             span.setAttribute('error.stack', event.reason.stack || '');
         }
         span.setStatus({ code: SpanStatusCode.ERROR, message: String(event.reason) });
-        console.error('[SignOz] Unhandled Promise Rejection:', event.reason);
+        if (enableConsoleLog) {
+            console.error('[SignOz] Unhandled Promise Rejection:', event.reason);
+        }
         span.end();
     });
 }
 // Fungsi untuk menambahkan navigation tracking
-function addNavigationTracking() {
+function addNavigationTracking(enableConsoleLog = false) {
     let previousUrl = window.location.href;
     // Track initial page load
     const tracer = trace.getTracer('navigation-tracker');
@@ -15480,10 +15535,12 @@ function addNavigationTracking() {
     initialSpan.setAttribute('navigation.pathname', window.location.pathname);
     initialSpan.setAttribute('navigation.search', window.location.search);
     initialSpan.setAttribute('navigation.hash', window.location.hash);
-    console.log('[SignOz] Page Load:', {
-        url: window.location.href,
-        pathname: window.location.pathname
-    });
+    if (enableConsoleLog) {
+        console.log('[SignOz] Page Load:', {
+            url: window.location.href,
+            pathname: window.location.pathname
+        });
+    }
     initialSpan.end();
     // Track popstate (browser back/forward)
     window.addEventListener('popstate', () => {
@@ -15494,11 +15551,13 @@ function addNavigationTracking() {
         span.setAttribute('navigation.pathname', window.location.pathname);
         span.setAttribute('navigation.search', window.location.search);
         span.setAttribute('navigation.hash', window.location.hash);
-        console.log('[SignOz] Navigation (popstate):', {
-            from: previousUrl,
-            to: window.location.href,
-            pathname: window.location.pathname
-        });
+        if (enableConsoleLog) {
+            console.log('[SignOz] Navigation (popstate):', {
+                from: previousUrl,
+                to: window.location.href,
+                pathname: window.location.pathname
+            });
+        }
         previousUrl = window.location.href;
         span.end();
     });
@@ -15513,11 +15572,13 @@ function addNavigationTracking() {
         span.setAttribute('navigation.pathname', window.location.pathname);
         span.setAttribute('navigation.search', window.location.search);
         span.setAttribute('navigation.hash', window.location.hash);
-        console.log('[SignOz] Navigation (pushState):', {
-            from: previousUrl,
-            to: window.location.href,
-            pathname: window.location.pathname
-        });
+        if (enableConsoleLog) {
+            console.log('[SignOz] Navigation (pushState):', {
+                from: previousUrl,
+                to: window.location.href,
+                pathname: window.location.pathname
+            });
+        }
         previousUrl = window.location.href;
         span.end();
         return result;
@@ -15532,16 +15593,181 @@ function addNavigationTracking() {
         span.setAttribute('navigation.pathname', window.location.pathname);
         span.setAttribute('navigation.search', window.location.search);
         span.setAttribute('navigation.hash', window.location.hash);
-        console.log('[SignOz] Navigation (replaceState):', {
-            from: previousUrl,
-            to: window.location.href,
-            pathname: window.location.pathname
-        });
+        if (enableConsoleLog) {
+            console.log('[SignOz] Navigation (replaceState):', {
+                from: previousUrl,
+                to: window.location.href,
+                pathname: window.location.pathname
+            });
+        }
         previousUrl = window.location.href;
         span.end();
         return result;
     };
 }
+// Fungsi untuk menambahkan WebSocket logging
+function addWebSocketLogging(config) {
+    if (!config.enableWebSocketLogging)
+        return;
+    const OriginalWebSocket = window.WebSocket;
+    window.WebSocket = function (url, protocols) {
+        const ws = new OriginalWebSocket(url, protocols);
+        const wsUrl = typeof url === 'string' ? url : url.toString();
+        // Capture current page info
+        const pageUrl = window.location.href;
+        const pagePath = window.location.pathname;
+        const tracer = trace.getTracer('websocket-logger');
+        let connectionSpan = tracer.startSpan('WebSocket Connection');
+        const connectionStartTime = performance.now();
+        connectionSpan.setAttribute('websocket.url', wsUrl);
+        connectionSpan.setAttribute('websocket.protocols', Array.isArray(protocols) ? protocols.join(',') : (protocols || 'none'));
+        connectionSpan.setAttribute('page.url', pageUrl);
+        connectionSpan.setAttribute('page.pathname', pagePath);
+        // Track connection open
+        const originalOnOpen = ws.onopen;
+        ws.addEventListener('open', function (event) {
+            const duration = performance.now() - connectionStartTime;
+            connectionSpan.setAttribute('websocket.state', 'open');
+            connectionSpan.setAttribute('duration_ms', Math.round(duration));
+            connectionSpan.setStatus({ code: SpanStatusCode.OK });
+            if (config.enableConsoleLog) {
+                console.log(`[SignOz] WebSocket Connected to ${wsUrl} from page ${pagePath} [${Math.round(duration)}ms]`);
+            }
+            connectionSpan.end();
+            if (originalOnOpen) {
+                originalOnOpen.call(ws, event);
+            }
+        });
+        // Track messages sent
+        const originalSend = ws.send;
+        ws.send = function (data) {
+            if (config.logWebSocketMessages) {
+                const messageSpan = tracer.startSpan('WebSocket Send');
+                const sendStartTime = performance.now();
+                messageSpan.setAttribute('websocket.url', wsUrl);
+                messageSpan.setAttribute('websocket.direction', 'send');
+                messageSpan.setAttribute('page.url', pageUrl);
+                messageSpan.setAttribute('page.pathname', pagePath);
+                // Log message data
+                if (typeof data === 'string') {
+                    const truncatedData = truncateBody(data, config.maxBodyLogSize);
+                    messageSpan.setAttribute('websocket.message', truncatedData);
+                    // Try to parse JSON and extract message if exists
+                    try {
+                        const jsonData = JSON.parse(data);
+                        if (jsonData.message) {
+                            messageSpan.setAttribute('websocket.message.text', jsonData.message);
+                        }
+                        if (jsonData.type || jsonData.event) {
+                            messageSpan.setAttribute('websocket.message.type', jsonData.type || jsonData.event);
+                        }
+                    }
+                    catch (e) {
+                        // Not JSON, ignore
+                    }
+                    if (config.enableConsoleLog) {
+                        console.log(`[SignOz] WebSocket Send to ${wsUrl} from page ${pagePath}:`, truncatedData);
+                    }
+                }
+                else {
+                    messageSpan.setAttribute('websocket.message', '[Binary Data]');
+                    messageSpan.setAttribute('websocket.message.type', 'binary');
+                    if (config.enableConsoleLog) {
+                        console.log(`[SignOz] WebSocket Send to ${wsUrl} from page ${pagePath}: [Binary Data]`);
+                    }
+                }
+                const duration = performance.now() - sendStartTime;
+                messageSpan.setAttribute('duration_ms', Math.round(duration));
+                messageSpan.setStatus({ code: SpanStatusCode.OK });
+                messageSpan.end();
+            }
+            return originalSend.call(ws, data);
+        };
+        // Track messages received
+        const originalOnMessage = ws.onmessage;
+        ws.addEventListener('message', function (event) {
+            if (config.logWebSocketMessages) {
+                const messageSpan = tracer.startSpan('WebSocket Receive');
+                messageSpan.setAttribute('websocket.url', wsUrl);
+                messageSpan.setAttribute('websocket.direction', 'receive');
+                messageSpan.setAttribute('page.url', pageUrl);
+                messageSpan.setAttribute('page.pathname', pagePath);
+                // Log message data
+                if (typeof event.data === 'string') {
+                    const truncatedData = truncateBody(event.data, config.maxBodyLogSize);
+                    messageSpan.setAttribute('websocket.message', truncatedData);
+                    // Try to parse JSON and extract message if exists
+                    try {
+                        const jsonData = JSON.parse(event.data);
+                        if (jsonData.message) {
+                            messageSpan.setAttribute('websocket.message.text', jsonData.message);
+                        }
+                        if (jsonData.type || jsonData.event) {
+                            messageSpan.setAttribute('websocket.message.type', jsonData.type || jsonData.event);
+                        }
+                    }
+                    catch (e) {
+                        // Not JSON, ignore
+                    }
+                    if (config.enableConsoleLog) {
+                        console.log(`[SignOz] WebSocket Receive from ${wsUrl} on page ${pagePath}:`, truncatedData);
+                    }
+                }
+                else {
+                    messageSpan.setAttribute('websocket.message', '[Binary Data]');
+                    messageSpan.setAttribute('websocket.message.type', 'binary');
+                    if (config.enableConsoleLog) {
+                        console.log(`[SignOz] WebSocket Receive from ${wsUrl} on page ${pagePath}: [Binary Data]`);
+                    }
+                }
+                messageSpan.setStatus({ code: SpanStatusCode.OK });
+                messageSpan.end();
+            }
+            if (originalOnMessage) {
+                originalOnMessage.call(ws, event);
+            }
+        });
+        // Track connection errors
+        const originalOnError = ws.onerror;
+        ws.addEventListener('error', function (event) {
+            const errorSpan = tracer.startSpan('WebSocket Error');
+            errorSpan.setAttribute('websocket.url', wsUrl);
+            errorSpan.setAttribute('websocket.state', 'error');
+            errorSpan.setAttribute('page.url', pageUrl);
+            errorSpan.setAttribute('page.pathname', pagePath);
+            errorSpan.recordException(new Error('WebSocket connection error'));
+            errorSpan.setStatus({ code: SpanStatusCode.ERROR, message: 'WebSocket connection error' });
+            if (config.enableConsoleLog) {
+                console.error(`[SignOz] WebSocket Error for ${wsUrl} on page ${pagePath}`);
+            }
+            errorSpan.end();
+            if (originalOnError) {
+                originalOnError.call(ws, event);
+            }
+        });
+        // Track connection close
+        const originalOnClose = ws.onclose;
+        ws.addEventListener('close', function (event) {
+            const closeSpan = tracer.startSpan('WebSocket Close');
+            closeSpan.setAttribute('websocket.url', wsUrl);
+            closeSpan.setAttribute('websocket.state', 'closed');
+            closeSpan.setAttribute('websocket.close.code', event.code);
+            closeSpan.setAttribute('websocket.close.reason', event.reason || 'No reason provided');
+            closeSpan.setAttribute('websocket.close.wasClean', event.wasClean);
+            closeSpan.setAttribute('page.url', pageUrl);
+            closeSpan.setAttribute('page.pathname', pagePath);
+            if (config.enableConsoleLog) {
+                console.log(`[SignOz] WebSocket Closed ${wsUrl} on page ${pagePath} - Code: ${event.code}, Reason: ${event.reason || 'No reason'}, Clean: ${event.wasClean}`);
+            }
+            closeSpan.setStatus({ code: SpanStatusCode.OK });
+            closeSpan.end();
+            if (originalOnClose) {
+                originalOnClose.call(ws, event);
+            }
+        });
+        return ws;
+    };
+}
 /**
  * Inisialisasi SignOz tracing untuk aplikasi React
  * @param config - Konfigurasi SignOz (opsional, akan menggunakan environment variables jika tidak disediakan)
@@ -15570,9 +15796,12 @@ function initializeSignOzTracing(config) {
             logRequestBody: (config === null || config === void 0 ? void 0 : config.logRequestBody) !== undefined ? config.logRequestBody : (getConfigValue('REACT_APP_SIGNOZ_LOG_REQUEST_BODY') === 'true' || true),
             logResponseBody: (config === null || config === void 0 ? void 0 : config.logResponseBody) !== undefined ? config.logResponseBody : (getConfigValue('REACT_APP_SIGNOZ_LOG_RESPONSE_BODY') === 'true' || true),
             maxBodyLogSize: (config === null || config === void 0 ? void 0 : config.maxBodyLogSize) || parseInt(getConfigValue('REACT_APP_SIGNOZ_MAX_BODY_LOG_SIZE') || '10000') || 10000,
-            enableDocumentLoad: (config === null || config === void 0 ? void 0 : config.enableDocumentLoad) !== undefined ? config.enableDocumentLoad : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_DOCUMENT_LOAD') !== 'false'),
+            enableDocumentLoad: (config === null || config === void 0 ? void 0 : config.enableDocumentLoad) !== undefined ? config.enableDocumentLoad : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_DOCUMENT_LOAD') === 'true'),
             enableErrorTracking: (config === null || config === void 0 ? void 0 : config.enableErrorTracking) !== undefined ? config.enableErrorTracking : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_ERROR_TRACKING') !== 'false'),
-            enableNavigationTracking: (config === null || config === void 0 ? void 0 : config.enableNavigationTracking) !== undefined ? config.enableNavigationTracking : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_NAVIGATION_TRACKING') !== 'false')
+            enableNavigationTracking: (config === null || config === void 0 ? void 0 : config.enableNavigationTracking) !== undefined ? config.enableNavigationTracking : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_NAVIGATION_TRACKING') === 'true'),
+            enableConsoleLog: (config === null || config === void 0 ? void 0 : config.enableConsoleLog) !== undefined ? config.enableConsoleLog : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_CONSOLE_LOG') === 'true'),
+            enableWebSocketLogging: (config === null || config === void 0 ? void 0 : config.enableWebSocketLogging) !== undefined ? config.enableWebSocketLogging : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_WEBSOCKET_LOGGING') === 'true'),
+            logWebSocketMessages: (config === null || config === void 0 ? void 0 : config.logWebSocketMessages) !== undefined ? config.logWebSocketMessages : (getConfigValue('REACT_APP_SIGNOZ_LOG_WEBSOCKET_MESSAGES') === 'true')
         };
         // Validasi konfigurasi
         const { isValid, missingFields } = validateConfig(effectiveConfig);
@@ -15641,22 +15870,33 @@ function initializeSignOzTracing(config) {
                 enableRequestLogging: effectiveConfig.enableRequestLogging,
                 logRequestBody: effectiveConfig.logRequestBody,
                 logResponseBody: effectiveConfig.logResponseBody,
-                maxBodyLogSize: effectiveConfig.maxBodyLogSize
+                maxBodyLogSize: effectiveConfig.maxBodyLogSize,
+                enableConsoleLog: effectiveConfig.enableConsoleLog
             });
             addXHRLogging({
                 enableRequestLogging: effectiveConfig.enableRequestLogging,
                 logRequestBody: effectiveConfig.logRequestBody,
                 logResponseBody: effectiveConfig.logResponseBody,
-                maxBodyLogSize: effectiveConfig.maxBodyLogSize
+                maxBodyLogSize: effectiveConfig.maxBodyLogSize,
+                enableConsoleLog: effectiveConfig.enableConsoleLog
             });
         }
         // Tambahkan error tracking
         if (effectiveConfig.enableErrorTracking) {
-            addErrorTracking();
+            addErrorTracking(effectiveConfig.enableConsoleLog);
         }
         // Tambahkan navigation tracking
         if (effectiveConfig.enableNavigationTracking) {
-            addNavigationTracking();
+            addNavigationTracking(effectiveConfig.enableConsoleLog);
+        }
+        // Tambahkan WebSocket logging
+        if (effectiveConfig.enableWebSocketLogging) {
+            addWebSocketLogging({
+                enableWebSocketLogging: effectiveConfig.enableWebSocketLogging,
+                logWebSocketMessages: effectiveConfig.logWebSocketMessages,
+                maxBodyLogSize: effectiveConfig.maxBodyLogSize,
+                enableConsoleLog: effectiveConfig.enableConsoleLog
+            });
         }
         console.log('SignOz: Konfigurasi tracing:', {
             serviceName: effectiveConfig.serviceName,
@@ -15669,7 +15909,9 @@ function initializeSignOzTracing(config) {
             maxBodyLogSize: effectiveConfig.maxBodyLogSize,
             enableDocumentLoad: effectiveConfig.enableDocumentLoad,
             enableErrorTracking: effectiveConfig.enableErrorTracking,
-            enableNavigationTracking: effectiveConfig.enableNavigationTracking
+            enableNavigationTracking: effectiveConfig.enableNavigationTracking,
+            enableWebSocketLogging: effectiveConfig.enableWebSocketLogging,
+            logWebSocketMessages: effectiveConfig.logWebSocketMessages
         });
         console.log('SignOz: Tracing berhasil diinisialisasi');
     }