Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Aktivierung der Entminimierung von JavaScript Error-Stack-Traces

Wenn der JavaScript Quellcode Ihrer Webanwendung minimiert ist, kann es schwierig sein, Fehler-Stack-Traces zu lesen. Sie können die Entminimierung der Stack-Traces aktivieren, indem Sie Ihre Quellzuordnungen auf Amazon S3 hochladen. CloudWatch RUM ruft die Quellzuordnungen ab, um die Zeilen- und Spaltennummern im minimierten Quellcode wieder dem ursprünglichen, nicht minimierten Quellcode zuzuordnen. Dies verbessert die Lesbarkeit Ihrer Fehler-Stack-Traces und hilft dabei, den Ort des Fehlers im ursprünglichen Quellcode zu identifizieren.

Anforderungen und Syntax

Quellzuordnungen sind entscheidend für das Debuggen und Nachverfolgen von Problemen in Ihrer Webanwendung in verschiedenen Versionen. Stellen Sie sicher, dass jede Webanwendungsversion über eine eindeutige Quellenzuweisung verfügt. Jede Version sollte eine eigene eindeutige Release-ID haben. Eine ReleaseID muss eine Zeichenfolge mit einer Länge zwischen 1 und 200 Zeichen sein und darf nur Buchstaben, Zahlen, Unterstriche, Bindestriche, Doppelpunkte, Schrägstriche und Punkte enthalten. Um die AS-Metadaten zu RUM-Ereignissen hinzuzufügen, konfigurieren Sie den RUM-Webclient. releaseId CloudWatch

Es wird erwartet, dass es sich bei den Quellzuordnungen um einfache JSON-Dateien handelt, die der in der Source Map V3-Spezifikation definierten Struktur folgen. Die erforderlichen Felder sind: versionfile,sources,names, undmappings.

Stellen Sie sicher, dass die Größe der einzelnen Quellzuordnungen den Grenzwert von 50 MB nicht überschreitet. Darüber hinaus ruft der RUM-Service nur bis zu 50 MB an Quellzuordnungen pro Stack-Trace ab. Teilen Sie den Quellcode bei Bedarf in mehrere kleinere Teile auf. Weitere Informationen finden Sie unter Code-Splitting mit WebpackJS.

Konfigurieren Sie Ihre Amazon S3 S3-Bucket-Ressourcenrichtlinie, um den Zugriff auf den RUM-Service zu ermöglichen

Stellen Sie sicher, dass sich Ihr Amazon S3 S3-Bucket in derselben Region wie Ihr RUM AppMonitor befindet. Konfigurieren Sie Ihren Amazon S3 S3-Bucket so, dass der RUM-Service Zugriff auf das Abrufen von Quellzuordnungsdateien gewährt. Fügen Sie die Kontextschlüssel aws:SourceArn und die aws:SourceAccount globalen Bedingungsschlüssel hinzu, um die Berechtigungen des Dienstes auf die Ressource zu beschränken. Dies ist der effektivste Weg, um sich vor dem verwirrtes Stellvertreterproblem zu schützen.

Das folgende Beispiel zeigt, wie Sie die Kontextschlüssel aws:SourceArn und die aws:SourceAccount globalen Bedingungsschlüssel in Amazon S3 verwenden können, um das Problem des verwirrten Stellvertreters zu verhindern.

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"
                }
            }
        }
    ]
}

Wenn Sie AWS KMS Schlüssel zum Verschlüsseln der Daten verwenden, stellen Sie sicher, dass die Ressourcenrichtlinie des Schlüssels ähnlich konfiguriert ist, sodass sie die Kontextschlüssel aws:SourceArn und die aws:SourceAccount globalen Bedingungsschlüssel enthält, damit der RUM-Service Zugriff darauf erhält, die Schlüssel zum Abrufen der Quellzuordnungsdateien zu verwenden.

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

Laden Sie Quellkarten hoch

Konfigurieren Sie Ihr JavaScript Bundle so, dass bei der Minimierung Quellzuordnungen generiert werden. Wenn Sie Ihre Anwendung erstellen, erstellt das Bundle ein Verzeichnis (z. B. dist), das die minimierten JavaScript Dateien und die entsprechenden Quellzuordnungen enthält. Ein Beispiel finden Sie unten.

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

