Perbaiki kesalahan JS terobfuskasi melalui Webpack & Vite source map-ARMS-Alibaba Cloud

Pemantauan Pengguna Nyata (RUM) dari Application Real-Time Monitoring Service (ARMS) mendukung pengumpulan dan pelaporan tumpukan kesalahan JavaScript, serta penguraian tumpukan kesalahan ini melalui pengunggahan sourcemap. Fitur ini memungkinkan Anda dengan cepat menemukan kesalahan dalam kode JavaScript. Dengan bantuan plug-in alat pembuatan, Anda dapat menetapkan pengenal unik universal (UUID) dan mengaitkan file JavaScript dengan sourcemap yang sesuai. Tumpukan kesalahan kemudian dapat diuraikan secara otomatis dan ditampilkan di antarmuka RUM, menghilangkan kebutuhan untuk memilih sourcemap secara manual.

Prasyarat

Aplikasi web atau HTML5 Anda telah terintegrasi dengan RUM. Untuk informasi lebih lanjut, lihat Mengintegrasikan Aplikasi Web atau Aplikasi HTML5.
Alat pembuatan tersedia, baik Webpack maupun Vite, dan plug-in-nya adalah versi V0.0.5 atau lebih baru.

Langkah 1: Gunakan alat pembuatan untuk menghasilkan sourcemap

Webpack

Di terminal Webpack, gunakan kode berikut untuk menginstal paket node package manager (NPM) dari plug-in Webpack untuk RUM:
```
npm install @arms/rum-webpack-plugin --save
```
Di file konfigurasi Webpack, ubah pengaturan dengan merujuk pada kode berikut dan simpan file untuk menerapkan plug-in:
```
import { RumWebpackPlugin } from '@arms/rum-webpack-plugin'

const config = {
  plugins: [new RumWebpackPlugin()],
  devtool: 'source-map',
};

export default config
```
Atribut devtool digunakan untuk menghasilkan sourcemap di Webpack.

Vite

Di terminal Vite, gunakan kode berikut untuk menginstal paket NPM dari plug-in Vite untuk RUM:
```
npm install @arms/rum-vite-plugin --save
```
Di file konfigurasi Vite, ubah pengaturan dengan merujuk pada kode berikut dan simpan file untuk menerapkan plug-in:
```
import { rumVitePlugin } from '@arms/rum-vite-plugin'

export default defineConfig({
  plugins: [rumVitePlugin()],
  build: {
    sourcemap: true,
  },  
});
```
Atribut build.sourcemap digunakan untuk menghasilkan sourcemap.

Langkah 2: Unggah sourcemap

Anda dapat menggunakan salah satu metode berikut untuk mengunggah sourcemap ke RUM.

Metode 1: Unggah otomatis

Untuk menyederhanakan operasi, Anda dapat mengonfigurasi alat pembuatan RUM untuk mengunggah sourcemap secara otomatis ke bucket Object Storage Service (OSS) milik RUM setelah UUID diberikan.

Penting

Metode unggah otomatis memerlukan ID AccessKey dan Rahasia AccessKey akun Alibaba Cloud Anda. Untuk tujuan keamanan, lakukan langkah-langkah berikut sebagai Pengguna Resource Access Management (RAM) dan jaga kerahasiaan AccessKey.

Aktifkan saklar unggah massal.
1. Masuk ke Konsol ARMS sebagai pengguna RAM.
2. Pilih Real User Monitoring > Application List. Pada halaman yang muncul, klik aplikasi web atau HTML5 yang ingin Anda kelola.
3. Di halaman detail aplikasi, klik tab Application Settings. Lalu, klik tab File Management.
4. Di halaman tab yang muncul, aktifkan saklar Enable OSS batch upload.
Buat ID AccessKey dan Rahasia AccessKey untuk pengguna RAM yang Anda gunakan untuk masuk.
Untuk informasi tentang cara membuat AccessKey, lihat Buat Pasangan AccessKey.
Catatan
Pilih Kode lokal untuk menggunakan AccessKey di lingkungan pengembangan lokal.

