Aperçu

Vous pouvez modifier les données et le contexte collectés par la fonctionnalité RUM de diverses façons afin de mieux répondre à vos besoins. Par exemple :

• Protection des données sensibles telles que les informations personnellement identifiables.
• Connexion d'une session utilisateur avec votre identification interne de cet utilisateur, pour aider au support.
• Réduction de la quantité de données RUM que vous collectez, en échantillonnant les données.
• Fournir plus de contexte que ce que les attributs par défaut fournissent sur l'origine des données.

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');

Pour en savoir plus, consultez la section Surveillance Browser RUM.

Enrichir et contrôler les données RUM

Le SDK RUM Browser capture les événements RUM et remplit leurs principaux attributs. La fonction de rappel beforeSend vous donne accès à chaque événement collecté par le SDK RUM Browser avant qu'il ne soit envoyé à Datadog.

L'interception d'événements RUM vous permet d'effectuer les opérations suivantes :

• Enrichissez vos événements RUM avec des attributs de contexte supplémentaires
• Modifiez vos événements RUM pour altérer leur contenu ou masquer des séquences sensibles (voir la liste des propriétés modifiables)
• Éliminez les événements RUM sélectionnés

function beforeSend(event, context)

Enrichissez les événements RUM

Avec les attributs ajoutés via le API de Contexte Global ou la collecte de données des Drapeaux de Fonctionnalité, vous pouvez ajouter des attributs de contexte supplémentaires à l'événement. Par exemple, taguez vos événements de ressources RUM avec des données extraites d'un objet de réponse 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
      },
      ...
   });

Lorsqu'un utilisateur appartient à plusieurs équipes, ajoutez des paires key-value supplémentaires dans vos appels de l'API de contexte global.

Le SDK RUM Browser ignore les attributs ajoutés en dehors de event.context.

Enrichissez les événements RUM avec des drapeaux de fonctionnalité

Vous pouvez enrichir vos données d'événements RUM avec des drapeaux de fonctionnalité pour obtenir un contexte et une visibilité supplémentaires sur la surveillance des performances. Cela vous permet de déterminer quels utilisateurs bénéficient d'une expérience utilisateur spécifique et si cela affecte négativement la performance de l'utilisateur.

Modifier le contenu d'un événement RUM

Par exemple, pour censurer les adresses e-mail de vos URL d'applications 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")
      },
      ...
   });

Vous pouvez modifier les propriétés d'événement suivantes :

Le SDK RUM Browser ignore les modifications apportées aux propriétés des événements non listées ci-dessus. Pour plus d'informations sur les propriétés des événements, consultez le dépôt GitHub du SDK RUM Browser.

Remarque : Contrairement à d'autres événements, les événements de vue sont envoyés plusieurs fois à Datadog pour refléter les mises à jour survenant pendant leur cycle de vie. Une mise à jour d'un événement de vue précédent peut encore être envoyée pendant qu'une nouvelle vue est active. Datadog recommande de garder à l'esprit ce comportement lors de la modification du contenu d'un événement de vue.

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)
}

Écarter un événement RUM

Avec l'beforeSend API, écartez un événement RUM en retournant 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
            }
            ...
        },
        ...
    });

Remarque : Les événements de vue ne peuvent pas être écartés.

Session utilisateur

L'ajout d’informations sur l’utilisateur à vos sessions RUM vous aide :

• Suivez le parcours d'un utilisateur donné
• Sachez quels utilisateurs sont les plus impactés par les erreurs
• Surveillez les performances de vos utilisateurs les plus importants

Identifier la session de l'utilisateur

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

Accéder à la session de l'utilisateur

datadogRum.getUser()

datadogRum.getUser()

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

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

Ajouter/Remplacer la propriété de session de l'utilisateur

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')

Supprimer la propriété de session de l'utilisateur

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')

Effacer la propriété de session de l'utilisateur

datadogRum.clearUser()

datadogRum.clearUser()

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

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

Compte

Pour regrouper les utilisateurs en différents ensembles, utilisez le concept de compte.

Les attributs suivants sont disponibles :

Identifier le compte

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

Accéder au compte

datadogRum.getAccount()

datadogRum.getAccount()

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

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

Ajouter/Remplacer la propriété du compte

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')

