@echoteam/signoz-react 1.0.8 → 1.2.0

package/README.md

@@ -5,6 +5,26 @@ Library React untuk monitoring dan tracing aplikasi menggunakan OpenTelemetry da
 ## 🚀 Fitur
 
 - **Tracing Otomatis**: Integrasi OpenTelemetry untuk tracing HTTP requests, fetch, dan XMLHttpRequest
+- **Request/Response Logging**: Otomatis melog data request dan response untuk debugging dan monitoring
+  - Log GET request dengan response data
+  - Log POST/PUT/PATCH request dengan request body dan response data
+  - **Log halaman frontend (page URL)** yang melakukan request
+  - Konfigurasi maksimal ukuran body yang di-log
+  - Data tersimpan di span attributes SignOz
+- **Error Tracking**: Otomatis menangkap dan melog unhandled errors dan promise rejections
+  - Track JavaScript errors dengan stack trace
+  - Track unhandled promise rejections
+  - Error details tersimpan di SignOz untuk analisis
+- **Navigation Tracking**: Track route changes dan page navigation
+  - Track initial page load
+  - Track SPA navigation (pushState/replaceState)
+  - Track browser back/forward (popstate)
+  - Navigation history tersimpan di SignOz
+- **Document Load Performance**: Track page load performance metrics
+  - First Paint, First Contentful Paint
+  - DOM Content Loaded, Load Complete
+  - Resource timing
+- **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
 - **TypeScript Support**: Dukungan penuh untuk TypeScript
@@ -39,6 +59,17 @@ REACT_APP_SIGNOZ_SERVICE_NAMESPACE=frontend
 REACT_APP_SIGNOZ_URL=https://your-signoz-instance.com/v1/traces
 REACT_APP_SIGNOZ_TRACE_SAMPLE_RATE=1.0
 REACT_APP_SIGNOZ_ALLOWED_ORIGINS=https://api1.example.com,https://api2.example.com,/^https:\/\/.*\.your-domain\.com$/
+
+# Konfigurasi Request/Response Logging (opsional)
+REACT_APP_SIGNOZ_ENABLE_REQUEST_LOGGING=true
+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
 ```
 
 > **Catatan untuk REACT_APP_SIGNOZ_ALLOWED_ORIGINS:**
@@ -48,6 +79,13 @@ REACT_APP_SIGNOZ_ALLOWED_ORIGINS=https://api1.example.com,https://api2.example.c
 > - Jika tidak diisi, default ke '*' (mengizinkan semua origin)
 > - Spasi di sekitar koma akan dihapus otomatis
 
+> **Catatan untuk Request/Response Logging:**
+> - `REACT_APP_SIGNOZ_ENABLE_REQUEST_LOGGING`: Aktifkan/nonaktifkan logging request/response (default: true)
+> - `REACT_APP_SIGNOZ_LOG_REQUEST_BODY`: Log body untuk POST/PUT/PATCH request (default: true)
+> - `REACT_APP_SIGNOZ_LOG_RESPONSE_BODY`: Log response body untuk semua request (default: true)
+> - `REACT_APP_SIGNOZ_MAX_BODY_LOG_SIZE`: Maksimal ukuran body yang di-log dalam bytes (default: 10000)
+> - Data akan di-log ke console browser dan dikirim sebagai span attributes ke SignOz
+
 ### Inisialisasi
 
 ```typescript
