Overview

This guide explains how to connect Noibu's session data with Dynatrace APM so that your engineering and support teams can correlate front-end user sessions captured by Noibu with back-end traces, logs, and requests captured by Dynatrace.

With this integration in place, you can:

• Jump from a specific Noibu session directly to the matching back-end trace in Dynatrace.

• Search Dynatrace logs or traces by the Noibu Browser ID to find all server-side activity for a given user session.

• Search Noibu sessions by the same ID to locate the exact front-end replay associated with a Dynatrace problem or alert.

Prerequisites

• Noibu script installed on your storefront and actively collecting sessions.

• Dynatrace OneAgent deployed on your back-end servers (or agentless RUM JavaScript manually injected on your front end). [1]

• For Method #2 only: Dynatrace Real User Monitoring (RUM) must be active for your web application.

• Access to your front-end codebase to add a small JavaScript snippet.

How the Integration Works

Every Noibu session is assigned a Browser ID that is written to localStorage when the Noibu script first loads. Because all subsequent page navigations for that visitor share the same localStorage, the Browser ID remains constant throughout the session.

The integration works by reading this Browser ID from localStorage and propagating it in one of two ways:

1. Method #1 — as an HTTP request header on every API call your front end makes to your back end (where Dynatrace APM captures those requests).

2. Method #2 — as a Dynatrace RUM session property via the dtrum JavaScript API (where Dynatrace RUM is also active alongside APM). [1]

Method #1 — Connecting via HTTP Header

This method works for any Dynatrace APM setup regardless of whether Dynatrace RUM is in use. You modify each front-end API call to attach the Noibu Browser ID as a custom request header. Dynatrace then captures this header as part of the request data, giving you a shared value to search across both systems.

Step 1 — Retrieve the Noibu Browser ID from localStorage

Add the following snippet to your front-end application. It reads the Browser ID from localStorage where Noibu stores it under the key n_browser_data with the field BrowserId.

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

Step 2 — Add the Header to Your API Calls

For each fetch() or XHR call your front end makes to your back end, include X-Noibu-Session-Browser-ID as an additional header. Replace someAPICallHere with your actual API endpoint.

// Example using the Fetch API
fetch(someAPICallHere, {
  headers: {
    // ... your other existing headers
    'X-Noibu-Session-Browser-ID': noibuSessionBrowserId,
  },
});

How to Look Up Sessions After Integration

Noibu → Dynatrace (given a Noibu session, find the Dynatrace traces)

1. Open the full Session Details view in Noibu for the session you want to investigate.

2. Click the Details tab.

3. Copy the Browser ID value shown there.

3. In Dynatrace, open your log or trace search and filter requests where the header X-Noibu-Session-Browser-ID equals the value you copied.

Dynatrace → Noibu (given a Dynatrace log or trace, find the Noibu session)

1. While viewing a specific request or trace in Dynatrace, locate and copy the value for the X-Noibu-Session-Browser-ID header field.

2. In Noibu, open Sessions from the left sidebar.

3. Click Filter > + Add Filter > Browser ID

4. Paste the header value you copied from Dynatrace into the filter field.

Method #2 — Connecting via Dynatrace RUM JavaScript API

This method uses the Dynatrace RUM JavaScript API to attach the Noibu Browser ID as a searchable session property on every Dynatrace RUM session. [1]

Because dtrum.sendSessionProperties() applies at the session level, you only need to call it once per page load rather than modifying every individual API request. [3]

Step 1 — Pre-register the Session Property in Dynatrace

Dynatrace discards session properties that have not been pre-defined in your application settings. [2]

Before adding any code, you must register the property:

1. In Dynatrace, go to Web and select your monitored application.

2. In the top-right corner of the application overview page, select More (...) > Edit.

3. From the application settings, select Capturing > Session and action properties. [2]

4. Select Add property > Custom-defined property.

5. Set Expression type to JavaScript API. [2]

6. Set Data type to String.

7. Set Display name to something descriptive, e.g. Noibu Session Browser ID.

8. Set Key to x_noibu_session_browser_id (must be lowercase — Dynatrace will silently discard properties with uppercase keys). [2] [3]

9. Under Storage type, select Session property (so the value is available at the session level for cross-session searching).

10. Save the property.

Step 2 — Send the Property via dtrum.sendSessionProperties()

Add the following snippet to your front-end application. It reads the Noibu Browser ID from localStorage and pushes it to Dynatrace RUM as a session-level string property via dtrum.sendSessionProperties(). [1] [3]

