🐶 DataDog Pt. 5 – Avancé (RUM & Sécurité)

5.1 RUM (Real User Monitoring) – Le Pilier Frontend

Jusqu'à présent (M-T-L), nous avons monitoré le **Backend** (serveurs, APIs, DBs). Mais que se passe-t-il si le backend répond en 50ms, mais que le JavaScript du client prend 5 secondes à s'exécuter ? Pour le serveur, tout va bien. Pour l'utilisateur, l'application est inutilisable.

Le RUM (Real User Monitoring) capture la performance et les erreurs **telles que vécues par l'utilisateur final dans son navigateur** (ou son application mobile).

5.2 RUM (Frontend) vs APM (Backend)

C'est la distinction "Client" vs "Serveur".

Critère	APM (Application Performance Monitoring)	RUM (Real User Monitoring)
Où ?	Côté Serveur (Python, Java, Go...).	Côté Client (Navigateur, Mobile).
Installation	`dd-trace-py`, `dd-java-agent.jar`.	`@datadog/browser-rum` (NPM) ou `<script>` (CDN).
Ce qu'il mesure	Latence du serveur, requêtes DB, exceptions backend.	Temps de chargement de page (LCP), erreurs JS, clics utilisateur.
Question	"Pourquoi mon API `/checkout` est-elle lente ?"	"Pourquoi le paiement (clic) est-il lent pour cet utilisateur ?"

5.3 RUM : Installation & Setup (JS)

Le RUM est installé en ajoutant un snippet JavaScript au <head> de votre application (ou via npm). La configuration (clientToken, applicationId) est fournie par l'UI de DataDog.

1. CDN (`<script>`)

À placer TOUT EN HAUT du <head> (pour capturer les erreurs de chargement).

<html>
<head>
    <script>
    (function(h,o,u,n,d) { ... })(window,document,'script','data.datadoghq.eu','DATADOG_RUM_GOLBAL_OBJECT');
    
    window.DATADOG_RUM.init({
        applicationId: 'VOTRE_APP_ID',
        clientToken: 'VOTRE_CLIENT_TOKEN',
        site: 'datadoghq.eu',
        
        // (Tags cruciaux pour la corrélation !)
        service: 'frontend-ecommerce-web',
        env: 'production',
        version: '1.5.2',
        
        // (Capture les requêtes (fetch/XHR) pour la corrélation APM)
        trackInteractions: true,
        trackResources: true,
        defaultPrivacyLevel: 'mask-user-input' // (Masque les inputs)
    });
    
    // (Optionnel: enregistre la session)
    window.DATADOG_RUM.startSessionReplayRecording();
    </script>
    
    <title>Mon App</title>
</head>
...

2. NPM (React/Vue/Angular)

À importer en premier dans votre point d'entrée (index.js ou main.ts).

# 1. Installer
npm install @datadog/browser-rum

# 2. Initialiser (index.js)
import { datadogRum } from '@datadog/browser-rum';

datadogRum.init({
    applicationId: 'VOTRE_APP_ID',
    clientToken: 'VOTRE_CLIENT_TOKEN',
    site: 'datadoghq.eu',
    
    // (Tags cruciaux)
    service: 'frontend-ecommerce-web',
    env: 'production',
    version: '1.5.2',
    
    trackInteractions: true,
    trackResources: true,
    defaultPrivacyLevel: 'mask-user-input'
});
  
datadogRum.startSessionReplayRecording();

5.4 RUM : Données Collectées

Collecte	Description	Exemple de question
Vues (Pages)	Temps de chargement de la page (Core Web Vitals : LCP, FID, CLS).	"Le LCP (Largest Contentful Paint) est-il lent ( > 2.5s) pour les utilisateurs sur Chrome Mobile ?"
Ressources	Temps de chargement des assets (JS, CSS, Images, `fetch`/XHR).	"Le `fetch` vers `/api/v1/products` est-il lent ?"
Actions (Interactions)	Capture les clics utilisateur (ex: "Clic sur `#btn-checkout`").	"Combien d'utilisateurs cliquent sur 'Ajouter au Panier' ?"
Erreurs (Frontend)	Capture les erreurs JavaScript (`window.onerror`).	"`TypeError: 'price' of undefined` arrive 1000x/h sur Safari."

5.5 RUM : Session Replay (Rejeu de Session)

Le Session Replay est une fonctionnalité (optionnelle) du RUM qui enregistre (comme une vidéo) la session de l'utilisateur (le DOM, les mouvements de souris, les clics).

C'est un outil de "dépannage" visuel.

Cas d'usage : Vous filtrez les sessions RUM qui ont rencontré une erreur JS (ex: TypeError). Vous trouvez un utilisateur. Vous cliquez sur "Watch Replay". Vous voyez l'enregistrement vidéo de l'utilisateur (ex: il a cliqué sur "A", puis "B", puis l'erreur s'est produite).

(DataDog masque automatiquement les champs (password, cc-number) pour la confidentialité (defaultPrivacyLevel: 'mask-user-input')).

5.6 🔗 Corrélation RUM <-> APM (Le "Full Stack Trace")