@@ -86,12 +124,180 @@ initializeSignOzTracing({
     'https://api.example.com',
     /^https:\/\/.*\.your-domain\.com$/,
     '*'  // Mengizinkan semua origin (default)
-  ]
+  ],
+  // Konfigurasi logging request/response
+  enableRequestLogging: true, // Aktifkan logging (default: true)
+  logRequestBody: true, // Log request body untuk POST/PUT/PATCH (default: true)
+  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)
+  enableErrorTracking: true, // Track unhandled errors (default: true)
+  enableNavigationTracking: true // Track route changes (default: true)
 });
 ```
 
 ## 🎯 Penggunaan
 
+### Request/Response Logging
+
+Library ini secara otomatis melog semua HTTP request dan response yang dilakukan melalui `fetch` atau `XMLHttpRequest`. Data yang di-log meliputi:
+
+**Untuk GET Request:**
+- URL endpoint
+- HTTP method
+- Status code response
+- Response body (jika `logResponseBody: true`)
+- **URL halaman frontend** yang melakukan request (page.url, page.pathname)
+
+**Untuk POST/PUT/PATCH Request:**
+- URL endpoint
+- HTTP method
+- Request body (jika `logRequestBody: true`)
+- Status code response
+- Response body (jika `logResponseBody: true`)
+- **URL halaman frontend** yang melakukan request (page.url, page.pathname)
+
+**Contoh Output di Console:**
+```
+[SignOz] GET Response from https://api.example.com/users (200) on page /dashboard: {"users":[{"id":1,"name":"John"}]}
+[SignOz] POST Request to https://api.example.com/users from page /users/create: {"name":"Jane","email":"jane@example.com"}
+[SignOz] POST Response from https://api.example.com/users (201) on page /users/create: {"id":2,"name":"Jane","email":"jane@example.com"}
+```
+
+**Melihat Data di SignOz Dashboard:**
+1. Buka SignOz dashboard
+2. Navigasi ke **Traces**
+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
+   - `http.url`: URL endpoint
+   - `http.method`: HTTP method
+   - `http.status_code`: Status code response
+   - `page.url`: URL halaman frontend yang melakukan request
+   - `page.pathname`: Pathname halaman frontend
+   - `page.search`: Query parameters halaman frontend
+   - `page.hash`: Hash fragment halaman frontend
+
+**Menonaktifkan Logging:**
+```typescript
+// Nonaktifkan semua logging
+initializeSignOzTracing({
+  // ... konfigurasi lainnya
+  enableRequestLogging: false
+});
+
+// Atau hanya nonaktifkan logging body tertentu
+initializeSignOzTracing({
+  // ... konfigurasi lainnya
+  enableRequestLogging: true,
+  logRequestBody: false, // Tidak log request body
+  logResponseBody: true  // Tetap log response body
+});
+```
+
+### Error Tracking
+
+Library ini otomatis menangkap dan melog semua unhandled errors dan promise rejections.
+
+**Contoh Output di Console:**
+```
+[SignOz] Unhandled Error: {
+  message: "Cannot read property 'foo' of undefined",
+  filename: "app.js",
+  lineno: 42,
+  colno: 15,
+  stack: "TypeError: Cannot read property 'foo' of undefined\n    at App.js:42:15"
+}
+
+[SignOz] Unhandled Promise Rejection: Error: API call failed
+```
+
+**Data yang Di-track:**
+- Error message
+- Stack trace
+- Filename dan line number
+- Error type (unhandled error atau promise rejection)
+
+**Melihat di SignOz:**
+1. Navigasi ke **Traces**
+2. Filter by span name: "Unhandled Error" atau "Unhandled Promise Rejection"
+3. Lihat span attributes:
+   - `error.type`: Tipe error
+   - `error.message`: Pesan error
+   - `error.stack`: Stack trace
+   - `error.filename`: File yang error
+   - `error.lineno`: Line number
+
+**Menonaktifkan Error Tracking:**
+```typescript
+initializeSignOzTracing({
+  // ... konfigurasi lainnya
+  enableErrorTracking: false
+});
+```
+
+### Navigation Tracking
+
+Library ini otomatis track semua route changes dan page navigation.
+
+**Contoh Output di Console:**
+```
+[SignOz] Page Load: { url: "https://example.com/", pathname: "/" }
+[SignOz] Navigation (pushState): { from: "/", to: "/users", pathname: "/users" }
+[SignOz] Navigation (popstate): { from: "/users", to: "/", pathname: "/" }
+```
+
+**Data yang Di-track:**
+- Initial page load
+- SPA navigation (React Router, etc)
+- Browser back/forward navigation
+- URL, pathname, search params, hash
+
+**Melihat di SignOz:**
+1. Navigasi ke **Traces**
+2. Filter by span name: "Page Load" atau "Navigation"
+3. Lihat span attributes:
+   - `navigation.type`: Tipe navigasi (initial, pushState, replaceState, popstate)
+   - `navigation.from`: URL sebelumnya
+   - `navigation.to`: URL tujuan
+   - `navigation.pathname`: Pathname
+   - `navigation.search`: Query parameters
+   - `navigation.hash`: Hash fragment
+
+**Menonaktifkan Navigation Tracking:**
+```typescript
+initializeSignOzTracing({
+  // ... konfigurasi lainnya
+  enableNavigationTracking: false
+});
+```
+
+### Document Load Performance
+
+Library ini otomatis track page load performance metrics menggunakan Navigation Timing API.
+
+**Metrics yang Di-track:**
+- First Paint (FP)
+- First Contentful Paint (FCP)
+- DOM Content Loaded
+- Load Complete
+- Resource timing (CSS, JS, images, etc)
+
+**Melihat di SignOz:**
+1. Navigasi ke **Traces**
+2. Filter by span name: "documentLoad" atau "documentFetch"
+3. Lihat metrics untuk page load performance
+
+**Menonaktifkan Document Load Tracking:**
+```typescript
+initializeSignOzTracing({
+  // ... konfigurasi lainnya
+  enableDocumentLoad: false
+});
+```
+
 ### Error Boundary
 
 #### Penggunaan Dasar
@@ -242,6 +448,13 @@ Inisialisasi SignOz tracing untuk aplikasi React.
     - `scheduledDelayMillis`: Delay pengiriman batch dalam milidetik
     - `exportTimeoutMillis`: Timeout ekspor dalam milidetik
   - `allowedOrigins` (wajib): Array URL/RegExp yang diizinkan untuk CORS. Gunakan ['*'] untuk mengizinkan semua origin
+  - `enableRequestLogging` (opsional): Aktifkan logging request/response (default: true)
+  - `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)
+  - `enableErrorTracking` (opsional): Aktifkan automatic error tracking (default: true)
+  - `enableNavigationTracking` (opsional): Aktifkan navigation/route tracking (default: true)
 
 ### `ErrorBoundary`
 

