@coralogix/browser 2.8.3 → 2.8.4

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 2.8.4 (2025-05-29)
+
+### 🩹 Fixes & Improvements
+
+🛠 Custom Spans
+
+- Traceparent propagation: XHR and Fetch requests now correctly include the global span traceId when using custom spans.
+- Improved span creation: Enhanced the logic for generating custom child spans for more accurate trace hierarchy.
+- Interaction tracing: User interaction instrumentation is now correctly linked to the global span context.
+
+🧹 Logging
+
+- Switched internal warning logs to debug level to reduce noise in production environments.
+
 ## 2.8.3 (2025-05-22)
 
 ### 🔥 Performance

package/README.md

@@ -779,9 +779,16 @@ Labels can be added during span creation for additional context.
 const customTracer = CoralogixRum.getCustomTracer();
 const globalSpan = customTracer.startGlobalSpan('global-span', { page: 'posts' });
 
-globalSpan.withContext(() => {
-  const customSpan = globalSpan.startCustomSpan('custom-span', { action: 'scroll' });
-  customSpan.endSpan();
+// Easily create custom spans for specific operations in your application.
+globalSpan.startCustomSpan('submit-button', { action: 'click' }).endSpan();
+
+// You can also use the with context method to modeling a specific flow in your application.
+globalSpan.withContext(async () => {
+  globalSpan.startCustomSpan('get-data-btn', { action: 'click' }).endSpan();
+  const res = await fetch('my-api-endpoint');
+  globalSpan.startCustomSpan('click-on-first-row', { action: 'click' }).endSpan();
+
+  // ... your code
 });
 
 // note: End the global span only after the operation is complete.

package/index.esm2.js

@@ -48,6 +48,46 @@ function generateUUID(placeholder) {
         : "".concat(1e7, "-").concat(1e3, "-").concat(4e3, "-").concat(8e3, "-").concat(1e11).replace(/[018]/g, generateUUID);
 }
 
+var CoralogixEventType;
+(function (CoralogixEventType) {
+    CoralogixEventType["ERROR"] = "error";
+    CoralogixEventType["NETWORK_REQUEST"] = "network-request";
+    CoralogixEventType["LOG"] = "log";
+    CoralogixEventType["USER_INTERACTION"] = "user-interaction";
+    CoralogixEventType["WEB_VITALS"] = "web-vitals";
+    CoralogixEventType["LONG_TASK"] = "longtask";
+    CoralogixEventType["RESOURCES"] = "resources";
+    CoralogixEventType["INTERNAL"] = "internal";
+    CoralogixEventType["DOM"] = "dom";
+    CoralogixEventType["CUSTOM_MEASUREMENT"] = "custom-measurement";
+    CoralogixEventType["MEMORY_USAGE"] = "memory-usage";
+    CoralogixEventType["SCREENSHOT"] = "screenshot";
+    CoralogixEventType["CUSTOM_SPAN"] = "custom-span";
+    CoralogixEventType["WORKER"] = "web-worker";
+})(CoralogixEventType || (CoralogixEventType = {}));
+var PerformanceTypes;
+(function (PerformanceTypes) {
+    PerformanceTypes["Resource"] = "resource";
+    PerformanceTypes["LongTask"] = "longtask";
+    PerformanceTypes["Navigation"] = "navigation";
+    PerformanceTypes["SoftNavigation"] = "soft-navigation";
+})(PerformanceTypes || (PerformanceTypes = {}));
+var OtelNetworkAttrs;
+(function (OtelNetworkAttrs) {
+    OtelNetworkAttrs["METHOD"] = "http.method";
+    OtelNetworkAttrs["URL"] = "http.url";
+    OtelNetworkAttrs["STATUS_CODE"] = "http.status_code";
+    OtelNetworkAttrs["HOST"] = "http.host";
+    OtelNetworkAttrs["SCHEME"] = "http.scheme";
+    OtelNetworkAttrs["STATUS_TEXT"] = "http.status_text";
+    OtelNetworkAttrs["RESPONSE_CONTENT_LENGTH"] = "http.response_content_length";
+})(OtelNetworkAttrs || (OtelNetworkAttrs = {}));
+var UrlType;
+(function (UrlType) {
+    UrlType["PAGE"] = "page";
+    UrlType["NETWORK_REQUEST"] = "network_request";
+})(UrlType || (UrlType = {}));
+
 function isFunction(funktion) {
   return typeof funktion === 'function';
 }
@@ -151,45 +191,6 @@ shimmer.unwrap = unwrap;
 shimmer.massUnwrap = massUnwrap;
 var shimmer_1 = shimmer;
 
-var CoralogixEventType;
-(function (CoralogixEventType) {
-    CoralogixEventType["ERROR"] = "error";
-    CoralogixEventType["NETWORK_REQUEST"] = "network-request";
-    CoralogixEventType["LOG"] = "log";
-    CoralogixEventType["USER_INTERACTION"] = "user-interaction";
-    CoralogixEventType["WEB_VITALS"] = "web-vitals";
-    CoralogixEventType["LONG_TASK"] = "longtask";
-    CoralogixEventType["RESOURCES"] = "resources";
-    CoralogixEventType["INTERNAL"] = "internal";
-    CoralogixEventType["DOM"] = "dom";
-    CoralogixEventType["CUSTOM_MEASUREMENT"] = "custom-measurement";
-    CoralogixEventType["MEMORY_USAGE"] = "memory-usage";
-    CoralogixEventType["SCREENSHOT"] = "screenshot";
-    CoralogixEventType["CUSTOM_SPAN"] = "custom-span";
-})(CoralogixEventType || (CoralogixEventType = {}));
-var PerformanceTypes;
-(function (PerformanceTypes) {
-    PerformanceTypes["Resource"] = "resource";
-    PerformanceTypes["LongTask"] = "longtask";
-    PerformanceTypes["Navigation"] = "navigation";
-    PerformanceTypes["SoftNavigation"] = "soft-navigation";
-})(PerformanceTypes || (PerformanceTypes = {}));
-var OtelNetworkAttrs;
-(function (OtelNetworkAttrs) {
-    OtelNetworkAttrs["METHOD"] = "http.method";
-    OtelNetworkAttrs["URL"] = "http.url";
-    OtelNetworkAttrs["STATUS_CODE"] = "http.status_code";
-    OtelNetworkAttrs["HOST"] = "http.host";
-    OtelNetworkAttrs["SCHEME"] = "http.scheme";
-    OtelNetworkAttrs["STATUS_TEXT"] = "http.status_text";
-    OtelNetworkAttrs["RESPONSE_CONTENT_LENGTH"] = "http.response_content_length";
-})(OtelNetworkAttrs || (OtelNetworkAttrs = {}));
-var UrlType;
-(function (UrlType) {
-    UrlType["PAGE"] = "page";
-    UrlType["NETWORK_REQUEST"] = "network_request";
-})(UrlType || (UrlType = {}));
-
 var CoralogixLogSeverity;
 (function (CoralogixLogSeverity) {
     CoralogixLogSeverity[CoralogixLogSeverity["Debug"] = 1] = "Debug";
@@ -298,7 +299,7 @@ function clearGlobalSpan() {
 function setCustomTracer(customTracer) {
     CxGlobal[CUSTOM_TRACER_KEY] = customTracer;
 }
-function getCustomTracer() {
+function getActiveCustomTracer() {
     return CxGlobal[CUSTOM_TRACER_KEY];
 }
 function setCustomTracerIgnoredInstruments(ignoredInstruments) {
@@ -313,13 +314,8 @@ function shouldAttachSpanToGlobalSpan(instrumentationType) {
         !((_a = getCustomTracerIgnoredInstruments()) === null || _a === void 0 ? void 0 : _a.includes(instrumentationType)));
 }
 function attachChildSpanToGlobalSpan(name) {
-    var span;
     var globalSpan = getGlobalSpan();
-    globalSpan.withContext(function () {
-        var childSpan = globalSpan.startCustomSpan(name);
-        span = childSpan.span;
-    });
-    return span;
+    return globalSpan.startCustomSpan(name).span;
 }
 
 var IS_OTEL_READY = 'otelReady';
@@ -2084,10 +2080,10 @@ var CoralogixUserInteractionInstrumentation = /** @class */ (function (_super) {
         this.handler = function (e) {
             var span;
             if (shouldAttachSpanToGlobalSpan(CoralogixEventType.USER_INTERACTION)) {
-                span = attachChildSpanToGlobalSpan(USER_INTERACTION_INSTRUMENTATION_NAME);
+                span = attachChildSpanToGlobalSpan(CoralogixEventType.USER_INTERACTION);
             }
             else {
-                span = _this.tracer.startSpan(USER_INTERACTION_INSTRUMENTATION_NAME);
+                span = _this.tracer.startSpan(CoralogixEventType.USER_INTERACTION);
             }
             var eventTarget = e.target;
             var config = getSdkConfig();
@@ -2606,32 +2602,32 @@ var INSTRUMENTATIONS = [
     },
     {
         Instrument: CoralogixInternalInstrumentation,
-        confKey: INTERNAL_INSTRUMENTATION_NAME,
+        confKey: CoralogixEventType.INTERNAL,
         disable: false,
     },
     {
         Instrument: CoralogixDOMInstrumentation,
-        confKey: DOM_INSTRUMENTATION_NAME,
+        confKey: CoralogixEventType.DOM,
         disable: false,
     },
     {
         Instrument: CoralogixCustomMeasurementInstrumentation,
-        confKey: CUSTOM_MEASUREMENT_INSTRUMENTATION_NAME,
+        confKey: CoralogixEventType.CUSTOM_MEASUREMENT,
         disable: false,
     },
     {
         Instrument: CoralogixMemoryUsageInstrumentation,
-        confKey: MEMORY_USAGE_INSTRUMENTATION_NAME,
+        confKey: CoralogixEventType.MEMORY_USAGE,
         disable: false,
     },
     {
         Instrument: CoralogixScreenshotInstrumentation,
-        confKey: SCREENSHOT_INSTRUMENTATION_NAME,
+        confKey: CoralogixEventType.SCREENSHOT,
         disable: false,
     },
     {
         Instrument: CoralogixWorkerInstrumentation,
-        confKey: WORKER_INSTRUMENTATION,
+        confKey: CoralogixEventType.WORKER,
         disable: false,
     },
 ];
@@ -4121,17 +4117,28 @@ var CxPropagator = /** @class */ (function () {
     };
     CxPropagator.prototype.inject = function (context, carrier, setter) {
         var _a, _b;
+        function checkSpanContextChanges() {
+            if (shouldAttachSpanToGlobalSpan(CoralogixEventType.NETWORK_REQUEST)) {
+                var globalSpan = getGlobalSpan();
+                var currentSpanContext = trace.getSpanContext(context);
+                var globalTraceId = globalSpan.span.spanContext().traceId;
+                if (currentSpanContext) {
+                    currentSpanContext.traceId = globalTraceId;
+                    context = trace.setSpanContext(context, currentSpanContext);
+                }
+            }
+        }
         var allowedUrls = (_b = (_a = this.config.traceParentInHeader) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.allowedTracingUrls;
+        var shouldInjectContext = true;
         if (allowedUrls) {
             var span = trace.getSpan(context);
             var url = span.attributes[OtelNetworkAttrs.URL];
-            var isUrlAllowed = isPatternMatch(url, allowedUrls, 'allowedTracingUrls');
-            if (isUrlAllowed) {
-                this.internalPropagator.inject(context, carrier, setter);
-            }
-            return;
+            shouldInjectContext = isPatternMatch(url, allowedUrls, 'allowedTracingUrls');
+        }
+        if (shouldInjectContext) {
+            checkSpanContextChanges();
+            this.internalPropagator.inject(context, carrier, setter);
         }
-        this.internalPropagator.inject(context, carrier, setter);
     };
     return CxPropagator;
 }());
@@ -4210,7 +4217,7 @@ function resolveUrlBlueprinters(urlBlueprinters) {
     return resolvedUrlBlueprinters;
 }
 
-var SDK_VERSION = '2.8.3';
+var SDK_VERSION = '2.8.4';
 
 function shouldDropEvent(cxRumEvent, options) {
     if (isDocumentErrorWithoutMessage(cxRumEvent)) {
@@ -4729,8 +4736,8 @@ var CoralogixRum = {
         var _this = this;
         try {
             // Check if CoralogixRum already inited.
-            if (isInited) {
-                console.warn('CoralogixRum already inited.');
+            if (isInited && (options === null || options === void 0 ? void 0 : options.debug)) {
+                console.debug('CoralogixRum already initialized, skipping init');
                 return;
             }
             // Abort if not in browser environment.
@@ -4769,7 +4776,7 @@ var CoralogixRum = {
                 if (pluginConf) {
                     var instrumentation = void 0;
                     switch (confKey) {
-                        case WORKER_INSTRUMENTATION: {
+                        case CoralogixEventType.WORKER: {
                             if (resolvedOptions_1.workerSupport) {
                                 instrumentation = new Instrument(pluginConf, errorsInstrumentation, _this);
                             }
@@ -4792,12 +4799,12 @@ var CoralogixRum = {
                             instrumentation = new Instrument(__assign(__assign({}, pluginConf), { ignoreUrls: ignoreUrls_1, traceParentInHeader: traceParentInHeader_1 }));
                             break;
                         }
-                        case INTERNAL_INSTRUMENTATION_NAME: {
+                        case CoralogixEventType.INTERNAL: {
                             instrumentation = new Instrument(pluginConf);
                             saveInternalRumData(INTERNAL_INSTRUMENTATION_NAME, instrumentation);
                             break;
                         }
-                        case SCREENSHOT_INSTRUMENTATION_NAME: {
+                        case CoralogixEventType.SCREENSHOT: {
                             if ((_c = resolvedOptions_1.sessionRecordingConfig) === null || _c === void 0 ? void 0 : _c.enable) {
                                 instrumentation = new Instrument(pluginConf);
                                 screenshotInstrumentation =
@@ -4805,7 +4812,7 @@ var CoralogixRum = {
                             }
                             break;
                         }
-                        case MEMORY_USAGE_INSTRUMENTATION_NAME: {
+                        case CoralogixEventType.MEMORY_USAGE: {
                             if (resolvedOptions_1.memoryUsageConfig.enabled &&
                                 isMeasureUserAgentSpecificMemoryAllowed()) {
                                 instrumentation = new Instrument(pluginConf);
@@ -4872,7 +4879,7 @@ var CoralogixRum = {
             saveInternalRumData(NETWORK_URL_LABEL_PROVIDERS_KEY, networkUrlLabelProviders);
             isInited = true;
             if (options === null || options === void 0 ? void 0 : options.debug) {
-                console.info('Coralogix Browser SDK - initialization has completed');
+                console.debug('Coralogix Browser SDK - initialization has completed');
             }
             reportInternalEvent('init');
         }
@@ -4890,7 +4897,7 @@ var CoralogixRum = {
             console.debug('Coralogix Browser SDK - TraceParentInHeader is not enabled');
             return;
         }
-        if (getCustomTracer()) {
+        if (getActiveCustomTracer()) {
             console.warn('Coralogix Browser SDK - Custom tracer already exists');
             return;
         }
@@ -4899,7 +4906,7 @@ var CoralogixRum = {
         return {
             startGlobalSpan: function (name, labels) {
                 if (getGlobalSpan()) {
-                    console.warn('Coralogix Browser SDK  - Global span already exists');
+                    console.warn('Coralogix Browser SDK - Global span already exists');
                     return;
                 }
                 setCustomTracerIgnoredInstruments((ignoredList === null || ignoredList === void 0 ? void 0 : ignoredList.ignoredInstruments) || []);
@@ -4920,13 +4927,16 @@ var CoralogixRum = {
                         clearGlobalSpan();
                     },
                     startCustomSpan: function (name, labels) {
-                        var customSpan = tracer.startSpan(name);
-                        customSpan[CoralogixAttributes.EVENT_TYPE] =
-                            CoralogixEventType.CUSTOM_SPAN;
-                        if (labels) {
-                            setCustomLabelsForSpan(customSpan, labels);
-                        }
-                        markSpanAsOtelToSend(customSpan);
+                        var customSpan;
+                        context.with(trace.setSpan(context.active(), globalSpan), function () {
+                            customSpan = tracer.startSpan(name);
+                            customSpan[CoralogixAttributes.EVENT_TYPE] =
+                                CoralogixEventType.CUSTOM_SPAN;
+                            if (labels) {
+                                setCustomLabelsForSpan(customSpan, labels);
+                            }
+                            markSpanAsOtelToSend(customSpan);
+                        });
                         return {
                             span: customSpan,
                             endSpan: function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralogix/browser",
-  "version": "2.8.3",
+  "version": "2.8.4",
   "description": "Official Coralogix SDK for browsers",
   "license": "Apache-2.0",
   "author": "Coralogix",

package/src/custom-spans/custom-spans.utils.d.ts

@@ -5,7 +5,7 @@ export declare function setGlobalSpan(globalSpan: GlobalSpan): void;
 export declare function getGlobalSpan(): GlobalSpan;
 export declare function clearGlobalSpan(): void;
 export declare function setCustomTracer(customTracer: Tracer): void;
-export declare function getCustomTracer(): Tracer;
+export declare function getActiveCustomTracer(): Tracer;
 export declare function clearCustomTracer(): void;
 export declare function setCustomTracerIgnoredInstruments(ignoredInstruments: CustomTracerIgnoredInstruments[]): void;
 export declare function getCustomTracerIgnoredInstruments(): CustomTracerIgnoredInstruments[];

package/src/instrumentations/instrumentation.model.d.ts

@@ -1,8 +1,5 @@
 import { InstrumentationConfig } from '@opentelemetry/instrumentation';
-import { CUSTOM_MEASUREMENT_INSTRUMENTATION_NAME, DOM_INSTRUMENTATION_NAME, INTERNAL_INSTRUMENTATION_NAME, WORKER_INSTRUMENTATION } from './instrumentation.consts';
-import { MEMORY_USAGE_INSTRUMENTATION_NAME } from './memory-usage';
-import { SCREENSHOT_INSTRUMENTATION_NAME } from './screenshot/screenshot.utils';
-import { CoralogixOtelWebOptionsInstrumentations } from '../types';
+import { CoralogixEventType, CoralogixOtelWebOptionsInstrumentations } from '../types';
 export interface CoralogixWebVitalsMetrics {
     lcp: boolean;
     fid: boolean;
@@ -34,6 +31,6 @@ export declare enum ResourceInitiatorTypes {
 }
 export type InternalInstrumentationConfig = {
     Instrument: any;
-    confKey: keyof CoralogixOtelWebOptionsInstrumentations | typeof CUSTOM_MEASUREMENT_INSTRUMENTATION_NAME | typeof INTERNAL_INSTRUMENTATION_NAME | typeof DOM_INSTRUMENTATION_NAME | typeof MEMORY_USAGE_INSTRUMENTATION_NAME | typeof SCREENSHOT_INSTRUMENTATION_NAME | typeof WORKER_INSTRUMENTATION;
+    confKey: keyof CoralogixOtelWebOptionsInstrumentations | CoralogixEventType;
     disable: boolean;
 };

package/src/types.d.ts

@@ -45,7 +45,8 @@ export declare enum CoralogixEventType {
     CUSTOM_MEASUREMENT = "custom-measurement",
     MEMORY_USAGE = "memory-usage",
     SCREENSHOT = "screenshot",
-    CUSTOM_SPAN = "custom-span"
+    CUSTOM_SPAN = "custom-span",
+    WORKER = "web-worker"
 }
 export declare enum PerformanceTypes {
     Resource = "resource",

package/src/version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.8.3";
+export declare const SDK_VERSION = "2.8.4";