C'est le "Saint Graal" de l'observabilité. Si le RUM (5.3) et l'APM (Partie 3) sont configurés (avec les bons service/env tags) :

Le SDK RUM (JS) détecte un appel fetch('/api/checkout').
Il **injecte** des headers HTTP (ex: x-datadog-trace-id) dans cette requête.
Le serveur (Python/Java), qui écoute avec dd-trace (APM), reçoit ces headers.
L'APM continue la Trace (commencée par RUM) sur le backend (ex: Spans DB).

Résultat : Vous obtenez un **Flame Graph unique (Full Stack)** qui montre le temps passé dans le Navigateur (RUM) ET le temps passé dans le Backend (APM) pour la MÊME requête.

(Trace ID: 987654)
|
+--- [RUM] Clic sur #btn-checkout (10ms)
|
+--- [RUM] Requête (fetch) /api/checkout (1500ms)
|    |
|    +--- [APM] Service: api-python (1450ms)
|    |    |
|    |    +--- [APM] Span: db-query (SELECT * FROM users...) (1200ms)
|    |    |
|    |    +--- [APM] Span: api-stripe.charge (200ms)
|    |
|    +--- [APM] ... (Retour)
|
+--- [RUM] Rendu DOM (50ms)

5.7 Sécurité : Vue d'ensemble (DevSecOps)

L'argument de DataDog est : "Vous envoyez déjà tous vos Logs (Pilier 3), toutes vos Traces (Pilier 2) et toutes vos Métriques (Pilier 1) chez nous. Pourquoi les envoyer (et payer) à un autre outil de sécurité (SIEM) ?"

DataDog analyse ces 3 piliers (en temps réel) avec des règles de sécurité.

Diagramme : La Couverture de Sécurité DataDog

+-------------------------+
| Utilisateur (Navigateur)|
| (RUM - Détection CSRF)  |
+-------------------------+
      | (Requête HTTP)
      ▼
+-------------------------+
| Cloud (AWS/GCP/Azure)   | (CSPM - Scan de la Posture)
| (Ex: Load Balancer)     |
+-------------------------+
      |
      ▼
+-------------------------+
| Hôte (VM / Nœud K8s)    | (CWS - Monitoring Kernel / Fichiers)
+-------------------------+
      |
      ▼
+-------------------------+
| Application (Python/Java)|(ASM - Détection Injection SQL)
| (APM / Traces)          |
+-------------------------+
      | (Requête DB)
      ▼
+-------------------------+
| Base de Données         |
+-------------------------+

(Partout sur le côté)
+-------------------------+
| Logs (SIEM)             | (Analyse des logs de tous les composants)
+-------------------------+

5.8 Sécurité : SIEM & CSPM

SIEM (Security Information and Event Management)

Basé sur : Pilier 3 (Logs).

Le SIEM scanne **tous** vos logs ingérés (Firewall, NGINX, Auth0, Logs applicatifs) à la recherche de "patterns" d'attaque (ex: "Brute force login", "SSH depuis IP suspecte", "Scan de ports").

Exemple de détection : @usr.id:bob a eu 50 échecs de connexion (status:error) en 1 minute depuis 30 IPs différentes (@network.client.ip). -> Alerte de Brute Force.

CSPM (Cloud Security Posture Management)

Basé sur : Intégrations Cloud (API). (Agentless).

Le CSPM scanne la **configuration** de vos comptes Cloud (AWS, GCP, Azure) à la recherche de "mauvaises pratiques" (CIS Benchmarks).

Exemple de détection : "Alerte : Le Security Group sg-1234 (tag: env:prod) autorise 0.0.0.0/0 (Internet) sur le port 22 (SSH)."

5.9 Sécurité : CWS & ASM

CWS (Cloud Workload Security)

Basé sur : Pilier 1 (Agent).

Le CWS monitore l'activité **au niveau de l'hôte (kernel)** (via l'Agent) pour détecter des comportements suspects *en temps réel*.

C'est de la FIM (File Integrity Monitoring) et de la détection d'intrusion.

Exemple de détection : "Alerte : Le processus /usr/bin/nginx (service:frontend-web) a modifié le fichier /etc/passwd." (Comportement anormal).

ASM (Application Security Management)

Basé sur : Pilier 2 (APM / Traces).

C'est le produit le plus "DevSecOps". La librairie APM (dd-trace-py) inspecte les *données (payloads)* des Spans (ex: requêtes HTTP, requêtes SQL) à la recherche d'attaques (type OWASP Top 10).

Exemple de détection (SQL Injection) : L'APM voit une requête (Trace) GET /api/users?id=123' OR 1=1;. L'ASM (intégré à l'APM) détecte le pattern "SQL Injection" et bloque la requête *avant* qu'elle n'atteigne la DB.

🐶 Partie 5 : Produits Avancés (RUM & Sécurité)

RUM : Vue d'ensemble

RUM vs APM (Le "Full Stack")

RUM : Installation (JS)

RUM : Données Collectées

RUM : Session Replay

🔗 Corrélation RUM <-> APM

Sécurité : Vue d'ensemble

Sécurité : SIEM & CSPM

Sécurité : CWS & ASM