Supprimer la propriété du compte

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')

Effacer les propriétés du compte

datadogRum.clearAccount()

datadogRum.clearAccount()

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

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

Échantillonnage

Par défaut, aucun échantillonnage n'est appliqué au nombre de sessions collectées. Pour appliquer un échantillonnage relatif (en pourcentage) au nombre de sessions collectées, utilisez le paramètre sessionSampleRate lors de l'initialisation de RUM.

L'exemple suivant recueille seulement 90 % de toutes les sessions pour une application RUM donnée :

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

Lorsqu'une session est exclue en raison d'un échantillonnage, aucune vue de page ni aucune donnée de télémétrie associée à cette session ne sont recueillies.

Consentement au suivi des utilisateurs

Pour être conforme au RGPD, à la CCPA et à des réglementations similaires, le SDK RUM Browser vous permet de fournir la valeur de consentement au suivi lors de l'initialisation. Pour plus d'informations sur le consentement au suivi, voir Sécurité des données.

Le paramètre d'initialisation trackingConsent peut être l'une des valeurs suivantes :

1. "granted" (défaut) : Le SDK RUM Browser commence à collecter des données et les envoie à Datadog.
2. "not-granted" : Le SDK RUM Browser ne collecte aucune donnée.

Pour changer la valeur de consentement au suivi après l'initialisation du SDK RUM Browser, utilisez l'appel API setTrackingConsent(). Le SDK RUM Browser change son comportement en fonction de la nouvelle valeur :

• lorsqu'il est changé de "granted" à "not-granted", la session RUM est arrêtée, les données ne sont plus envoyées à Datadog.
• lorsqu'il est changé de "not-granted" à "granted", une nouvelle session RUM est créée si aucune session précédente n'est active, et la collecte de données reprend.

Cet état n'est pas synchronisé entre les onglets ni conservé entre les navigations. Il est de votre responsabilité de fournir la décision de l'utilisateur lors de l'initialisation du SDK RUM Browser ou en utilisant setTrackingConsent().

Lorsque setTrackingConsent() est utilisé avant init(), la valeur fournie prime sur le paramètre d'initialisation.

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');
});

Voir le contexte

À partir de version 5.28.0, le contexte des événements de vue est modifiable. Le contexte peut être ajouté uniquement à la vue actuelle et remplit ses événements enfants (tels que action, error et timing) avec les fonctions startView, setViewContext et setViewContextProperty.

Démarrer la vue avec le contexte

Définissez éventuellement le contexte lors du démarrage d'une vue avec les options startView.

Ajouter le contexte de vue

Enrichissez ou modifiez le contexte des événements de vue RUM et des événements enfants correspondants avec l'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
});

Remplacer le contexte de vue

Remplacez le contexte de vos événements de vue RUM et des événements enfants correspondants avec l'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',
    });

Contexte d'erreur

Attacher le contexte d'erreur local avec dd_context

Lors de la capture d'erreurs, un contexte supplémentaire peut être fourni au moment où une erreur est générée. Au lieu de passer des informations supplémentaires par l'API addError(), vous pouvez attacher une propriété dd_context directement à l'instance d'erreur. Le SDK RUM Browser détecte automatiquement cette propriété et l'intègre dans le contexte final de l'événement d'erreur.

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

Contexte global

Ajouter la propriété de contexte global

Après l'initialisation de RUM, ajoutez un contexte supplémentaire à tous les événements RUM collectés depuis votre application avec l'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
});

Supprimer la propriété de contexte global

Vous pouvez supprimer une propriété de contexte global précédemment définie.

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');

Remplacer le contexte global

Remplacez le contexte par défaut de tous vos événements RUM avec l'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,
    });

Effacer le contexte global

Vous pouvez effacer le contexte global en utilisant 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();

Lire le contexte global

Une fois RUM initialisé, lisez le contexte global avec l'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();

Cycle de vie des contextes

Par défaut, le contexte global et le contexte utilisateur sont stockés dans la mémoire de la page actuelle, ce qui signifie qu'ils ne sont pas :

• conservé après un rechargement complet de la page
• partagé entre différents onglets ou fenêtres de la même session

Pour les ajouter à tous les événements de la session, ils doivent être joints à chaque page.

Contexte interne

