Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Activation de la minimisation des traces de pile JavaScript d'erreurs

Lorsque le code JavaScript source de votre application Web est réduit, les traces de la pile d'erreurs peuvent être difficiles à lire. Vous pouvez activer la minimisation des traces de la pile en téléchargeant vos cartes sources sur Amazon S3. CloudWatch RUM récupérera les cartes sources pour faire correspondre les numéros de ligne et de colonne du code source minifié au code source non minifié d'origine. Cela rendra vos suivis d’erreurs plus lisibles et vous aidera à identifier plus facilement l’emplacement de l’erreur dans le code d’origine.

Exigences et syntaxe

Les fichiers de sourçage sont essentiels pour le débogage et le suivi des problèmes dans votre application Web à travers différentes versions. Assurez-vous que chaque version de votre application dispose d’un fichier de sourçage unique. Chaque version doit avoir son propre releaseId unique. Le releaseId doit être une chaîne de 1 à 200 caractères, composée uniquement de lettres, chiffres, traits de soulignement, traits d’union, deux-points, barres obliques et points. Pour ajouter les métadonnées releaseId sous forme de métadonnées aux événements RUM, configurez le client Web CloudWatch RUM.

Les fichiers de sourçage doivent être des fichiers JSON simples respectant la structure définie dans la spécification Source Map V3. Les champs obligatoires sont : version, file, sources, names et mappings.

Assurez-vous que la taille de chaque fichier de sourçage ne dépasse pas 50 Mo. De plus, le service RUM n’extrait au maximum que 50 Mo de fichiers de sourçage par suivi de pile. Si nécessaire, divisez votre code source en plusieurs fragments plus petits. Pour plus d’informations, consultez la section Fractionnement du code avec WebpackJS.

Configuration de votre politique de ressources du compartiment Amazon S3 pour permettre l’accès du service RUM

Assurez-vous que votre compartiment Amazon S3 se trouve dans la même région que votre appMonitor RUM. Configurez votre compartiment Amazon S3 afin de permettre au service RUM d’extraire les fichiers de sourçage. Incluez les clés de contexte globales de condition aws:SourceArn et aws:SourceAccount pour limiter les autorisations du service aux ressources concernées. C’est le moyen le plus efficace de se protéger contre le problème du député confus.

L’exemple ci-dessous montre comment utiliser ces clés de contexte globales aws:SourceArn et aws:SourceAccount dans Amazon S3 pour éviter le problème de confusion d’identité.

JSON

{
    "Version":"2012-10-17",		 	 	 
    "Statement": [
        {
            "Sid": "RUM Service S3 Read Permissions",
            "Effect": "Allow",
            "Principal": {
                "Service": "rum.amazonaws.com"
            },
            "Action": [
                "s3:GetObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::BUCKET_NAME",
                "arn:aws:s3:::BUCKET_NAME/*"
            ],
            "Condition": {
                "StringEquals": {
                    "aws:SourceAccount": "ACCOUNT_ID",
                    "aws:SourceArn": "arn:aws:rum:REGION:ACCOUNT_ID:appmonitor/APP_MONITOR_NAME"
                }
            }
        }
    ]
}

Si vous utilisez des AWS KMS clés pour chiffrer les données, assurez-vous que la politique de ressources de la clé est configurée de la même manière pour inclure aws:SourceArn les clés de contexte de condition aws:SourceAccount globale afin de permettre au service RUM d'accéder aux clés pour récupérer les fichiers de carte source.

JSON

{
    "Version":"2012-10-17",		 	 	 
    "Statement": [
        {
            "Sid": "RUM Service KMS Read Permissions",
            "Effect": "Allow",
            "Principal": {
                "Service": "rum.amazonaws.com"
            },
            "Action": "kms:Decrypt",
            "Resource": "arn:aws:kms:us-east-1:123456789012:key/KEY_ID",
            "Condition": {
                "StringEquals": {
                "aws:SourceAccount": "123456789012",
    "aws:SourceArn": "arn:aws:rum:us-east-1:123456789012/APP_MONITOR_NAME"
                }
            }
        }
    ]
}

Chargement des fichiers de sourçage

Configurez votre JavaScript bundle pour générer des cartes sources lors de la minification. Lorsque vous créez votre application, le bundle crée un répertoire (par exemple, dist) contenant les JavaScript fichiers minifiés et les cartes sources correspondantes. Vous trouverez un exemple ci-dessous.

./dist
    |-index.d5a07c87.js
    |-index.d5a07c87.js.map

Chargez les fichiers de sourçage dans votre compartiment Amazon S3. Les fichiers doivent être placés dans un dossier portant le nom du releaseId. Par exemple, si le nom de votre compartiment est my-application-source-maps et que le releaseId est 2.0.0, alors le fichier de sourçage se trouvera à l’emplacement suivant :

my-application-source-maps
    |-2.0.0
        |-index.d5a07c87.js.map

