Application Real-Time Monitoring Service：Diagnosis error JS menggunakan ARMS Browser Monitoring

Langkah 1: Lihat ikhtisar error

1. Masuk ke Konsol ARMS.

2. Di panel navigasi sebelah kiri, pilih Browser Monitoring > Browser Monitoring.

3. Pada halaman Browser Monitoring, pilih wilayah di bilah navigasi atas dan klik nama aplikasi yang ingin Anda kelola.

4. Di panel navigasi sebelah kiri, klik JS Error Diagnosis.

Pada halaman ini:

• Bagian Error Overview menampilkan jumlah total error, laju error JS, serta jumlah dan persentase pengguna yang terdampak.

• Grafik kurva menunjukkan tren error dari waktu ke waktu.

• Tab Frequent Errors mencantumkan error dengan frekuensi tinggi.

• Tab Page Ranked by Error Rate dan Error View menampilkan distribusi error di berbagai halaman.

Langkah 2: Telusuri error tertentu

Tersedia dua titik masuk:

• Di tab Frequent Errors, klik Diagnose di sebelah error yang dituju.

• Pada grafik kurva, klik titik data pada waktu tertentu untuk membuka kotak dialog Exception Insight.

Contoh berikut menggunakan pendekatan grafik kurva:

1. Pada grafik kurva, identifikasi titik di mana laju error melonjak. Arahkan kursor ke titik infleksi hingga pointer berubah menjadi ikon tangan, lalu klik. Kotak dialog Exception Insight akan muncul. Untuk informasi lebih lanjut, lihat Lihat exception insight.

   

2. Klik tab Frequent Errors Top 5, pilih error, lalu klik Diagnose di kolom Operation. Tab Error Detail akan muncul.

Langkah 3: Tinjau detail error

Halaman detail error menyediakan konteks berikut:

Contoh: Tangkapan layar berikut menunjukkan error dari modul peta pada dasbor waktu nyata. Modul tersebut melaporkan data tidak valid selama pembaruan, dan jejak stack mengarah ke Baris 1, Kolom 79585 dalam bundle yang diminifikasi.

"Baris 1, Kolom 79585" tidak dapat ditindaklanjuti karena kode produksi telah diminifikasi. Langkah berikutnya memetakan posisi ini kembali ke kode sumber Anda.

Langkah 4: Petakan error ke kode sumber

Nomor baris dan kolom dalam jejak stack mengarah ke kode yang diminifikasi, bukan file sumber Anda. Terapkan source map untuk menentukan lokasi error asli.

1. Di bagian Stack Info, klik ikon di sebelah kiri frame stack untuk memperluasnya, lalu klik Choose Sourcemap.

2. Pada kotak dialog Sourcemap File, pilih file source map yang sudah ada atau unggah yang baru, lalu klik OK.

   Catatan

   Anda dapat mengunggah hingga lima file sekaligus.

   

3. Setelah menerapkan source map, Browser Monitoring menyorot lokasi error asli dengan warna merah di bagian Source Code, menampilkan file dan baris tepat tempat error terjadi. Terapkan source map ke setiap frame dalam stack error untuk melacak rantai panggilan lengkap.

Langkah 5: Reproduksi error dengan pelacakan ulang perilaku pengguna

Pemetaan source map mengungkapkan *di mana* error terjadi, tetapi tidak selalu *mengapa*. Pada contoh modul peta, pemetaan kode sumber menunjukkan bahwa data tidak valid menyebabkan error selama pembuatan komponen. Namun, kode sumber tersebut sudah mencakup pemeriksaan null dan toleransi kesalahan untuk data ini. Untuk memahami mengapa data tidak valid muncul, tinjau apa yang terjadi tepat sebelum error tersebut.

Browser Monitoring mencatat perilaku pengguna sebagai jejak kronologis node event:

• Pemuatan halaman

• Perubahan rute

• Klik halaman

• Permintaan API

• Output konsol

Tinjau jejak ini untuk memutar ulang rangkaian tindakan yang menyebabkan error.

Contoh: Jejak perilaku pengguna berikut menunjukkan bahwa permintaan API terjadi tepat sebelum error. Panggilan API tersebut meminta pembaruan waktu nyata untuk modul peta, tetapi respons yang dikembalikan adalah ConsoleNeedLogin alih-alih data peta yang valid. Hal ini menunjukkan bahwa pengguna telah logout dari halaman—penyebab utama data tidak valid tersebut.

Webpack

Dalam webpack.config.js, atur properti devtool menjadi "source-map". Webpack mendukung 13 nilai devtool untuk berbagai jenis source map. "source-map" menghasilkan file .map terpisah yang lengkap, yang direkomendasikan untuk diagnosis error di lingkungan produksi.

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devtool: "source-map"
};

Gulp

Gunakan paket gulp-sourcemaps:

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('javascript', function() {
    gulp.src('src/**/*.js')
        .pipe(sourcemaps.init())
        .pipe(sourcemaps.write('../sourcemaps'))
        .pipe(gulp.dest('dist'));
});

Grunt

Hanya dengan grunt-contrib-uglify:

grunt.initConfig({
    uglify: {
        options: {
            sourceMap: true
        }
    }
});

Dengan grunt-usemin (yang memanggil grunt-contrib-concat dan grunt-contrib-uglify):

grunt.initConfig({
    concat: {
        options: {
            sourceMap: true
        }
    },
    uglify: {
        options: {
            sourceMap: true,
            sourceMapIn: function(uglifySource) {
                return uglifySource + '.map';
            },
        }
    }
});

Dengan grunt-jsmin-sourcemap:

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-jsmin-sourcemap');
    grunt.initConfig({
        'jsmin-sourcemap': {
            all: {
                src: ['scripts/script.js'],
                dest: 'scripts/script.jsmin-grunt.js',
                destMap: 'scripts/script.jsmin-grunt.js.map'
            }
        }
    });
    grunt.registerTask('default', 'jsmin-sourcemap');
};

Angular CLI

ng build --prod --source-map --vendor-source-map

UglifyJS2

UglifyJS2 adalah tool CLI. Untuk opsi lainnya, lihat Opsi source map CLI.

uglifyjs app.js -o app.min.js --source-map app.min.js.map

SystemJS

Gunakan SystemJS Builder:

builder.bundle('app.js', 'app-outfile.js', {
    minify: true,
    sourceMaps: true
});