@echoteam/signoz-react 1.2.1 → 1.2.2

package/README.md

@@ -66,10 +66,13 @@ 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
+
+# Console Logging (opsional, default: false)
+REACT_APP_SIGNOZ_ENABLE_CONSOLE_LOG=false
 ```
 
 > **Catatan untuk REACT_APP_SIGNOZ_ALLOWED_ORIGINS:**
@@ -131,9 +134,11 @@ 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)
+  // Console logging (default: false, hanya kirim ke SignOz tanpa console.log)
+  enableConsoleLog: false // Set true untuk enable console.log di browser
 });
 ```
 
@@ -171,7 +176,7 @@ 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
    - `http.url`: URL endpoint
    - `http.method`: HTTP method
    - `http.status_code`: Status code response
@@ -452,9 +457,10 @@ 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)
 
 ### `ErrorBoundary`
 

package/dist/index.d.ts

@@ -20,6 +20,7 @@ interface SignOzConfig {
     enableDocumentLoad?: boolean;
     enableErrorTracking?: boolean;
     enableNavigationTracking?: boolean;
+    enableConsoleLog?: 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,32 @@ 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);
+                    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 +15391,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 +15403,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 +15418,39 @@ 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);
+                    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 +15459,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 +15475,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 +15498,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 +15515,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 +15531,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 +15552,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,11 +15573,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 (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;
@@ -15570,9 +15613,10 @@ 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')
         };
         // Validasi konfigurasi
         const { isValid, missingFields } = validateConfig(effectiveConfig);
@@ -15641,22 +15685,24 @@ 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);
         }
         console.log('SignOz: Konfigurasi tracing:', {
             serviceName: effectiveConfig.serviceName,