Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Mengaktifkan unminifikasi jejak tumpukan kesalahan JavaScript

Ketika kode JavaScript sumber aplikasi web Anda diperkecil, jejak tumpukan kesalahan bisa sulit dibaca. Anda dapat mengaktifkan unminifikasi ke jejak tumpukan dengan mengunggah peta sumber Anda ke Amazon S3. CloudWatch RUM akan mengambil peta sumber untuk memetakan nomor baris dan kolom dalam kode sumber yang diperkecil kembali ke kode sumber asli yang tidak diperkecil. Ini akan meningkatkan keterbacaan jejak tumpukan kesalahan Anda dan membantu mengidentifikasi lokasi kesalahan dalam kode sumber asli.

Persyaratan dan sintaks

Peta sumber sangat penting untuk men-debug dan melacak masalah dalam aplikasi web Anda di berbagai rilis. Pastikan bahwa setiap rilis aplikasi web memiliki peta sumber yang unik. Setiap rilis harus memiliki releaseId uniknya sendiri. ReleaseId harus berupa string antara 1 dan 200 karakter dan hanya dapat berisi huruf, angka, garis bawah, tanda hubung, titik dua, garis miring, dan titik. Untuk menambahkan metadata releaseId as ke acara RUM, konfigurasikan klien web CloudWatch RUM.

Peta sumber diharapkan menjadi file JSON biasa mengikuti struktur yang ditentukan oleh spesifikasi Source Map V3. Bidang yang diperlukan adalah:version,file,sources,names, danmappings.

Pastikan ukuran setiap peta sumber tidak melebihi batas 50 MB. Selain itu, layanan RUM hanya akan mengambil hingga 50 MB peta sumber per jejak tumpukan. Jika perlu, bagi kode sumber menjadi beberapa bagian yang lebih kecil. Untuk informasi selengkapnya, lihat Pemisahan Kode dengan WebpackJS.

Konfigurasikan kebijakan sumber daya bucket Amazon S3 Anda untuk mengizinkan akses layanan RUM

Pastikan bucket Amazon S3 Anda berada di wilayah yang sama dengan RUM AppMonitor Anda. Konfigurasikan bucket Amazon S3 Anda untuk mengizinkan akses layanan RUM untuk mengambil file peta sumber. Sertakan kunci konteks kondisi aws:SourceAccount global aws:SourceArn dan untuk membatasi izin layanan ke sumber daya. Ini adalah cara paling efektif untuk melindungi dari masalah deputi yang membingungkan.

Contoh berikut menunjukkan bagaimana Anda dapat menggunakan aws:SourceArn dan kunci konteks kondisi aws:SourceAccount global di Amazon S3 untuk mencegah masalah wakil yang membingungkan.

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

Jika Anda menggunakan AWS KMS kunci untuk mengenkripsi data, pastikan kebijakan sumber daya kunci dikonfigurasi serupa untuk menyertakan kunci konteks kondisi aws:SourceAccount global aws:SourceArn dan untuk memberikan akses layanan RUM untuk menggunakan kunci untuk mengambil file peta sumber.

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

Unggah peta sumber

Konfigurasikan JavaScript bundel Anda untuk menghasilkan peta sumber selama minifikasi. Saat Anda membangun aplikasi, bundel akan membuat direktori (misalnya, dist) yang berisi JavaScript file yang diperkecil dan peta sumber yang sesuai. Lihat di bawah untuk contoh.

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

Unggah file peta sumber ke bucket Amazon S3 Anda. File harus ditempatkan di folder dengan nama releaseId sebagai. Misalnya, jika nama bucket saya adalah my-application-source-maps dan 2.0.0, maka file peta sumber terletak di lokasi berikut: releaseId

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

Untuk mengotomatiskan pengunggahan peta sumber Anda, Anda dapat membuat skrip bash berikut dan menjalankannya sebagai bagian dari proses pembuatan.

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

Konfigurasikan releaseId di klien web CloudWatch RUM Anda

CloudWatch RUM menggunakan konfigurasi releaseId untuk menentukan folder untuk mengambil file peta sumber. Beri nama releaseId yang sama dengan folder file peta sumber Anda. Jika Anda menggunakan skrip bash yang disediakan di atas atau yang serupa, yang releaseId dikonfigurasi dalam skrip harus sama dengan yang dikonfigurasi di klien web CloudWatch RUM Anda. Anda harus menggunakan versi 1.21.0 atau yang lebih baru dari klien 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
}

Mengaktifkan monitor aplikasi CloudWatch RUM untuk menghapus jejak tumpukan JavaScript

Untuk mengecilkan jejak JavaScript tumpukan, setel SourceMap status monitor aplikasi ke. ENABLED Berikan URI Amazon S3 ke bucket atau folder yang berisi semua peta sumber untuk monitor aplikasi Anda.

Saat menyimpan peta sumber secara langsung di bucket utama (bukan di subfolder), maka URI Amazon S3 harus diformat sebagai. Amazon S3://BUCKET_NAME Dalam hal ini, file peta sumber harus ditempatkan di lokasi berikut.

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

Ketika direktori anak adalah root, maka Amazon S3 URI harus diformat sebagai. Amazon S3://BUCKET_NAME/DIRECTORY Dalam hal ini, file peta sumber harus ditempatkan di lokasi berikut.

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

Melihat jejak tumpukan yang tidak diperkecil di konsol RUM

Setelah mengunggah peta sumber Anda ke Amazon S3, mengaktifkan peta sumber di monitor aplikasi RUM Anda, dan menerapkan aplikasi web Anda dengan releaseId yang dikonfigurasi di klien web RUM, pilih Acara di CloudWatch konsol RUM. Tab ini menampilkan data acara RUM mentah. Filter berdasarkan jenis peristiwa kesalahan JS dan lihat peristiwa kesalahan JS terbaru. Anda akan melihat jejak tumpukan yang tidak diperkecil di event_details.unminifiedStack bidang baru untuk peristiwa yang dicerna setelah fitur diaktifkan.

Melihat jejak tumpukan yang tidak diperkecil di Log CloudWatch

Aktifkan penyimpanan acara RUM di CloudWatch Log dengan mengaktifkan penyimpanan Data. Setelah diaktifkan, Anda dapat mencari bidang Event_details.unminifiedStack baru. Ini memungkinkan Anda menganalisis tren dan menghubungkan masalah di beberapa sesi menggunakan kueri CloudWatch Log.

Pemecahan masalah peta sumber

CloudWatch RUM menyediakan metrik di luar kotak untuk memecahkan masalah penyiapan peta sumber Anda. Metrik-metrik ini diterbitkan di namespace metrik yang disebut AWS/RUM. Metrik berikut diterbitkan dengan dimensi application_name. Nilai dimensi ini adalah nama monitor aplikasi. Metrik juga diterbitkan dengan aws:releaseId dimensi. Nilai dimensi ini releaseId terkait dengan peristiwa JavaScript kesalahan.

CloudWatch RUM mungkin gagal mengecilkan baris dalam jejak tumpukan karena berbagai alasan, termasuk tetapi tidak terbatas pada: