Resumen

Existen varias formas en las que puedes modificar los datos y contexto recolectados por RUM, para apoyar tus necesidades de:

• Proteger datos sensibles como información personal identificable.
• Conectar una sesión de usuario con tu identificación interna de ese usuario, para ayudar con el soporte.
• Reducir la cantidad de datos RUM que estás recolectando, a través del muestreo de datos.
• Proporcionar más contexto del que ofrecen los atributos predeterminados sobre el origen de los datos.

datadogRum.startView('checkout')

window.DD_RUM.onReady(function() {
        window.DD_RUM.startView('checkout')
})

window.DD_RUM && window.DD_RUM.startView('checkout')

datadogRum.startView({
  name: 'checkout',
  service: 'purchase',
  version: '1.2.3'
})

window.DD_RUM.onReady(function() {
  window.DD_RUM.startView({
    name: 'checkout',
    service: 'purchase',
    version: '1.2.3'
  })
})

window.DD_RUM && window.DD_RUM.startView({
  name: 'checkout',
  service: 'purchase',
  version: '1.2.3'
})

datadogRum.startView({
     name: 'checkout',
     service: 'purchase',
     version: '1.2.3',
     context: {
         payment: 'Done'
     },
})

window.DD_RUM.onReady(function() {
   window.DD_RUM.startView({
         name: 'checkout',
         service: 'purchase',
         version: '1.2.3',
         context: {
             payment: 'Done'
         },
   })
})

window.DD_RUM && window.DD_RUM.startView({
     name: 'checkout',
     service: 'purchase',
     version: '1.2.3',
     context: {
         payment: 'Done'
     },
})

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

datadogRum.setViewName('<VIEW_NAME>');

// Code example
datadogRum.setViewName('Checkout');

window.DD_RUM.onReady(function() {
   window.DD_RUM.setViewName('<VIEW_NAME>');
})

// Code example
window.DD_RUM.onReady(function() {
   window.DD_RUM.setViewName('Checkout');
})

window.DD_RUM && window.DD_RUM.setViewName('<VIEW_NAME>');

// Code example
window.DD_RUM && window.DD_RUM.setViewName('Checkout');

Para más información, consulta Configuración de Monitoreo del Navegador.

Enriquecer y controlar los datos de RUM

El SDK del navegador RUM captura eventos de RUM y completa sus atributos principales. La función de callback beforeSend te da acceso a cada evento recopilado por el SDK del navegador RUM antes de que sea enviado a Datadog.

Interceptar los eventos de RUM te permite:

• Enriquecer tus eventos de RUM con atributos de contexto adicionales
• Modificar tus eventos de RUM para alterar su contenido o redactar secuencias sensibles (ver lista de propiedades editables)
• Descartar eventos RUM seleccionados

function beforeSend(event, context)

Enriquecer eventos RUM

Junto con los atributos añadidos con el API de Contexto Global o la recolección de datos de Feature Flag, puedes agregar atributos de contexto adicionales al evento. Por ejemplo, etiqueta tus eventos de recursos RUM con datos extraídos de un objeto de respuesta de fetch:

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
   },
   ...
});

window.DD_RUM.onReady(function() {
   window.DD_RUM.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
      },
      ...
   })
})

window.DD_RUM &&
   window.DD_RUM.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
      },
      ...
   });

Si un usuario pertenece a múltiples equipos, agrega pares clave-valor adicionales en tus llamadas a la API de Contexto Global.

El SDK del navegador RUM ignora los atributos añadidos fuera de event.context.

Enriquecer eventos RUM con Feature Flags

Puedes enriquecer los datos de eventos RUM con Feature Flags para obtener contexto adicional y visibilidad en el seguimiento del rendimiento. Esto te permite determinar qué usuarios ven una experiencia específica y si está afectando negativamente el rendimiento del usuario.

Modifica el contenido de un evento RUM

Por ejemplo, para ocultar direcciones de correo electrónico en las URL de tu aplicación web:

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

datadogRum.init({
   ...,
   beforeSend: (event) => {
      // remove email from view url
      event.view.url = event.view.url.replace(/email=[^&]*/, "email=REDACTED")
   },
   ...
});

