Menambahkan Sentry Ke Dalam Aplikasi Vue JS Kamu Dan Integrate Ke Dalam Gitllab CI / CD - CRUDPRO
Home  ›  vuejs

Menambahkan Sentry Ke Dalam Aplikasi Vue JS Kamu Dan Integrate Ke Dalam Gitllab CI / CD

Written By Agus Handi Prayitna Tuesday, November 22, 2022

Di sini, kami memiliki sejumlah proyek yang kami tangani dan pantau, baik di alat publik maupun internal kami, dan kami ingin memastikannya memenuhi kinerja dan standar bebas bug kami.

Aplikasi frontend kami ditulis dalam VueJS, Angular, dan React, jadi kami membutuhkan landasan bersama untuk mempertahankan pipeline CI/CD khusus kami dengan mudah.

Panduan ini akan memandu Anda melalui semua langkah yang perlu Anda ikuti untuk mengonfigurasi proyek Vue.js Anda guna mengintegrasikan Sentry untuk bug dan pelacakan kinerja. Anda juga akan mempelajari cara membuat rilis Sentry dengan benar dan secara otomatis mengunggah sourece map javascript/Skep untuk memetakan kode transpiled ke kode sumber Anda dengan mudah.

Berikut daftar apa yang perlu Anda lakukan untuk mendapatkan hasil ini:

  • Instal Sentry
  • Inisialisasi dan konfigurasikan Sentry untuk bug dan pelacakan kinerja
  • Impor Sentry ke lifecycle Vue.js
  • Perbarui pipeline CI/CD Anda
  • Bonus: lacak pengguna

Instal Sentry

Pertama, kita perlu membuat proyek Sentry baru untuk mendapatkan Data source Name (DSN). Anggap saja seperti ID proyek Sentry.

Selanjutnya, Anda perlu menginstal paket npm yang dibutuhkan oleh Sentry.

npm install --save @sentry/vue @sentry/tracing

Inisialisasi dan konfigurasikan Sentry untuk bug dan pelacakan kinerja

Dalam kasus kami, kami hanya ingin melacak bug dan kinerja saat kami tidak berada di environment pengembangan/lokal.

import Vue from 'vue';
import * as Sentry from '@sentry/vue';
import { Integrations } from '@sentry/tracing';