Une fois le SDK Browser RUM Datadog initialisé, vous pouvez accéder au contexte interne du SDK. Cela fournit des identifiants et des métadonnées de base que le SDK utilise en interne, tels que les ID de session et les détails de l'application.

Vous pouvez analyser les attributs suivants :

Pour en savoir plus, consultez la section Données RUM recueillies (Browser).

Exemple

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

Vous pouvez optionnellement utiliser le paramètre startTime pour obtenir le contexte d'un moment spécifique. Si le paramètre est omis, le contexte actuel est retourné.

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

Le SDK RUM Browser prend en charge les architectures de micro frontend en attribuant des événements à des micro frontends spécifiques à l'aide des attributs service et version. Une seule instance du SDK RUM fonctionne au niveau du shell. Les événements sont segmentés par service et version afin que les équipes puissent filtrer les tableaux de bord, définir des alertes et suivre les performances par micro frontend.

Datadog fournit deux approches pour attribuer des événements RUM aux micro frontends :

1. Attribution automatique : Utilise un plugin de construction qui injecte le contexte du code source, éliminant ainsi l'analyse manuelle des traces de pile.
2. Attribution manuelle : Utilise la fonction de rappel beforeSend pour analyser les traces de pile et extraire les informations sur le service.

Attribution automatique des services et des versions

Cette approche utilise un plugin de construction pour injecter le contexte du code source dans vos bundles, que le SDK RUM lit automatiquement pour enrichir les événements avec les service et version corrects.

Prérequis et configurations prises en charge

• Bundles séparés : Chaque micro frontend a son propre bundle avec des chemins de fichiers distincts, par exemple, en utilisant module federation.
• Bundler pris en charge : Utilisez un bundler pris en charge par les plugins de build Datadog.
• Browser SDK : Version du Browser SDK v6.30.1 ou supérieure.

Guide de configuration

Étape 1 - Configurez le plugin de construction pour chaque micro frontend

Dans la configuration de construction de chaque micro frontend, activez l'injection du contexte du code source :

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'
                }
            }
        })
    ]
};

Étape 2 - Configurez le Browser SDK au niveau du shell

Configurez la surveillance du navigateur dans votre application shell (point d'entrée principal). Le Browser SDK enrichit automatiquement les événements RUM (erreurs, actions personnalisées, ressources XHR/Fetch, tâches longues, indicateurs) avec service et version à partir de la carte de contexte.

Étape 3 - Explorer les données des micro frontends dans 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;
    },
});

Limitations

Événements sans origine attribuée

Certains événements ne peuvent pas être attribués à une origine car ils n'ont pas de pile de gestion associée :

• Événements d'action collectés automatiquement
• Événements de ressources autres que XHR et Fetch
• Événements de vue collectés automatiquement
• Violations CORS et CSP

Résolution de la carte source à travers les micro frontends

Lorsqu'une trace de pile contient des frames de plusieurs micro frontends, l'événement reçoit un seul service et version du frame le plus haut (où l'erreur a été lancée). Les cartes sources sont résolues pour l'événement sous ce service unique, donc les frames d'autres micro frontends restent minifiées, même lorsque leurs cartes sources ont été correctement téléchargées sous leur propre service.

Pour contrôler quelles cartes sources de micro frontend sont utilisées, utilisez l'approche d'attribution manuelle avec beforeSend pour définir event.service et event.version. Seules les frames appartenant au micro frontend choisi sont déminifiées.

Explorez les données des micro frontends dans Datadog

Après la configuration, les service et version sur les événements RUM identifient quel micro frontend a généré chaque événement. Utilisez ces attributs à plusieurs endroits dans Datadog :

• Panneaux latéraux : Les attributs service et version apparaissent dans les panneaux latéraux de session, de vue, d'erreur, de ressource, d'action et de tâche longue dans l'Explorateur RUM.
• Tableau de bord RUM Summary : Utilisez les service et version pour filtrer dans le tableau de bord RUM Summary afin de restreindre les métriques de performance à un micro frontend spécifique.
• Tableaux de bord personnalisés : Créez des tableaux de bord en utilisant les service et version pour surveiller chaque micro frontend de manière indépendante.

Les balises service et version représentant chaque micro frontend peuvent également être trouvées dans les métriques suivantes : RUM without Limits

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

Further reading