window.DD_RUM.onReady(function() {
   window.DD_RUM.init({
      ...,
      beforeSend: (event) => {
            // remove email from view url
            event.view.url = event.view.url.replace(/email=[^&]*/, "email=REDACTED")
      },
      ...
   })
})

window.DD_RUM &&
   window.DD_RUM.init({
      ...,
      beforeSend: (event) => {
            // remove email from view url
            event.view.url = event.view.url.replace(/email=[^&]*/, "email=REDACTED")
      },
      ...
   });

Puedes actualizar las siguientes propiedades del evento:

El SDK del Navegador RUM ignora las modificaciones realizadas a las propiedades de eventos no listadas anteriormente. Para más información sobre las propiedades de eventos, consulte el repositorio de GitHub del SDK del Navegador RUM.

Nota: A diferencia de otros eventos, los eventos de vista se envían múltiples veces a Datadog para reflejar las actualizaciones que ocurren durante su ciclo de vida. Una actualización de un evento de vista anterior aún puede ser enviada mientras una nueva vista está activa. Datadog recomienda tener en cuenta este comportamiento al modificar el contenido de un evento de vista.

beforeSend: (event) => {
    // discouraged, as the current view name could be applied to both the active view and the previous views
    event.view.name = getCurrentViewName()

    // recommended
    event.view.name = getViewNameForUrl(event.view.url)
}

Descartar un evento RUM

Con la beforeSend API, descarta un evento RUM devolviendo false:

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

datadogRum.init({
   ...,
   beforeSend: (event) => {
      if (shouldDiscard(event)) {
         return false
      }
      ...
   },
   ...
});

window.DD_RUM.onReady(function() {
    window.DD_RUM.init({
        ...,
        beforeSend: (event) => {
            if (shouldDiscard(event)) {
                return false
            },
            ...
        },
        ...
    })
})

window.DD_RUM &&
    window.DD_RUM.init({
        ...,
        beforeSend: (event) => {
            if (shouldDiscard(event)) {
                return false
            }
            ...
        },
        ...
    });

Nota: No se pueden descartar los eventos de vista.

Sesión de usuario

Agregar información del usuario a tus sesiones de RUM te ayuda a:

• Seguir el recorrido de un usuario determinado
• Conocer qué usuarios son los más afectados por errores
• Monitorear el rendimiento de tus usuarios más importantes

Identificar sesión de usuario

datadogRum.setUser(<USER_CONFIG_OBJECT>)

datadogRum.setUser({
    id: '1234',
    name: 'John Doe',
    email: 'john@doe.com',
    plan: 'premium',
    ...
})

window.DD_RUM.onReady(function() {
    window.DD_RUM.setUser({
        id: '1234',
        name: 'John Doe',
        email: 'john@doe.com',
        plan: 'premium',
        ...
    })
})

window.DD_RUM && window.DD_RUM.setUser({
    id: '1234',
    name: 'John Doe',
    email: 'john@doe.com',
    plan: 'premium',
    ...
})

Acceder a la sesión de usuario

datadogRum.getUser()

datadogRum.getUser()

window.DD_RUM.onReady(function() {
    window.DD_RUM.getUser()
})

window.DD_RUM && window.DD_RUM.getUser()

Agregar/Sobrescribir propiedad de sesión de usuario

datadogRum.setUserProperty('<USER_KEY>', <USER_VALUE>)

datadogRum.setUserProperty('name', 'John Doe')

window.DD_RUM.onReady(function() {
    window.DD_RUM.setUserProperty('name', 'John Doe')
})

window.DD_RUM && window.DD_RUM.setUserProperty('name', 'John Doe')

Eliminar propiedad de sesión de usuario

datadogRum.removeUserProperty('<USER_KEY>')

datadogRum.removeUserProperty('name')

window.DD_RUM.onReady(function() {
    window.DD_RUM.removeUserProperty('name')
})

window.DD_RUM && window.DD_RUM.removeUserProperty('name')

Limpiar propiedad de sesión de usuario