Call this once on each page load, after both the Noibu script and the Dynatrace RUM JavaScript have had a chance to initialise.

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

// Send it to Dynatrace RUM as a session property
// Key must be lowercase and must match what you registered in the Dynatrace UI
if (typeof dtrum !== "undefined" && noibuSessionBrowserId) {
  window.dtrum.sendSessionProperties(
    null,   // javaLong (not used)
    null,   // date (not used)
    { x_noibu_session_browser_id: noibuSessionBrowserId }  // shortString
  );
}

Step 3 — Search Sessions Using USQL

Once the property is flowing through, you can query Dynatrace User Sessions using USQL to locate the session associated with a given Noibu Browser ID. [4] [5]

Example USQL — find a session by Noibu Browser ID

Custom session properties are queried using the stringProperties.<key> field convention in USQL. [4]

SELECT *
FROM usersession
WHERE stringProperties.x_noibu_session_browser_id = '<paste-noibu-browser-id-here>'

For the full USQL keyword and table reference, see ref [5].

Navigate via the User Sessions page (no USQL needed)

1. In Dynatrace, go to Digital Experience > User Sessions.

2. Click the filter text field at the top of the page.

3. Select the property Noibu Session Browser ID (or the Display name you configured), enter the Browser ID value, and press Enter. [4]

How to Look Up Sessions After Integration

Noibu → Dynatrace

1. Open the Session Details view in Noibu and copy the Browser ID from the Details tab.

2. In Dynatrace, use the USQL query above (or the User Sessions filter) with that Browser ID to find the matching RUM session and its associated APM traces. [4] [5]

Dynatrace → Noibu

1. In Dynatrace, open the User Session details and expand the session properties. Copy the value for x_noibu_session_browser_id.

2. In Noibu, open Sessions from the left sidebar.

3. Click Filter > + Add Filter > Browser ID

4. Paste the value you copied from Dynatrace into the filter field.

Choosing a Method

If your Dynatrace environment uses the newer RUM JavaScript SDK, refer to the alternative sendSessionPropertyEvent() API documented in ref [6] — note that property field names require a session_properties. prefix in that SDK.

Troubleshooting

The Noibu Browser ID is empty or null

• Verify the Noibu script is correctly installed and firing on the page before your integration snippet runs.

• In the browser console, run JSON.parse(localStorage.getItem('n_browser_data')) and confirm it returns an object with a BrowserId field.

Session properties not appearing in Dynatrace (Method #2)

• Confirm you have pre-registered the property in your application settings (Step 1 of Method #2). Dynatrace silently discards any property not defined in the UI. [2]

• Confirm the key in your JavaScript code exactly matches the key registered in the UI (case-sensitive; must be lowercase). [3]

• Session properties only become available after a session ends, not during an active live session. [2]

• Verify the Dynatrace RUM JavaScript has finished loading before your snippet runs. [1]

Cannot find the session in Noibu using a Dynatrace value

• Confirm the Custom ID value filter in Noibu is being populated with the value from the x_noibu_session_browser_id property (not a different ID).

• Check that the session falls within the Noibu session retention window.

Dynatrace Reference Documentation

The following Dynatrace documentation pages are directly relevant to this integration. Inline citations throughout this guide link to these entries.

[1]  Customize Real User Monitoring with the JavaScript API for web applications

https://docs.dynatrace.com/docs/observe/digital-experience/web-applications/additional-configuration/customize-rum

[2]  Define user action and user session properties for web applications

https://docs.dynatrace.com/docs/observe/digital-experience/web-applications/additional-configuration/define-user-action-and-session-properties

[3]  DtrumApi interface — sendSessionProperties() method reference

https://www.dynatrace.com/support/doc/javascriptapi/doc/types/dtrum.html

[4]  Leverage user action and user session properties for web applications

https://docs.dynatrace.com/docs/observe/digital-experience/web-applications/analyze-and-use/action-and-session-properties

[5]  Custom queries, segmentation, and aggregation of session data (USQL reference)

https://docs.dynatrace.com/docs/observe/digital-experience/session-segmentation/custom-queries-segmentation-and-aggregation-of-session-data

[6]  Capture event and session properties for web frontends (new RUM experience)

https://docs.dynatrace.com/docs/observe/digital-experience/new-rum-experience/web-frontends/additional-configuration/event-and-session-properties