if (process.env.VUE_APP_ENVIRONMENT !== 'development') {
    Sentry.init({
        Vue,
        environment: process.env.VUE_APP_ENVIRONMENT,
        release: `${process.env.VUE_APP_NAME}@${process.env.VUE_APP_VERSION}`,
        dsn: process.env.VUE_APP_SENTRY_DSN,
        integrations: [
            new Integrations.BrowserTracing({
                tracingOrigins: [process.env.VUE_APP_API_URL, /^\//],
            }),
        ],
        debug: process.env.VUE_APP_ENVIRONMENT  !==  'production',
        tracesSampleRate: process.env.VUE_APP_ENVIRONMENT === 'production' ? 0.2 : 1,
        tracingOptions: {
            trackComponents: true,
        },
        // Vue specific
        logErrors: process.env.VUE_APP_ENVIRONMENT === 'production' ? false : true,
        attachProps: true,
        attachStacktrace: true,
    });
}

seperti yang Anda lihat, kami menggunakan banyak variabel environmrny. Berikut adalah contoh file .env.production yang digunakan untuk build produksi:

NODE_ENV=production
VUE_APP_ENVIRONMENT=production
VUE_APP_API_URL=https://YOUR_WEBSITE_URL
VUE_APP_SENTRY_DSN=###REPLACE_WITH_YOUR_SENTRY_DSN###

Variabel env lainnya diinisialisasi di vue.config.js, tetapi Anda dapat memuat nilainya langsung ke file sentry.ts Anda.

Inilah yang perlu Anda tambahkan ke vue.config.js Anda:

process.env.VUE_APP_NAME = require('./package.json').name;
process.env.VUE_APP_VERSION = require('./package.json').version;

Seperti yang Anda lihat, kami mendapatkan nama aplikasi dan versi aplikasi (digunakan untuk membuat nama rilis Sentry) langsung dari package.json. Anda dapat memahami ini di langkah selanjutnya.

Mari kita lihat lebih dekat struktur Sentry SDK.

  • environment: Opsi ini menentukan environment tempat aplikasi akan dirilis. Anda dapat memfilter kinerja/bug di situs web Sentry.
  • rilis: Di sini Anda menentukan nama rilis aplikasi Anda. Rilis Sentry harus unik di seluruh organisasi Anda. Itu sebabnya saya menggunakan pola seperti app-name@version-number. Nama rilis harus cocok dengan nama rilis yang digunakan dalam skrip CI/CD yang membuat rilis di sourece map Anda.
  • dsn: Ini adalah ID proyek Sentry yang unik. Itu akan sama di environment mana pun.
  • traceSampleRate: Ini adalah opsi kinerja. Saya hanya mengatakan bahwa dalam produksi saya hanya ingin melacak kinerja 25% (1 = 100%) dari semua sesi.
  • trackComponents: Aktifkan opsi ini jika Anda juga ingin melacak komponen turunan dan melihat detail proses rendering.
  • logErrors: Sentry juga memanggil fungsi logError asli Vue. Saya yakin opsi ini hanya boleh diaktifkan di environment staging.
  • attachProps: Sentry mengirimkan semua props komponen Vue untuk tujuan logging
  • attachStacktrace: Secara otomatis melampirkan pelacakan tumpukan ke setiap pesan yang dicatat.

Impor Sentry ke lifecycle Vue.js

Sempurna. Sentry SDK sekarang diinisialisasi dan dikonfigurasi dengan benar.

Jika Anda perlu mengonfigurasi lebih banyak opsi, silakan merujuk langsung ke panduan resmi Vue Sentry. Kami baru saja menggores permukaan dari apa yang dapat Anda lakukan dengannya.

Langkah ini sangat mudah. Setelah memuat aplikasi Vue, cukup impor sentry.ts untuk menginisialisasi Sentry SDK dengan benar. Mari buka main.ts proyek Vue dan impor.

import '@/sentry';

Ok, ini pekerjaan minimal. Jika Anda dapat melakukannya, Anda sudah dapat menerapkan aplikasi Anda dan Sentry berfungsi penuh dan Anda dapat melacak bug dan memantau kinerja.

Namun. Saya punya tangkapan! Semua pelacakan tumpukan berisi kode yang ditranspilasikan, bukan kode naskah. Itu masalah besar karena saya tidak dapat dengan mudah mengetahui di mana masalahnya dan bagaimana cara memperbaikinya. Saya dapat meyakinkan Anda bahwa tidak memiliki sourece map yang dilampirkan pada rilis Anda seperti mencoba membaca kode yang disamarkan dan tidak nyaman.

Perbarui CI/CD pipeline Anda

Ini adalah bagian yang sulit. Minumlah kopi yang baru diseduh karena Anda benar-benar harus fokus. Selanjutnya, otomatiskan proses build, release, dan deploy di pipeline GitLab.

pipeline dibagi menjadi tiga tahap:

  • build: tempat membangun proyek Vue
  • post-build: tempat membuat rilis Sentry dan mengunggah sourece map
  • deploy: Tempat menerapkan kode sumber Anda ke infrastruktur AWS. Saya tidak akan masuk ke langkah ini, tetapi saya dapat memberi tahu Anda bahwa secara internal menggunakan AWS CDK untuk melakukannya. Tumpukan kami, seperti semua aplikasi SPA yang diterapkan di AWS, merupakan kombinasi dari Route53, CloudFront, dan S3.

Pertama-tama, Anda perlu membuat bangunan dengan sourece map. sourece map ini tidak boleh disertakan dalam file JavaScript (untuk alasan keamanan). Buat saja, unggah, dan hapus sebelum menerapkan kode sumber Anda.

Untuk membuat sourece map ini, Anda perlu mengedit vue.config.js dan memberi tahu Webpack untuk membuat sourece map dan menerbitkannya sebagai "tersembunyi".

module.exports = {
 chainWebpack: (config) => {
  config.devtool(process.env.NODE_ENV === 'development' ? 'eval-source-map' : 'hidden-source-map')
 },
 css: {
  sourceMap: true
 },
}

Jika mau, Anda dapat melihat dokumentasi untuk mengetahui semua opsi yang dipaparkan Webpack. Untuk staging dan production, saya menggunakan opsi hidden-source-map.

Berguna jika Anda hanya ingin SourceMaps pelacakan tumpukan kesalahan dari laporan kesalahan, tetapi tidak ingin mengungkapkan SourceMap Anda untuk alat pengembangan browser. Langkah selanjutnya adalah memberi tahu pipeline GitLab apa yang harus dilakukan di setiap tahap.

Buka .gitlab-ci.yml dan konfigurasikan sebagai berikut

image: node:14stages:
  - build
  - post-build
  - deploybuild-production:
  stage: build
  before_script:
    - npm config set prefix /usr/local
    - npm install
  script:
    - npm run buildwebsite:production
  artifacts:
    expire_in: 10 mins
    paths:
      - dist/
  only:
    - masterpost-build-production:
  stage: post-build
  script:
    - npm install -g @sentry/cli --unsafe-perm
    - export PKG_NAME=$(node -p "require('${CI_PROJECT_DIR}/package.json').name")
    - export PKG_VERSION=$(node -p "require('${CI_PROJECT_DIR}/package.json').version")
    - export SENTRY_RELEASE_VERSION="${PKG_NAME}@${PKG_VERSION}"
    - export SENTRY_AUTH_TOKEN=$SENTRY_GIT_AUTH_TOKEN
    - export SENTRY_ORG=$SENTRY_GIT_ORG
    - export SENTRY_PROJECT=$SENTRY_GIT_PROJECT
    - echo "Create a new release $SENTRY_RELEASE_VERSION"
    - sentry-cli releases new $SENTRY_RELEASE_VERSION
    - sentry-cli releases set-commits --auto $SENTRY_RELEASE_VERSION
    - sentry-cli releases files $SENTRY_RELEASE_VERSION upload-sourcemaps $CI_PROJECT_DIR/dist
    - sentry-cli releases finalize $SENTRY_RELEASE_VERSION
    - echo "Finalized release for $SENTRY_RELEASE_VERSION"
  only:
    - masterdeploy-production:
 stage: deploy
 before_script:
   - npm config set prefix /usr/local
   - npm install -g aws-cdk
   - npm install
 script:
   - rm $CI_PROJECT_DIR/dist/**/*.map || true
   - npm run buildcdk:production
   - npm run deploycdk:productiononly:
   - master

Mari fokus pada tahapan individu untuk memahami apa yang dilakukan setiap perintah. Diasumsikan pengetahuan minimal tentang GitLab CI/CD.

stage: build

Pada tahap ini, kami membangun SPA. buildwebsite:production hanyalah alias untuk perintah ini vue-cli-service build . Ini adalah perintah standar untuk membuat rilis produksi aplikasi Vue Anda.

Perintah ini akan menghasilkan rilis distribusi aplikasi Anda di bawah folder /dist. Folder itu juga memiliki semua file .map yang berisi sourece map yang perlu diunggah ke Sentry.

Langkah penting berikutnya adalah memberi tahu GitLab untuk menyimpan artefak yang menunjuk ke folder /dist di semua tahapan. Artefak akan tersedia sementara selama 10 menit berikutnya, setelah itu akan dihapus secara otomatis.

Tahap produksi pasca pembangunan

Pada langkah ini, Anda akan membuat rilis Sentry, mengunggah sourece map aplikasi Anda, dan melampirkannya ke rilis khusus ini.

Dari dokumentasi rilis Sentry :

Rilis adalah versi kode yang telah diterapkan ke environment. Memberi tahu Sentry tentang rilis memungkinkan Anda mengidentifikasi dengan mudah jika masalah baru, regresi, dan masalah diselesaikan di rilis berikutnya, dan menerapkan sourece map.

Rilis ini juga menyediakan fungsionalitas tambahan yang signifikan saat dikonfigurasi sepenuhnya dengan Sentry SDK.

  • Identifikasi masalah dan regresi yang diperkenalkan dalam rilis baru
  • Memprediksi komit mana yang akan menyebabkan masalah dan siapa yang mungkin bertanggung jawab
  • Selesaikan masalah dengan memasukkan nomor masalah dalam pesan komit
  • Terima pemberitahuan email saat kode diterapkan

Untuk menggunakan sentry-cli di pipeline Anda, Anda perlu membuat token autentikasi di Sentry. Token itu harus memiliki scope berikut:

  • project:read
  • project:releases
  • org:read

Hal selanjutnya yang harus dilakukan adalah membuat tiga variabel environment GitLab untuk menyimpan token dan informasi lain yang dibutuhkan oleh pipeline dengan aman. Buka halaman proyek GitLab Anda dan buat variabel-variabel ini dari Project > Settings > CI/CD > Variables. Anda harus mendefinisikan variabel-variabel ini.

  • SENTRY_GIT_PROJECT: Harus memiliki nama yang sama dengan nama aplikasi yang digunakan untuk membuat rilis.
  • SENTRY_GIT_ORG: Menyimpan Organization Slug yang ditemukan di profil organisasi Sentry. Ini adalah ID unik yang digunakan untuk mengidentifikasi organisasi ini.
  • SENTRY_GIT_AUTH_TOKEN: Menyimpan nilai dari Sentry Auth Token yang baru saja Anda buat.

Sekarang Anda siap untuk menyetel semua variabel lokal yang diperlukan, menginstal sentry-cli, membuat rilis, dan mengunggah sourece map Anda. Saya pikir perintah CLI ini sebagian besar sudah cukup jelas, tetapi jika Anda memerlukan klarifikasi, beri tahu saya di komentar.

Penerapan stage deploy-production

Hal terpenting di bagian ini adalah menghapus sourece map yang dihasilkan. Ini karena saya tidak ingin menggunakan situs web saya dengan sourece map yang tersedia untuk umum.

Untuk menghapusnya, jalankan saja rm $CI_PROJECT_DIR/dist/**/*.map || true

buildcdk:production dan deploycdk:production hanyalah skrip yang membangun pipeline CDK dan menerapkan situs web yang membuat atau memperbarui formasi cloud AWS.

Semua proses pembuatan CDK, bersama dengan contoh yang berfungsi penuh, akan menjadi bagian dari berbagai postingan blog yang dirilis dalam beberapa minggu mendatang.

Bonus: lacak pengguna

Sekarang Anda memiliki semua yang Anda butuhkan untuk memantau kinerja dan menghancurkan semua bug jahat yang ditangkap oleh Sentry. Langkah selanjutnya adalah melacak sesi pengguna (dengan persetujuan) untuk melihat siapa yang mengalami masalah.

Ini sangat mudah. Segera setelah Anda memiliki informasi pengguna, cukup tambahkan cuplikan kode kecil berikut:

Sentry.setUser({
    id: String(user.id),
    username: user.username,
    email: user.email,
});

Semoga artikel ini bermanfaat untuk anda , terimakasih sudah membaca .. :)