datadogRum.clearUser()

datadogRum.clearUser()

window.DD_RUM.onReady(function() {
    window.DD_RUM.clearUser()
})

window.DD_RUM && window.DD_RUM.clearUser()

Cuenta

Para agrupar usuarios en diferentes conjuntos, utiliza el concepto de cuenta.

Los siguientes atributos están disponibles:

Identificar cuenta

datadogRum.setAccount(<ACCOUNT_CONFIG_OBJECT>)

datadogRum.setAccount({
    id: '1234',
    name: 'My Company Name',
    ...
})

window.DD_RUM.onReady(function() {
    window.DD_RUM.setAccount({
        id: '1234',
        name: 'My Company Name',
        ...
    })
})

window.DD_RUM && window.DD_RUM.setAccount({
    id: '1234',
    name: 'My Company Name',
    ...
})

Acceder a la cuenta

datadogRum.getAccount()

datadogRum.getAccount()

window.DD_RUM.onReady(function() {
    window.DD_RUM.getAccount()
})

window.DD_RUM && window.DD_RUM.getAccount()

Agregar/Sobrescribir propiedad de la cuenta

datadogRum.setAccountProperty('<ACCOUNT_KEY>', <ACCOUNT_VALUE>)

datadogRum.setAccountProperty('name', 'My Company Name')

window.DD_RUM.onReady(function() {
    window.DD_RUM.setAccountProperty('name', 'My Company Name')
})

window.DD_RUM && window.DD_RUM.setAccountProperty('name', 'My Company Name')

Eliminar propiedad de la cuenta

datadogRum.removeAccountProperty('<ACCOUNT_KEY>')

datadogRum.removeAccountProperty('name')

window.DD_RUM.onReady(function() {
    window.DD_RUM.removeAccountProperty('name')
})

window.DD_RUM && window.DD_RUM.removeAccountProperty('name')

Limpiar propiedades de la cuenta

datadogRum.clearAccount()

datadogRum.clearAccount()

window.DD_RUM.onReady(function() {
    window.DD_RUM.clearAccount()
})

window.DD_RUM && window.DD_RUM.clearAccount()

Muestreo

Por defecto, no se aplica muestreo en el número de sesiones recolectadas. Para aplicar un muestreo relativo (en porcentaje) al número de sesiones recolectadas, utiliza el parámetro sessionSampleRate al inicializar RUM.

El siguiente ejemplo recolecta solo el 90% de todas las sesiones en una aplicación RUM dada:

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

datadogRum.init({
    applicationId: '<DATADOG_APPLICATION_ID>',
    clientToken: '<DATADOG_CLIENT_TOKEN>',
    site: '<DATADOG_SITE>',
    sessionSampleRate: 90,
});

window.DD_RUM.onReady(function() {
    window.DD_RUM.init({
        clientToken: '<CLIENT_TOKEN>',
        applicationId: '<APPLICATION_ID>',
        site: '<DATADOG_SITE>',
        sessionSampleRate: 90,
    })
})

window.DD_RUM &&
    window.DD_RUM.init({
        clientToken: '<CLIENT_TOKEN>',
        applicationId: '<APPLICATION_ID>',
        site: '<DATADOG_SITE>',
        sessionSampleRate: 90,
    });

Para una sesión excluida por muestreo, no se recolectan ninguna de las vistas de página ni la telemetría asociada a esa sesión.

Consentimiento de seguimiento de usuario

Para cumplir con GDPR, CCPA y regulaciones similares, el SDK del navegador RUM te permite proporcionar el valor de consentimiento de seguimiento al inicializar. Para más información sobre el consentimiento de seguimiento, consulta Seguridad de Datos.

El parámetro de inicialización trackingConsent puede ser uno de los siguientes valores:

1. "granted" (por defecto): El SDK del navegador RUM comienza a recolectar datos y los envía a Datadog.
2. "not-granted": El SDK del navegador RUM no recolecta ningún dato.

Para cambiar el valor de consentimiento de seguimiento después de que se inicializa el SDK del navegador RUM, utiliza la llamada a la API setTrackingConsent(). El SDK del navegador RUM cambia su comportamiento de acuerdo con el nuevo valor:

