# Custom instrumentation Copy as Markdown[Open in ChatGPT](https://chatgpt.com/?q=Read%20https%3A%2F%2Fcoralogix.com%2Fdocs%2Fuser-guides%2Frum%2Fsdk-installation%2Fjavascript%2Fbrowser-sdk%2Ffeatures%2Fcustom-instrumentation.md%20and%20help%20me%20with%20my%20question%20about%20this%20Coralogix%20documentation%20page.)[Open in Claude](https://claude.ai/new?q=Read%20https%3A%2F%2Fcoralogix.com%2Fdocs%2Fuser-guides%2Frum%2Fsdk-installation%2Fjavascript%2Fbrowser-sdk%2Ffeatures%2Fcustom-instrumentation.md%20and%20help%20me%20with%20my%20question%20about%20this%20Coralogix%20documentation%20page.) ### Custom Measurement[​](#custom-measurement "Direct link to Custom Measurement") Custom measurement allows you to send numeric data to Coralogix for precise monitoring and analysis. ``` CoralogixRum.sendCustomMeasurement('my-page-load', 1000); ``` ### Add Timing[​](#add-timing "Direct link to Add Timing") Add timing is a simple API to add extra performance timing to your RUM data.
The timing relates to the time between the page load and the moment the timing is added.
For example, you can add a timing for the first click event. ``` window.addEventListener('click', function handler() { window.removeEventListener('click', handler); CoralogixRum.addTiming('first-click'); }); ``` OR You can provide your own timing. ``` window.addEventListener('click', function handler() { window.removeEventListener('click', handler); CoralogixRum.addTiming('first-click', 1000); }); ``` ### Custom Time Measurement[​](#custom-time-measurement "Direct link to Custom Time Measurement") Custom time measurement allows you to track the time between two points by starting a timer with `startTimeMeasure` and stopping it with `endTimeMeasure`, using a unique name to identify each measurement. Labels can be added at the start for additional context. ``` CoralogixRum.startTimeMeasure('login', { paymentMethod: 'visa', userTheme: 'dark', }); ``` ``` CoralogixRum.endTimeMeasure('login'); ``` ### Microfrontend support[​](#microfrontend-support "Direct link to Microfrontend support") This feature allows you to track multiple applications on the same page.
**Only errors with stacktrace are supported.** #### Pre Requisites[​](#pre-requisites "Direct link to Pre Requisites") To support microfrontend, you need to install one of these plugins: [webpack](https://www.npmjs.com/package/@coralogix/webpack-plugin), [esbuild](https://www.npmjs.com/package/@coralogix/esbuild-plugin), [vite](https://www.npmjs.com/package/@coralogix/vite-plugin) and include them in your build process. When an error occurs, the SDK will find the correlated microfrontend and will add a label with the microfrontend app/version to the error event. ``` CoralogixRum.init({ // ... supportMfe: true, }); ``` ### Custom Spans[​](#custom-spans "Direct link to Custom Spans") Create your own custom spans to track specific operations in your application.
Each span will share the same trace ID, which will allow you to create flows in your application and see them in the [Tracing view](https://coralogix.com/docs/user-guides/rum/user-guides/data_exploration/spans/explore-spans/index.mdx).
Labels can be added during span creation for additional context. ``` const customTracer = CoralogixRum.getCustomTracer(); const globalSpan = customTracer.startGlobalSpan('global-span', { page: 'posts' }); // 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. globalSpan.endSpan(); ``` #### Ignored Instruments[​](#ignored-instruments "Direct link to Ignored Instruments") After creating a global span, some of the instrumented events (network, errors, interactions) will automatically share the same trace ID, unless specifically ignored. ``` const customTracer = CoralogixRum.getCustomTracer({ ignoredInstruments: [CoralogixEventType.NETWORK_REQUEST, CoralogixEventType.ERROR, CoralogixEventType.USER_INTERACTION], }); // ... your code ``` ### Traces Exporter[​](#traces-exporter "Direct link to Traces Exporter") The `tracesExporter` callback gives you full control over how collected trace events are handled.
It receives a `TraceExporterData` object containing all trace data that the SDK has collected. ``` CoralogixRum.init({ tracesExporter: (data: TraceExporterData) => { // Example: forward traces to your own backend endpoint fetch('https://api.mycompany.com/rum-traces', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data), }); }, }); ``` ### OpenTelemetry Batch Configuration[​](#opentelemetry-batch-configuration "Direct link to OpenTelemetry Batch Configuration") The SDK batches logs and traces through an OpenTelemetry `BatchSpanProcessor` before sending them to Coralogix. Use `otelConfig` to tune that batching — for example, to flush less frequently and reduce the number of network requests your app makes. All fields are optional. Omitting `otelConfig` keeps the SDK defaults, and any out-of-range value is clamped to the documented bounds. ``` CoralogixRum.init({ // ... otelConfig: { maxExportBatchSize: 50, // Max spans per export; reaching it triggers an early flush. Defaults to 50, min 1, max 256 scheduledDelayMillis: 2000, // Delay in ms between two consecutive exports. Defaults to 2000(2s), min 2000(2s), max 30000(30s) maxQueueSize: 2048, // Max buffered spans before new spans are dropped. Defaults to 2048, min 512, max 4096 }, }); ``` ### Soft Navigations — Experimental[​](#soft-navigations--experimental "Direct link to Soft Navigations — Experimental") Soft navigations are navigations that do not trigger a full page reload, such as SPA navigations. Defaults to false. With this option enabled, the SDK will track soft navigations and Partial Web vitals metrics such as (TTFB, FCP, LCP, CLS, INP). \*\**** This feature requires enabling the feature flag(#enable-experimental-web-platform-features) in the browser. ***\*\* ``` CoralogixRum.init({ // ... trackSoftNavigations: false, }); ``` ### Memory Usage - Experimental[​](#memory-usage---experimental "Direct link to Memory Usage - Experimental") Memory usage is a feature that allows you to track the memory usage of your application. It uses the [measureUserAgentSpecificMemory](https://developer.mozilla.org/en-US/docs/Web/API/Performance/measureUserAgentSpecificMemory) API.
The SDK will collect memory usage data every interval and send it to Coralogix.
To enable the feature, your website needs to be in a [secure context](https://developer.mozilla.org/en-US/docs/Web/API/Performance/measureUserAgentSpecificMemory#security_requirements). ``` CoralogixRum.init({ // ... memoryUsageConfig: { enabled: true, interval: 300_000, // Defaults to 5 minutes }, }); ``` You can also manually trigger memory usage data collection. ``` CoralogixRum.measureUserAgentSpecificMemory(); ```