package/dist/index.d.ts

@@ -13,6 +13,13 @@ interface SignOzConfig {
         exportTimeoutMillis?: number;
     };
     allowedOrigins?: (string | RegExp)[];
+    enableRequestLogging?: boolean;
+    logRequestBody?: boolean;
+    logResponseBody?: boolean;
+    maxBodyLogSize?: number;
+    enableDocumentLoad?: boolean;
+    enableErrorTracking?: boolean;
+    enableNavigationTracking?: boolean;
 }
 declare global {
     interface Window {

package/dist/index.esm.js

@@ -15293,6 +15293,255 @@ function parseAllowedOrigins(originsStr) {
         return origin;
     });
 }
+// Fungsi helper untuk truncate body jika terlalu besar
+function truncateBody(body, maxSize) {
+    try {
+        const bodyStr = typeof body === 'string' ? body : JSON.stringify(body);
+        if (bodyStr.length > maxSize) {
+            return bodyStr.substring(0, maxSize) + '... [truncated]';
+        }
+        return bodyStr;
+    }
+    catch (e) {
+        return '[Unable to serialize body]';
+    }
+}
+// Fungsi untuk menambahkan logging ke fetch instrumentation
+function addFetchLogging(config) {
+    if (!config.enableRequestLogging)
+        return;
+    const originalFetch = window.fetch;
+    window.fetch = async function (...args) {
+        const [resource, init] = args;
+        const url = typeof resource === 'string' ? resource : (resource instanceof Request ? resource.url : resource.toString());
+        const method = (init === null || init === void 0 ? void 0 : init.method) || 'GET';
+        // Capture current page info
+        const pageUrl = window.location.href;
+        const pagePath = window.location.pathname;
+        const tracer = trace.getTracer('fetch-logger');
+        const span = tracer.startSpan(`HTTP ${method} ${url}`);
+        try {
+            // Log request data
+            span.setAttribute('http.url', url);
+            span.setAttribute('http.method', method);
+            // Log page info (frontend URL)
+            span.setAttribute('page.url', pageUrl);
+            span.setAttribute('page.pathname', pagePath);
+            span.setAttribute('page.search', window.location.search);
+            span.setAttribute('page.hash', window.location.hash);
+            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);
+            }
+            const response = await originalFetch.apply(this, args);
+            // Log response data
+            span.setAttribute('http.status_code', response.status);
+            if (config.logResponseBody && response.ok) {
+                const clonedResponse = response.clone();
+                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);
+                }
+                catch (e) {
+                    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}`);
+            }
+            span.setStatus({ code: SpanStatusCode.OK });
+            return response;
+        }
+        catch (error) {
+            span.recordException(error);
+            span.setStatus({ code: SpanStatusCode.ERROR, message: error.message });
+            console.error(`[SignOz] ${method} Error for ${url} on page ${pagePath}:`, error);
+            throw error;
+        }
+        finally {
+            span.end();
+        }
+    };
+}
+// Fungsi untuk menambahkan logging ke XMLHttpRequest instrumentation
+function addXHRLogging(config) {
+    if (!config.enableRequestLogging)
+        return;
+    const OriginalXHR = window.XMLHttpRequest;
+    window.XMLHttpRequest = function () {
+        const xhr = new OriginalXHR();
+        let method = '';
+        let url = '';
+        // Capture current page info when XHR is created
+        const pageUrl = window.location.href;
+        const pagePath = window.location.pathname;
+        const originalOpen = xhr.open;
+        xhr.open = function (...args) {
+            method = args[0];
+            url = args[1];
+            return originalOpen.apply(this, args);
+        };
+        const originalSend = xhr.send;
+        xhr.send = function (body) {
+            const tracer = trace.getTracer('xhr-logger');
+            const span = tracer.startSpan(`HTTP ${method} ${url}`);
+            span.setAttribute('http.url', url);
+            span.setAttribute('http.method', method);
+            // Log page info (frontend URL)
+            span.setAttribute('page.url', pageUrl);
+            span.setAttribute('page.pathname', pagePath);
+            span.setAttribute('page.search', window.location.search);
+            span.setAttribute('page.hash', window.location.hash);
+            // Log request body
+            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);
+            }
+            this.addEventListener('load', function () {
+                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);
+                }
+                else if (xhr.status >= 300) {
+                    console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath} - Status: ${xhr.status}`);
+                }
+                span.setStatus({ code: SpanStatusCode.OK });
+                span.end();
+            });
+            this.addEventListener('error', function () {
+                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}`);
+                span.end();
+            });
+            return originalSend.call(this, body);
+        };
+        return xhr;
+    };
+}
+// Fungsi untuk menambahkan error tracking
+function addErrorTracking() {
+    // Track unhandled errors
+    window.addEventListener('error', (event) => {
+        var _a;
+        const tracer = trace.getTracer('error-tracker');
+        const span = tracer.startSpan('Unhandled Error');
+        span.setAttribute('error.type', 'unhandled');
+        span.setAttribute('error.message', event.message);
+        span.setAttribute('error.filename', event.filename || 'unknown');
+        span.setAttribute('error.lineno', event.lineno || 0);
+        span.setAttribute('error.colno', event.colno || 0);
+        if (event.error) {
+            span.recordException(event.error);
+            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
+        });
+        span.end();
+    });
+    // Track unhandled promise rejections
+    window.addEventListener('unhandledrejection', (event) => {
+        const tracer = trace.getTracer('error-tracker');
+        const span = tracer.startSpan('Unhandled Promise Rejection');
+        span.setAttribute('error.type', 'unhandled_rejection');
+        span.setAttribute('error.reason', String(event.reason));
+        if (event.reason instanceof Error) {
+            span.recordException(event.reason);
+            span.setAttribute('error.message', event.reason.message);
+            span.setAttribute('error.stack', event.reason.stack || '');
+        }
+        span.setStatus({ code: SpanStatusCode.ERROR, message: String(event.reason) });
+        console.error('[SignOz] Unhandled Promise Rejection:', event.reason);
+        span.end();
+    });
+}
+// Fungsi untuk menambahkan navigation tracking
+function addNavigationTracking() {
+    let previousUrl = window.location.href;
+    // Track initial page load
+    const tracer = trace.getTracer('navigation-tracker');
+    const initialSpan = tracer.startSpan('Page Load');
+    initialSpan.setAttribute('navigation.type', 'initial');
+    initialSpan.setAttribute('navigation.url', window.location.href);
+    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
+    });
+    initialSpan.end();
+    // Track popstate (browser back/forward)
+    window.addEventListener('popstate', () => {
+        const span = tracer.startSpan('Navigation');
+        span.setAttribute('navigation.type', 'popstate');
+        span.setAttribute('navigation.from', previousUrl);
+        span.setAttribute('navigation.to', window.location.href);
+        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
+        });
+        previousUrl = window.location.href;
+        span.end();
+    });
+    // Track pushState and replaceState (SPA navigation)
+    const originalPushState = history.pushState;
+    history.pushState = function (...args) {
+        const span = tracer.startSpan('Navigation');
+        span.setAttribute('navigation.type', 'pushState');
+        span.setAttribute('navigation.from', previousUrl);
+        const result = originalPushState.apply(this, args);
+        span.setAttribute('navigation.to', window.location.href);
+        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
+        });
+        previousUrl = window.location.href;
+        span.end();
+        return result;
+    };
+    const originalReplaceState = history.replaceState;
+    history.replaceState = function (...args) {
+        const span = tracer.startSpan('Navigation');
+        span.setAttribute('navigation.type', 'replaceState');
+        span.setAttribute('navigation.from', previousUrl);
+        const result = originalReplaceState.apply(this, args);
+        span.setAttribute('navigation.to', window.location.href);
+        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
+        });
+        previousUrl = window.location.href;
+        span.end();
+        return result;
+    };
+}
 /**
  * Inisialisasi SignOz tracing untuk aplikasi React
  * @param config - Konfigurasi SignOz (opsional, akan menggunakan environment variables jika tidak disediakan)
@@ -15316,7 +15565,14 @@ function initializeSignOzTracing(config) {
                 scheduledDelayMillis: 5000,
                 exportTimeoutMillis: 30000
             },
-            allowedOrigins: (config === null || config === void 0 ? void 0 : config.allowedOrigins) || parseAllowedOrigins(getConfigValue('REACT_APP_SIGNOZ_ALLOWED_ORIGINS'))
+            allowedOrigins: (config === null || config === void 0 ? void 0 : config.allowedOrigins) || parseAllowedOrigins(getConfigValue('REACT_APP_SIGNOZ_ALLOWED_ORIGINS')),
+            enableRequestLogging: (config === null || config === void 0 ? void 0 : config.enableRequestLogging) !== undefined ? config.enableRequestLogging : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_REQUEST_LOGGING') === 'true' || true),
+            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'),
+            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')
         };
         // Validasi konfigurasi
         const { isValid, missingFields } = validateConfig(effectiveConfig);
@@ -15366,14 +15622,52 @@ function initializeSignOzTracing(config) {
                     '@opentelemetry/instrumentation-fetch': {
                         propagateTraceHeaderCorsUrls: effectiveConfig.allowedOrigins,
                     },
+                    // Nonaktifkan user interaction instrumentation (click events)
+                    '@opentelemetry/instrumentation-user-interaction': {
+                        enabled: false,
+                    },
+                    // Document load instrumentation untuk page load performance
+                    '@opentelemetry/instrumentation-document-load': {
+                        enabled: effectiveConfig.enableDocumentLoad,
+                    },
                 }),
             ],
         });
+        // Tambahkan custom logging untuk request/response
+        if (effectiveConfig.enableRequestLogging) {
+            addFetchLogging({
+                enableRequestLogging: effectiveConfig.enableRequestLogging,
+                logRequestBody: effectiveConfig.logRequestBody,
+                logResponseBody: effectiveConfig.logResponseBody,
+                maxBodyLogSize: effectiveConfig.maxBodyLogSize
+            });
+            addXHRLogging({
+                enableRequestLogging: effectiveConfig.enableRequestLogging,
+                logRequestBody: effectiveConfig.logRequestBody,
+                logResponseBody: effectiveConfig.logResponseBody,
+                maxBodyLogSize: effectiveConfig.maxBodyLogSize
+            });
+        }
+        // Tambahkan error tracking
+        if (effectiveConfig.enableErrorTracking) {
+            addErrorTracking();
+        }
+        // Tambahkan navigation tracking
+        if (effectiveConfig.enableNavigationTracking) {
+            addNavigationTracking();
+        }
         console.log('SignOz: Konfigurasi tracing:', {
             serviceName: effectiveConfig.serviceName,
             environment: effectiveConfig.environment,
             allowedOrigins: effectiveConfig.allowedOrigins,
-            traceSampleRate: effectiveConfig.traceSampleRate
+            traceSampleRate: effectiveConfig.traceSampleRate,
+            enableRequestLogging: effectiveConfig.enableRequestLogging,
+            logRequestBody: effectiveConfig.logRequestBody,
+            logResponseBody: effectiveConfig.logResponseBody,
+            maxBodyLogSize: effectiveConfig.maxBodyLogSize,
+            enableDocumentLoad: effectiveConfig.enableDocumentLoad,
+            enableErrorTracking: effectiveConfig.enableErrorTracking,
+            enableNavigationTracking: effectiveConfig.enableNavigationTracking
         });
         console.log('SignOz: Tracing berhasil diinisialisasi');
     }