@echoteam/signoz-react 1.0.8 → 1.2.0

package/dist/index.js

@@ -15313,6 +15313,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)
@@ -15336,7 +15585,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);
@@ -15386,14 +15642,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');
     }