Custom Spans

Overview

Custom spans in Coralogix offer developers unparalleled flexibility to monitor specific parts of the frontend application that matter most to their users. Unlike network request spans, which are automatically generated, custom spans allow you to define, start, and end spans at strategic points in your application's user flow or operational processes. This enables targeted performance monitoring, precise troubleshooting, and fine-grained optimization.

Frontend tracing in Coralogix, which includes network request spans and custom spans, provides a complete view of how frontend applications behave. Together, these tools empower developers to deliver a seamless and optimized user experience.

Use cases

Tracking user interactions. Start a span on button click and end it when the loading of a form ends.
Measuring complex client-side operations. Evaluate the time it takes to parse large payloads, execute computationally intensive algorithms, or render components.
Monitoring third-party integrations. Measure the time to load third-party scripts and their performance impact on the main thread.
Error impact. Follow specific errors to monitor their effect on user flows.

Prerequisites

Make sure you initiated the traceParentInHeader object using the Trace Capturing instructions.

Configuration

Create a customTracer object. This can be done only once in a user session.

Create a globalSpan object. Each custom span should start and end in its context to be part of the same trace.

const customTracer = CoralogixRum.getCustomTracer();
const globalSpan = customTracer.startGlobalSpan('global-span', {page:'posts'});

globalSpan.withContext(async () => {
const customSpan = globalSpan.startCustomSpan('custom-span', {action:'scroll'});
customSpan.endSpan();
});

// Note: End the global span only after the operation is complete.
globalSpan.endSpan();

Instrumented events, like network requests, errors and user interactions, will be added to an active custom span automatically. You can exclude them from the trace during customTracer initiation.
```
const customTracer = CoralogixRum.getCustomTracer({
    ignoredInstruments: [CoralogixEventType.NETWORK_REQUEST, CoralogixEventType.ERROR, CoralogixEventType.USER_INTERACTION]
}
```
You can view your trace data in a whole application context in Explore or from any page in the RUM section by clicking on Frontend Traces.

Limitations

A new global span can’t be initiated before closing the existing one.
The global span ends automatically after an hour of session time or 15 minutes of user inactivity.
Span attributes are not propagated to spans in the same trace.
All spans must be ended explicitly.

Support

Need help?

Our world-class customer success team is available 24/7 to walk you through your setup and answer any questions that may come up.

Feel free to reach out to us via our in-app chat or by sending us an email to [email protected].

Trace Capturing

Next Enhance & Manage Browser RUM Data with beforeSend