• cuando se cambia de "granted" a "not-granted", la sesión RUM se detiene, y los datos ya no se envían a Datadog.
• cuando se cambia de "not-granted" a "granted", se crea una nueva sesión RUM si no hay una sesión anterior activa, y la recolección de datos se reanuda.

Este estado no se sincroniza entre pestañas ni se persiste entre navegaciones. Es tu responsabilidad proporcionar la decisión del usuario durante la inicialización del SDK del navegador RUM o utilizando setTrackingConsent().

Cuando se utiliza setTrackingConsent() antes de init(), el valor proporcionado tiene prioridad sobre el parámetro de inicialización.

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

datadogRum.init({
    ...,
    trackingConsent: 'not-granted'
});

acceptCookieBannerButton.addEventListener('click', function() {
    datadogRum.setTrackingConsent('granted');
});

window.DD_RUM.onReady(function() {
    window.DD_RUM.init({
        ...,
        trackingConsent: 'not-granted'
    });
});

acceptCookieBannerButton.addEventListener('click', () => {
    window.DD_RUM.onReady(function() {
        window.DD_RUM.setTrackingConsent('granted');
    });
});

window.DD_RUM && window.DD_RUM.init({
  ...,
  trackingConsent: 'not-granted'
});

acceptCookieBannerButton.addEventListener('click', () => {
    window.DD_RUM && window.DD_RUM.setTrackingConsent('granted');
});

Contexto de visualización

A partir de versión 5.28.0, el contexto de los eventos de visualización es modificable. El contexto solo se puede agregar a la visualización actual y propaga sus eventos hijos (como action, error y timing) con las funciones startView, setViewContext y setViewContextProperty.

Iniciar visualización con contexto

Opcionalmente, define el contexto al iniciar una visualización con las opciones startView.

Agregar contexto de visualización

Enriquece o modifica el contexto de los eventos de visualización RUM y los eventos hijos correspondientes con la API setViewContextProperty(key: string, value: any).

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

datadogRum.setViewContextProperty('<CONTEXT_KEY>', '<CONTEXT_VALUE>');

// Code example
datadogRum.setViewContextProperty('activity', {
    hasPaid: true,
    amount: 23.42
});

window.DD_RUM.onReady(function() {
    window.DD_RUM.setViewContextProperty('<CONTEXT_KEY>', '<CONTEXT_VALUE>');
})

// Code example
window.DD_RUM.onReady(function() {
    window.DD_RUM.setViewContextProperty('activity', {
        hasPaid: true,
        amount: 23.42
    });
})

window.DD_RUM && window.DD_RUM.setViewContextProperty('<CONTEXT_KEY>', '<CONTEXT_VALUE>');

// Code example
window.DD_RUM && window.DD_RUM.setViewContextProperty('activity', {
    hasPaid: true,
    amount: 23.42
});

Reemplazar contexto de visualización

Reemplaza el contexto de tus eventos de visualización RUM y los eventos hijos correspondientes con la API setViewContext(context: Context).

import { datadogRum } from '@datadog/browser-rum';
datadogRum.setViewContext({ '<CONTEXT_KEY>': '<CONTEXT_VALUE>' });

// Code example
datadogRum.setViewContext({
    originalUrl: 'shopist.io/department/chairs',
});

window.DD_RUM.onReady(function() {
    window.DD_RUM.setViewContext({ '<CONTEXT_KEY>': '<CONTEXT_VALUE>' });
})

// Code example
window.DD_RUM.onReady(function() {
    window.DD_RUM.setViewContext({
      originalUrl: 'shopist.io/department/chairs',
    })
})

window.DD_RUM &&
    window.DD_RUM.setViewContext({ '<CONTEXT_KEY>': '<CONTEXT_VALUE>' });

// Code example
window.DD_RUM &&
    window.DD_RUM.setViewContext({
        originalUrl: 'shopist.io/department/chairs',
    });

Contexto de error

Adjuntando contexto de error local con dd_context

