To link Datadog sessions with Noibu's sessions, add the Noibu Session Browser ID as an additional header/property to all your API requests being made from your front-end to your back-end (assuming that back-end logs are being captured within Datadog) so that you have a common value that you can use to search for relevant logs/sessions.

If you wish to look up all the logs in Datadog for a specific session that has been recorded within Noibu:

1. Go to the full Session Details view within Noibu for that session
2. Click on the Details tab at the top
3. Copy the Browser ID value
4. Go to Datadog, and filter your logs by searching for all requests that have the X-Noibu-Session-Browser-ID header field set to the Browser ID you copied from Noibu.

If you wish to look up the session with Noibu that is associated to a specific log from Datadog:

1. While looking at the specific log within Datadog, copy the value for X-Noibu-Session-Browser-ID header field
2. Go to Noibu & click on Sessions in the left sidebar
3. Click on Filter > Add Filter > scroll down to find Custom ID value and click on it
4. Paste the header field value here that you copied from Datadog.

How to integrate Noibu and Datadog APM

Method #1 - Connecting Datadog APM with Noibu using headers

You will need to modify each API request on the front-end that’s being made to your back-end and include an additional header.

You can get the Noibu Session Browser ID from local storage where it is stored under the key n_browser_data with the field BrowserId. With this link established, you'll be able to trace user actions across both systems for more efficient debugging and analytics.

To start, retrieve the Noibu session ID from local storage with the code snippet below:

// Retrieve the Noibu session ID from local storage

let noibuData = JSON.parse(localStorage.getItem('n_browser_data'));

let noibuSessionBrowserId = noibuData ? noibuData.BrowserId : '';

Next, make an API call with Datadog's APM installed and add the Noibu Session Browser ID as a header. In the example snippet below, replace someAPICallhere with your actual API request, and append X-Noibu-Session-Browser-ID as a header.

fetch(someAPICallhere, {

 headers: {

   // other headers

   'X-Noibu-Session-Browser-ID': noibuSessionBrowserId,

 },

});

If done properly for every request that’s made from your front-end to your back-end, this will attach the Noibu Session Browser ID as a header to your backend request, allowing you to correlate data between Datadog and Noibu.

Method #2 - Connecting Datadog APM with Noibu via Datadog RUM API

This method makes use of the Datadog RUM API to provide additional configurable properties or context for all RUM events.

This involves making use of either one of the following Datadog RUM API functions:

1. setGlobalContextProperty - to add a global context property to all RUM events collected.
2. setUserProperty - to add a specific key/value pair property for specific RUM events.

If you want to have the Noibu Session Browser ID be searchable across all RUM events in Datadog, then the setGlobalContextProperty is strongly recommended.

Unlike method #1 above, this allows you to have just one code snippet added, instead of requiring you to modify/refactor every API request on the front-end and add an additional header.

The code snippet below will ensure that by just specifying this once, all events will be searchable within Datadog using the X-Noibu-Session-Browser-ID value.

You can get the Noibu Session Browser ID from local storage where it is stored under the key n_browser_data with the field BrowserId. With this link established, you'll be able to trace user actions across both systems for more efficient debugging and analytics.

import { datadogRum } from '@datadog/browser-rum';

// Retrieve the Noibu session ID from local storage
let noibuData = JSON.parse(localStorage.getItem('n_browser_data'));
let noibuSessionBrowserId = noibuData ? noibuData.BrowserId : '';

datadogRum.setGlobalContextProperty('X-Noibu-Session-Browser-Id', noibuSessionBrowserId);

Alternatively, you could use setUserProperty if you don’t wish to set this Noibu Session Browser ID globally & want to do it per-event.