Laden Sie die Quellzuordnungsdateien in Ihren Amazon S3 S3-Bucket hoch. Die Dateien sollten sich in einem Ordner mit releaseId dem Namen befinden. Wenn mein Bucket-Name beispielsweise 2.0.0 lautet my-application-source-maps und der releaseId ist, dann befindet sich die Quellzuordnungsdatei am folgenden Speicherort:

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

Um das Hochladen Ihrer Quellzuordnungen zu automatisieren, können Sie das folgende Bash-Skript erstellen und es als Teil Ihres Build-Prozesses ausführen.

#!/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

Konfigurieren Sie ReleaseID in Ihrem RUM-Webclient CloudWatch

CloudWatch RUM verwendet die KonfigurationreleaseId, um den Ordner zum Abrufen der Quellzuordnungsdateien zu ermitteln. Benennen Sie releaseId den gleichen Namen wie Ihr Ordner mit den Quellzuordnungsdateien. Wenn Sie das oben angegebene Bash-Skript oder ein ähnliches verwendet haben, sollte das im Skript releaseId konfigurierte Skript mit dem in Ihrem CloudWatch RUM-Webclient konfigurierten identisch sein. Sie müssen Version 1.21.0 oder höher des CloudWatch RUM-Webclients verwenden.

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
}

CloudWatch RUM-App-Monitor aktivieren, um Stack-Traces zu deminifizieren JavaScript

Um die JavaScript Stack-Traces zu deminifizieren, setzen Sie den Status des App-Monitors auf. SourceMap ENABLED Geben Sie den Amazon S3 S3-URI für den Bucket oder Ordner an, der alle Quellzuordnungen für Ihren App-Monitor enthält.

Wenn Quellzuordnungen direkt im Haupt-Bucket (nicht in einem Unterordner) gespeichert werden, sollte der Amazon S3 S3-URI wie folgt formatiert werden. Amazon S3://BUCKET_NAME In diesem Fall sollten sich die Quellzuordnungsdateien am folgenden Speicherort befinden.

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

Wenn ein untergeordnetes Verzeichnis das Stammverzeichnis ist, sollte der Amazon S3 S3-URI als Amazon S3://BUCKET_NAME/DIRECTORY formatiert werden. In diesem Fall sollten sich die Quellzuordnungsdateien am folgenden Speicherort befinden.

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

Unminifizierte Stack-Traces in der RUM-Konsole anzeigen

Nachdem Sie Ihre Quellzuordnungen auf Amazon S3 hochgeladen, Quellzuordnungen auf Ihrem RUM-App-Monitor aktiviert und Ihre Webanwendung mit dem im CloudWatch RUM-Webclient releaseId konfigurierten bereitgestellt haben, wählen Sie in der RUM-Konsole Ereignisse aus. Auf dieser Registerkarte werden die Rohdaten der RUM-Ereignisse angezeigt. Filtern Sie nach dem JS-Fehlerereignistyp und sehen Sie sich das neueste JS-Fehlerereignis an. Sie werden den nicht minimierten Stack-Trace im neuen event_details.unminifiedStack Feld für Ereignisse sehen, die nach der Aktivierung der Funktion aufgenommen wurden.

Unminifizierte Stack-Traces in Logs anzeigen CloudWatch

Aktivieren Sie die Speicherung von RUM-Ereignissen in den CloudWatch Protokollen, indem Sie die Datenspeicherung aktivieren. Nach der Aktivierung können Sie das neue Feld Event_Details.UnminifiedStack durchsuchen. Auf diese Weise können Sie mithilfe von Log-Abfragen Trends analysieren und Probleme über mehrere Sitzungen hinweg miteinander verknüpfen. CloudWatch

Fehlerbehebung bei Quellzuordnungen

CloudWatch RUM bietet sofort einsatzbereite Metriken zur Fehlerbehebung bei der Einrichtung Ihrer Quellzuordnungen. Diese Metriken werden im Metrik-Namespace namens AWS/RUM veröffentlicht. Die folgenden Metriken werden mit der Dimension application_name veröffentlicht. Der Wert dieser Dimension ist der Name der App-Überwachung. Die Metriken werden auch mit einer aws:releaseId Dimension veröffentlicht. Der Wert dieser Dimension ist dem JavaScript Fehlerereignis releaseId zugeordnet.

CloudWatch RUM kann aus verschiedenen Gründen nicht in der Lage sein, eine Zeile im Stack-Trace zu deminifizieren, einschließlich, aber nicht beschränkt auf: