Enrich And Control Browser RUM Data With beforeSend

Docs > RUM & Session Replay > Real User Monitoring & Session Replay Guides > Enrich And Control Browser RUM Data With beforeSend

Overview

The RUM Browser SDK captures RUM events and populates their main attributes. The beforeSend callback function gives you access to every event collected by the RUM SDK before they are sent to Datadog.

Intercepting the RUM events allows you to:

Enrich your RUM events with additional context attributes
Modify your RUM events to modify their content, or redact sensitive sequences (see the list of editable properties)
Discard selected RUM events

Event and context structure

The beforeSend callback function gives you access to two objects: event and context.

function beforeSend(event, context)

Event

The event is generated by the RUM Browser SDK. For more information about different event types and collected attributes, see the RUM data collected documentation.

The event.type property lets you identify the type of the event:

{
    ...,
    "event.type": "resource",
    ...
}

Context

The context is made of the Browser APIs that trigger the event creation. The context values depend on the event.type:

RUM event type	Context
View	Location
Action	Event
Resource (XHR)	XMLHttpRequest and PerformanceResourceTiming
Resource (Fetch)	Request, Response, and PerformanceResourceTiming
Resource (Other)	PerformanceResourceTiming
Error	Error or any other value raised as an error
Long Task	PerformanceLongTaskTiming

For more information about the structure of context objects, see the Browser SDK repository.

Examples

Collect HTTP headers from a Fetch response

Collect HTTP headers from a Fetch response with the following beforeSend configuration. Additional context attributes must be stored in the event.context object.

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

datadogRum.init({
    ...,
    beforeSend: (event, context) => {
        // collect a RUM resource's response headers
        if (event.type === 'resource' && event.resource.type === 'fetch') {
            event.context.responseHeaders = Object.fromEntries(context.response.headers)
        }
        return true
    },
    ...
});

The following tabs show the information contained in the beforeSend event and context objects for this example:

{
    "application": {
        "id": "<YOUR_APPLICATION_ID>"
    },
    "date": 1623933472075,
    "service": "shopist-web-ui",
    "session": {
        "type": "user",
        "id": "308f14ac-2a27-4b50-945c-be345778994f",
        "has_replay": true
    },
    "view": {
        "id": "768f0eb9-39c5-4a1f-9c13-476bd08166bb",
        "referrer": "http://localhost:3000/",
        "url": "http://localhost:3000/"
    },
    "resource": {
        "id": "e5d1d3a4-7240-4910-bd0a-af253e06d301",
        "type": "fetch",
        "duration": 2577300000,
        "method": "get",
        "status_code": 200,
        "url": "https://api.shopist.io/products.json",
        "size": 10307,
        "download": {
            "duration": 1800000,
            "start": 2575500000
        },
        "first_byte": {
            "duration": 2574600000,
            "start": 900000
        }
    },
    "type": "resource",
    "context": {
        "browser_test": false,
        "usr.email": "jane@doe.com",
        "usr.id": "f57eg30cc9"
    }
}

{
    "performanceEntry": {
        "name": "https://api.shopist.io/products.json",
        "entryType": "resource",
        "startTime": 230,
        "duration": 2577.300000011921,
        "initiatorType": "fetch",
        "nextHopProtocol": "h2",
        "workerStart": 0,
        "redirectStart": 0,
        "redirectEnd": 0,
        "fetchStart": 230,
        "domainLookupStart": 230,
        "domainLookupEnd": 230,
        "connectStart": 230,
        "connectEnd": 230,
        "secureConnectionStart": 230,
        "requestStart": 230.90000000596046,
        "responseStart": 2805.5,
        "responseEnd": 2807.300000011921,
        "transferSize": 10743,
        "encodedBodySize": 10307,
        "decodedBodySize": 10307,
        "serverTiming": [],
        "workerTiming": []
    },
    "response": {
        "body": (...),
        "bodyUsed": true,
        "headers": Headers {},
        "ok": true,
        "redirected": false,
        "status": 200,
        "statusText": "",
        "type": "basic",
        "url": "https://api.shopist.io/products.json"
    },
    "requestInput": "https://api.shopist.io/products.json",
    "requestInit": {
        "headers": [
            [
                "Content-Type",
                "application/json; charset=utf-8"
            ],
            [
                "x-datadog-origin",
                "rum"
            ],
            [
                "x-datadog-parent-id",
                "595857188965892467"
            ],
            [
                "x-datadog-sampled",
                "1"
            ],
            [
                "x-datadog-sampling-priority",
                "1"
            ],
            [
                "x-datadog-trace-id",
                "796856647783126791"
            ]
        ],
        "method": "get",
        "cache": "no-cache"
    }
}

Discard a frontend error

Discard frontend errors if their message includes “profile is not defined” with the following beforeSend configuration:

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

datadogRum.init({
    ...,
    beforeSend: (event, context) => {
        // discard a RUM error if its message includes 'profile is not defined'
        if (event.type === 'error' && event.error.message.includes('profile is not defined')) {
            return false
        }
    },
    ...
});