Al capturar errores, se puede proporcionar contexto adicional en el momento en que se genera un error. En lugar de pasar información extra a través de la API addError(), puedes adjuntar una propiedad dd_context directamente a la instancia de error. El SDK de RUM para navegadores detecta automáticamente esta propiedad y la incorpora al contexto final del evento de error.

const error = new Error('Something went wrong')
error.dd_context = { component: 'Menu', param: 123, }
throw error

Contexto global

Agregar propiedad de contexto global

Después de que se inicializa RUM, agrega contexto adicional a todos los eventos de RUM recopilados de tu aplicación con la API setGlobalContextProperty(key: string, value: any):

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

datadogRum.setGlobalContextProperty('<CONTEXT_KEY>', <CONTEXT_VALUE>);

// Code example
datadogRum.setGlobalContextProperty('activity', {
    hasPaid: true,
    amount: 23.42
});

window.DD_RUM.onReady(function() {
    window.DD_RUM.setGlobalContextProperty('<CONTEXT_KEY>', '<CONTEXT_VALUE>');
})

// Code example
window.DD_RUM.onReady(function() {
    window.DD_RUM.setGlobalContextProperty('activity', {
        hasPaid: true,
        amount: 23.42
    });
})

window.DD_RUM && window.DD_RUM.setGlobalContextProperty('<CONTEXT_KEY>', '<CONTEXT_VALUE>');

// Code example
window.DD_RUM && window.DD_RUM.setGlobalContextProperty('activity', {
    hasPaid: true,
    amount: 23.42
});

Eliminar propiedad de contexto global

Puedes eliminar una propiedad de contexto global definida previamente.

import { datadogRum } from '@datadog/browser-rum';
datadogRum.removeGlobalContextProperty('<CONTEXT_KEY>');

// Code example
datadogRum.removeGlobalContextProperty('codeVersion');

window.DD_RUM.onReady(function() {
    window.DD_RUM.removeGlobalContextProperty('<CONTEXT_KEY>');
})

// Code example
window.DD_RUM.onReady(function() {
    window.DD_RUM.removeGlobalContextProperty('codeVersion');
})

window.DD_RUM &&
    window.DD_RUM.removeGlobalContextProperty('<CONTEXT_KEY>');

// Code example
window.DD_RUM &&
    window.DD_RUM.removeGlobalContextProperty('codeVersion');

Reemplazar contexto global

Reemplaza el contexto predeterminado para todos tus eventos de RUM con la API setGlobalContext(context: Context).

import { datadogRum } from '@datadog/browser-rum';
datadogRum.setGlobalContext({ '<CONTEXT_KEY>': '<CONTEXT_VALUE>' });

// Code example
datadogRum.setGlobalContext({
    codeVersion: 34,
});

window.DD_RUM.onReady(function() {
    window.DD_RUM.setGlobalContext({ '<CONTEXT_KEY>': '<CONTEXT_VALUE>' });
})

// Code example
window.DD_RUM.onReady(function() {
    window.DD_RUM.setGlobalContext({
        codeVersion: 34,
    })
})

window.DD_RUM &&
    window.DD_RUM.setGlobalContext({ '<CONTEXT_KEY>': '<CONTEXT_VALUE>' });

// Code example
window.DD_RUM &&
    window.DD_RUM.setGlobalContext({
        codeVersion: 34,
    });

Limpiar contexto global

Puedes limpiar el contexto global utilizando clearGlobalContext.

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

datadogRum.clearGlobalContext();

window.DD_RUM.onReady(function() {
  window.DD_RUM.clearGlobalContext();
});

window.DD_RUM && window.DD_RUM.clearGlobalContext();

Leer contexto global

Una vez que se inicializa RUM, lee el contexto global con la API getGlobalContext().

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

const context = datadogRum.getGlobalContext();

window.DD_RUM.onReady(function() {
  const context = window.DD_RUM.getGlobalContext();
});

const context = window.DD_RUM && window.DD_RUM.getGlobalContext();

Ciclo de vida de los contextos

Por defecto, el contexto global y el contexto del usuario se almacenan en la memoria de la página actual, lo que significa que no están:

