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 améliorera la lisibilité de vos traces de pile d'erreurs et aidera à identifier l'emplacement de l'erreur dans le code source d'origine.

Exigences et syntaxe

Les cartes sources sont cruciales pour le débogage et le suivi des problèmes de votre application Web dans les différentes versions. Assurez-vous que chaque version de l'application Web possède une carte source unique. Chaque version doit avoir son propre ReleaseID unique. Un ReleaseID doit être une chaîne de 1 à 200 caractères et ne peut contenir que des lettres, des chiffres, des traits de soulignement, des tirets, des deux-points, des barres obliques et des 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 cartes sources sont censées être des fichiers JSON simples suivant la structure définie par la spécification Source Map V3. Les champs obligatoires sont les suivants : versionfile,sources,names, etmappings.

Assurez-vous que la taille de chaque carte source ne dépasse pas la limite de 50 Mo. En outre, le service RUM ne récupérera que 50 Mo de cartes sources par trace de pile. Si nécessaire, divisez le code source en plusieurs petits morceaux. Pour plus d'informations, voir Division du code avec WebpackJS.

Configurez la politique de ressources de votre compartiment Amazon S3 pour autoriser l'accès au service RUM

Assurez-vous que votre compartiment Amazon S3 se trouve dans la même région que votre RUM AppMonitor. Configurez votre compartiment Amazon S3 pour autoriser l'accès au service RUM pour récupérer les fichiers de carte source. Incluez les clés de contexte de condition aws:SourceAccount globale aws:SourceArn et les clés contextuelles pour limiter les autorisations du service sur la ressource. C'est le moyen le plus efficace de se protéger contre le problème du député confus.

L'exemple suivant montre comment vous pouvez utiliser les clés de contexte de condition aws:SourceAccount globale aws:SourceArn et les clés de contexte dans Amazon S3 pour éviter le problème de confusion des adjoints.

{
    "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.

{
    "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:REGION:ACCOUNT_ID:key/KEY_ID",
            "Condition": {
                "StringEquals": {
                    "aws:SourceAccount": "ACCOUNT_ID",
                    "aws:SourceArn": "arn:aws:rum:REGION:ACCOUNT_ID/APP_MONITOR_NAME"
                }
            }
        }
    ]
}

Télécharger des cartes sources

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

Téléchargez les fichiers de carte source dans votre compartiment Amazon S3. Les fichiers doivent se trouver dans un dossier portant le releaseId nom. Par exemple, si le nom de mon compartiment releaseId est 2.0.0, le fichier de carte source se trouve à l'emplacement suivant : my-application-source-maps

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

Pour automatiser le téléchargement de vos cartes sources, vous pouvez créer le script bash suivant et l'exécuter dans le cadre de votre processus de génération.

#!/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 releaseId le même nom que le dossier de vos fichiers de carte source. 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
}

Activer le moniteur d'applications CloudWatch RUM pour minimiser les traces de stack JavaScript

Pour minimiser les traces de JavaScript stack, réglez le SourceMap statut du moniteur de l'application sur. ENABLED Fournissez l'URI Amazon S3 au compartiment ou au dossier contenant toutes les cartes sources pour le moniteur de votre application.

Lorsque vous stockez des cartes sources directement dans le compartiment principal (et non dans un sous-dossier), l'URI Amazon S3 doit être formatée comme suit. Amazon S3://BUCKET_NAME Dans ce cas, les fichiers de carte source doivent se trouver à l'emplacement suivant.

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

Lorsqu'un répertoire enfant est la racine, l'URI Amazon S3 doit être formaté comme Amazon S3://BUCKET_NAME/DIRECTORY suit. Dans ce cas, les fichiers de carte source doivent se trouver à l'emplacement suivant.

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

Afficher des traces de stack non minimisé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 de l'événement RUM. Filtrez par type d'événement d'erreur JS et visualisez le dernier événement d'erreur JS. Vous verrez la trace non réduite de la pile dans le nouveau event_details.unminifiedStack champ pour les événements ingérés après l'activation de la 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 activé, vous pouvez effectuer une recherche dans 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 cartes sources

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. Les statistiques sont également publiées avec une aws:releaseId dimension. 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 :