Pour automatiser le chargement de vos fichiers de sourçage, vous pouvez créer le script bash suivant et l’exécuter dans le cadre de votre processus de compilation.

#!/bin/bash
# Ensure the script is called with required arguments
if [ "$#" -ne 2 ]; then
 echo "Usage: $0 S3_BUCKET_NAME RELEASE_ID"
 exit 1
fi

# Read arguments
S3_BUCKET="$1"
RELEASE_ID="$2"

# Set the path to your build directory
BUILD_DIR="./dist"


# Upload all .map files recursively
 if aws s3 cp "$BUILD_DIR" "s3://$S3_BUCKET/$RELEASE_ID/" --recursive --exclude "*" --include "*.map"; then
    echo "Successfully uploaded all source map files"
else
    echo "Failed to upload source map files"
fi

Configurez ReleaseID dans votre client Web CloudWatch RUM

CloudWatch RUM utilise le fichier configuré releaseId pour déterminer le dossier dans lequel récupérer les fichiers de carte source. Nommez le releaseId avec le même nom que le dossier contenant vos fichiers de sourçage. Si vous avez utilisé le script bash fourni ci-dessus ou un script similaire, le script releaseId configuré doit être le même que celui configuré dans votre client Web CloudWatch RUM. Vous devez utiliser la version 1.21.0 ou ultérieure du client Web CloudWatch RUM.

import { AwsRum, AwsRumConfig } from "aws-rum-web";

try {
    const config: AwsRumConfig = {
        sessionSampleRate: 1,
        endpoint: "https://dataplane.rum.us-west-2.amazonaws.com",
        telemetries: ["performance", "errors", "http"],
        allowCookies: true,
        releaseId: "RELEASE_ID", //Add this
    };

    const APPLICATION_ID: string = "APP_MONITOR_ID";
    const APPLICATION_VERSION: string = "1.0.0";
    const APPLICATION_REGION: string = "us-west-2";

    new AwsRum(APPLICATION_ID, APPLICATION_VERSION, APPLICATION_REGION, config);
} catch (error: any) {
    // Ignore errors thrown during CloudWatch RUM web client initialization
}

Activation CloudWatch du moniteur d'applications RUM pour minimiser les traces de stack JavaScript

Pour minimiser les traces de JavaScript stack, définissez l' SourceMap état du moniteur de l'application sur. ENABLED Indiquez l’URI Amazon S3 du compartiment ou du dossier contenant tous les fichiers de sourçage de votre moniteur d’application.

Si les fichiers de sourçage sont stockés directement dans le compartiment principal (et non dans un sous-dossier), l’URI Amazon S3 doit être au format Amazon S3://BUCKET_NAME. Dans ce cas, les fichiers de sourçage doivent se trouver à l’emplacement suivant.

BUCKET_NAME
    |- RELEASE_ID
        |-index.d5a07c87.js.map

Si le répertoire enfant est la racine, l’URI Amazon S3 doit être au format Amazon S3://BUCKET_NAME/DIRECTORY. Dans ce cas, les fichiers de sourçage doivent se trouver à l’emplacement suivant.

BUCKET_NAME
    |- DIRECTORY
        |-RELEASE_ID
            |-index.d5a07c87.js.map

Affichage des suivis de pile déminifiées dans la console RUM

Après avoir chargé vos cartes sources sur Amazon S3, activé les cartes sources sur le moniteur de votre application RUM et déployé votre application Web avec le client Web releaseId configuré dans le client Web CloudWatch RUM, sélectionnez Events dans la console RUM. Cet onglet affiche les données brutes des événements RUM. Filtrez selon le type d’événement d’erreur JS et affichez le dernier événement d’erreur JS. Vous verrez le suivi de pile déminifiée dans le nouveau champ event_details.unminifiedStack, disponible uniquement pour les événements ingérés après l’activation de cette fonctionnalité.

Afficher des traces de pile non minimisées dans les journaux CloudWatch

Activez le stockage des événements RUM dans CloudWatch les journaux en activant le stockage des données. Une fois cette option activée, vous pouvez rechercher le nouveau champ event_details.unminifiedStack. Cela vous permet d'analyser les tendances et de relier les problèmes rencontrés au cours de plusieurs sessions à l'aide de requêtes CloudWatch Logs.

Résolution des problèmes liés aux fichiers de sourçage

CloudWatch RUM fournit des métriques prêtes à l'emploi pour résoudre les problèmes de configuration de votre carte source. Ces métriques sont publiées dans l'espace de noms de métrique nommé AWS/RUM. Les métriques suivantes sont publiées avec une dimension application_name. La valeur de cette dimension est le nom du moniteur d'application. Ces métriques sont également publiées avec une dimension aws:releaseId. La valeur de cette dimension est celle releaseId associée à l'événement JavaScript d'erreur.

CloudWatch RUM peut ne pas déminifier une ligne dans le stack trace pour diverses raisons, notamment, mais sans s'y limiter :