• guardados después de una recarga completa de la página
• compartidos entre diferentes pestañas o ventanas de la misma sesión

Para agregarlos a todos los eventos de la sesión, deben estar adjuntos a cada página.

Contexto interno

Después de que se inicializa el SDK de RUM para navegadores de Datadog, puedes acceder al contexto interno del SDK. Esto proporciona identificadores centrales y metadatos que el SDK utiliza internamente, como IDs de sesión y detalles de la aplicación.

Puedes explorar los siguientes atributos:

Para más información, consulta Datos recopilados por RUM en el navegador.

Ejemplo

{
  application_id : "xxx",
  session_id : "xxx",
  user_action: { id: "xxx" },
  view : {
    id : "xxx",
    referrer : "",
    url: "http://localhost:8080/",
    name: "homepage"
  }
}

Puedes usar opcionalmente el startTime parámetro para obtener el contexto de un momento específico. Si se omite el parámetro, se devuelve el contexto actual.

getInternalContext (startTime?: 'number' | undefined)

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

datadogRum.getInternalContext() // { session_id: "xxxx", application_id: "xxxx" ... }

window.DD_RUM.onReady(function () {
  window.DD_RUM.getInternalContext() // { session_id: "xxxx", application_id: "xxxx" ... }
})

window.DD_RUM && window.DD_RUM.getInternalContext() // { session_id: "xxxx", application_id: "xxxx" ... }

Micro frontend

El SDK de RUM del navegador admite arquitecturas de micro frontend al atribuir eventos a micro frontends específicos utilizando los atributos service y version. Una sola instancia del SDK de RUM se ejecuta a nivel de shell. Los eventos se segmentan por service y version para que los equipos puedan filtrar tableros, establecer alertas y rastrear el rendimiento por micro frontend.

Datadog proporciona dos enfoques para atribuir eventos de RUM a micro frontends:

1. Atribución automática: Utiliza un complemento de construcción que inyecta contexto de código fuente, eliminando el análisis manual de la traza de pila.
2. Atribución manual: Utiliza el beforeSend callback para analizar trazas de pila y extraer información del servicio.

Atribución automática de servicio y versión

Este enfoque utiliza un complemento de construcción para inyectar contexto de código fuente en sus paquetes, que el SDK de RUM lee automáticamente para enriquecer eventos con el service y version correctos.

Requisitos previos y configuraciones soportadas

• Paquetes separados: Cada micro frontend tiene su propio paquete con rutas de archivo distintas, por ejemplo, utilizando federación de módulos.
• Bundler soportado: Utilice un bundler soportado por los complementos de construcción de Datadog.
• SDK de navegador: Versión del SDK de navegador v6.30.1 o superior.

Guía de configuración

Paso 1 - Configure el complemento de construcción para cada micro frontend

En la configuración de construcción de cada micro frontend, habilite la inyección de contexto de código fuente:

const { datadogWebpackPlugin } = require('@datadog/webpack-plugin');

module.exports = {
    plugins: [
        new datadogWebpackPlugin({
            rum: {
                enable: true,
                sourceCodeContext: {
                    service: 'foo-microfrontend',
                    version: process.env.APP_VERSION || '1.0.0'
                }
            }
        })
    ]
};

import { datadogVitePlugin } from '@datadog/vite-plugin';

export default {
    plugins: [
        datadogVitePlugin({
            rum: {
                enable: true,
                sourceCodeContext: {
                    service: 'foo-microfrontend',
                    version: process.env.APP_VERSION || '1.0.0'
                }
            }
        })
    ]
};

const { datadogEsbuildPlugin } = require('@datadog/esbuild-plugin');

require('esbuild').build({
    plugins: [
        datadogEsbuildPlugin({
            rum: {
                enable: true,
                sourceCodeContext: {
                    service: 'foo-microfrontend',
                    version: process.env.APP_VERSION || '1.0.0'
                }
            }
        })
    ]
});

import { datadogRollupPlugin } from '@datadog/rollup-plugin';