Di file konfigurasi plug-in alat pembuatan, masukkan informasi berikut:

ID aplikasi RUM.
ID AccessKey dan Rahasia AccessKey pengguna RAM.
Nomor versi yang Anda tentukan. Nilai defaultnya adalah 1.0.0. Ini digunakan untuk mengelola sourcemap yang diunggah ke RUM berdasarkan grup.

Wilayah tempat aplikasi RUM Anda berada. Nilai defaultnya adalah cn-hangzhou.

Webpack

Untuk menghindari unggahan duplikat selama debugging, sourcemap hanya diunggah secara otomatis dalam mode produksi ketika mereka dibundel dengan Webpack.

import { RumWebpackPlugin } from '@arms/rum-webpack-plugin'

const config = {
  plugins: [new RumWebpackPlugin({
    pid: '',  //ID aplikasi RUM.
    accessKeyId: '',
    accessKeySecret: '',
    version: '',
    region: ''
  })],
  devtool: 'source-map',
};

export default config

Vite

import { rumVitePlugin } from '@arms/rum-vite-plugin'

export default defineConfig({
  plugins: [rumVitePlugin({
    pid: '',  //ID aplikasi RUM.
    accessKeyId: '',
    accessKeySecret: '',
    version: '',
    region: ''
  })],
  build: {
    sourcemap: true,
  },  
});

Metode 2: Unggah manual

Buat proyek di alat pembuatan RUM dan gunakan perintah bangun yang disediakan oleh alat pembuatan untuk membangun kode proyek. Lalu, alat pembuatan RUM menetapkan UUID untuk file JavaScript dan sourcemap yang sesuai.
- Sourcemap: Penambahan bidang debugId menunjukkan bahwa UUID disuntikkan ke dalam file sourcemap.
```
{
    "version": 3,
    "file": "index.js",
    "mappings": "AAAAA,QAAQC,IAAI",
    "sources": [
        "webpack://examples/./src/index.js"
    ],
    "sourcesContent": [
        "console.log('Hello World!');\n"
    ],
    "names": [
        "console",
        "log"
    ],
    "sourceRoot": "",
    "debugId": "e4f083d6-b8d8-4cae-a0ea-16f2e83a6be1"
}
```
- File JavaScript: Atribut _armsRumDebugIds dalam objek global window browser web menunjukkan bahwa UUID disuntikkan ke dalam file JavaScript.
Unggah sourcemap secara manual ke RUM.
1. Masuk ke Konsol ARMS sebagai pengguna RAM.
2. Pilih Real User Monitoring > Application List. Pada halaman yang muncul, klik aplikasi web atau HTML5 yang ingin Anda kelola.
3. Di halaman detail aplikasi, klik tab Application Settings. Lalu, klik tab File Management.
4. Di halaman tab yang muncul, klik Upload File untuk mengunggah sourcemap yang memiliki UUID yang ditetapkan.
  Nilai di kolom UUID menunjukkan bahwa UUID telah diuraikan.
Lihat hasil penguraian otomatis untuk sourcemap.
1. Di halaman detail aplikasi, klik tab Abnormal statistics.
2. Di halaman tab yang muncul, klik pengecualian untuk masuk ke halaman detail pengecualian.
3. Di halaman Stack Information, periksa UUID yang diberikan oleh alat pembuatan RUM, kode sumber tempat kesalahan mungkin terjadi, dan hasil penguraian otomatis.
  - Jika UUID muncul di setiap baris informasi stack, UUID dilaporkan. Jika tidak, pelaporan gagal.
  - Jika sourcemap dengan UUID telah diunggah, baris pertama informasi stack menampilkan kode sumber tempat kesalahan terjadi. Anda dapat mengklik baris lain untuk memperluas hasil penguraian otomatis.