# Custom spans

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-spans.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-spans.md%20and%20help%20me%20with%20my%20question%20about%20this%20Coralogix%20documentation%20page.)

### Custom spans[​](#custom-spans "Direct link to Custom spans")

Create your own custom spans to track specific operations in your application.<br />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/data_exploration/spans/explore-spans.md).<br />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
```

#### When getCustomTracer returns nothing[​](#when-getcustomtracer-returns-nothing "Direct link to When getCustomTracer returns nothing")

`getCustomTracer` returns `undefined` rather than throwing, so a missing prerequisite shows up as a `TypeError` on the next line instead. It returns nothing when:

* the SDK has not been initialized yet
* `traceParentInHeader` is not enabled - custom spans need it, and only a debug-level message says so
* a custom tracer already exists, which logs `Custom tracer already exists`

`startGlobalSpan` behaves the same way: with a global span already open it warns `Global span already exists` and returns `undefined`, rather than replacing it.

A few more things worth knowing:

* Every span must be ended explicitly. `endSpan` ends the span and releases it, so a new global span can be started afterwards.
* Labels are applied to the span they are passed with. A child span created by `startCustomSpan` does not inherit the global span's labels.
* Open global spans are ended for you when the session resets, which happens after an hour of session time or 15 minutes of inactivity.