export default {
    plugins: [
        datadogRollupPlugin({
            rum: {
                enable: true,
                sourceCodeContext: {
                    service: 'foo-microfrontend',
                    version: process.env.APP_VERSION || '1.0.0'
                }
            }
        })
    ]
};

const { datadogRspackPlugin } = require('@datadog/rspack-plugin');

module.exports = {
    plugins: [
        new datadogRspackPlugin({
            rum: {
                enable: true,
                sourceCodeContext: {
                    service: 'foo-microfrontend',
                    version: process.env.APP_VERSION || '1.0.0'
                }
            }
        })
    ]
};

Paso 2 - Configura el SDK del navegador a nivel de shell

Configura el seguimiento del navegador en tu aplicación de shell (punto de entrada principal). El SDK del navegador enriquece automáticamente los eventos RUM (errores, acciones personalizadas, recursos XHR/Fetch, tareas largas, métricas vitales) con service y version del mapa de contexto.

Paso 3 - Explorar datos de micro frontend en Datadog

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

const SERVICE_REGEX = /some-pathname\/(?<service>\w+)\/(?<version>\w+)\//;

datadogRum.init({
    ...,
    beforeSend: (event, context) => {
        const stack = context?.handlingStack || event?.error?.stack;
        const { service, version } = stack?.match(SERVICE_REGEX)?.groups;

        if (service && version) {
          event.service = service;
          event.version = version;
        }

        return true;
    },
});

const SERVICE_REGEX = /some-pathname\/(?<service>\w+)\/(?<version>\w+)\//;

window.DD_RUM.onReady(function() {
    window.DD_RUM.init({
        ...,
        beforeSend: (event, context) => {
            const stack = context?.handlingStack || event?.error?.stack;
            const { service, version } = stack?.match(SERVICE_REGEX)?.groups;

            if (service && version) {
                event.service = service;
                event.version = version;
            }

            return true;
        },
    });
});

const SERVICE_REGEX = /some-pathname\/(?<service>\w+)\/(?<version>\w+)\//;

window.DD_RUM && window.DD_RUM.init({
    ...,
    beforeSend: (event, context) => {
        const stack = context?.handlingStack || event?.error?.stack;
        const { service, version } = stack?.match(SERVICE_REGEX)?.groups;

        if (service && version) {
          event.service = service;
          event.version = version;
        }

        return true;
    },
});

Limitaciones

Eventos sin un origen atribuido

Algunos eventos no pueden ser atribuidos a un origen porque no tienen una pila de manejo asociada:

• Eventos de acción recolectados automáticamente
• Eventos de recursos distintos a XHR y Fetch
• Eventos de vista recolectados automáticamente
• Violaciones de CORS y CSP

Resolución de mapas del código fuente a través de micro frontends

Cuando una traza de pila contiene marcos de múltiples micro frontends, el evento recibe un único service y version del marco superior (donde se lanzó el error). Los mapas del código fuente se resuelven para el evento bajo ese único servicio, por lo que los marcos de otros micro frontends permanecen minificados, incluso cuando sus mapas del código fuente fueron correctamente subidos bajo su propio service.

Para controlar qué mapas del código fuente de micro frontend se utilizan, usa el enfoque de atribución manual con beforeSend para establecer event.service y event.version. Solo los marcos que pertenecen al micro frontend elegido aparecen sin minificar.

Explora los datos de micro frontend en Datadog

Después de la configuración, el service y version en los eventos RUM identifican qué micro frontend generó cada evento. Usa estos atributos en varios lugares en Datadog:

• Paneles laterales: Los atributos service y version aparecen en la sesión, vista, error, recurso, acción y paneles laterales de tareas largas en el Explorador RUM.
• Tablero de Resumen RUM: Usa el service y version para filtrar en el tablero de Resumen RUM y limitar las métricas de rendimiento a un micro frontend específico.
• Tableros personalizados: Crea tableros usando el service y version para monitorear cada micro frontend de manera independiente.

Las etiquetas service y version que representan cada micro frontend también se pueden encontrar en las siguientes métricas de RUM without Limits:

• rum.measure.error
• rum.measure.operation
• rum.measure.operation.duration

Further reading