23. Quality Assurance: SonarQube

SonarQube adalah platform pemindaian kode statis (static code analysis) otomatis untuk mendeteksi bugs, vulnerabilities (celah keamanan), dan code smells (kode yang tidak efisien/kurang bersih). Integrasi SonarQube dalam pipeline CI/CD memastikan bahwa setiap perubahan kode yang dikirim via Pull Request (PR) memenuhi standar kualitas sebelum di-merge ke branch utama.

A. Pilar Utama Penilaian Kualitas (SonarQube Pillars)

SonarQube mengelompokkan hasil analisis kode ke dalam beberapa kategori utama:

1. Bugs: Kesalahan kode yang berpotensi menyebabkan crash atau perilaku tidak terduga pada aplikasi (contoh: null pointer dereference, pemanggilan fungsi dengan argumen salah).
2. Vulnerabilities: Celah keamanan yang dapat dieksploitasi oleh pihak luar (contoh: hardcoded credentials, penggunaan library yang rentan).
3. Security Hotspots: Bagian kode yang sensitif terhadap keamanan dan membutuhkan review manual oleh developer untuk memastikan keamanannya.
4. Code Smells: Masalah pada struktur kode yang tidak menyebabkan bug secara langsung, tetapi mempersulit pemeliharaan (maintainability) seperti fungsi yang terlalu panjang atau variabel yang tidak digunakan.
5. Coverage: Persentase baris kode (LOC) yang dieksekusi oleh unit test.
6. Duplications: Persentase baris kode yang terduplikasi di beberapa tempat berbeda.

B. Standar Quality Gate (Kriteria Kelulusan)

Setiap Pull Request (PR) wajib melewati Quality Gate SonarQube sebelum dapat di-merge. Di bawah ini adalah standar Quality Gate minimum untuk Frontend Project:

C. Konfigurasi Proyek (sonar-project.properties)

Setiap project wajib memiliki file sonar-project.properties di root directory. File ini mengontrol folder mana saja yang dipindai, folder mana yang diabaikan (exclusion), dan di mana laporan unit test berada.

Berikut contoh konfigurasi standar untuk React/Next.js Project menggunakan TypeScript:

# Identitas Project
sonar.projectKey=my-org_my-frontend-app
sonar.projectName=My Frontend App
sonar.projectVersion=1.0.0

# Path Source Code & Test
sonar.sources=src
sonar.tests=src
sonar.test.inclusions=src/**/*.test.tsx,src/**/*.test.ts,src/**/*.spec.tsx,src/**/*.spec.ts

# File/Folder yang Harus Diabaikan dari Pemindaian (Exclusion)
sonar.exclusions=node_modules/**,build/**,.next/**,coverage/**,dist/**,src/**/*.test.tsx,src/**/*.test.ts,src/**/*.stories.tsx,src/**/*.mocks.ts

# Bahasa Pemrograman & Laporan Coverage
sonar.sourceEncoding=UTF-8
sonar.javascript.lcov.reportPaths=coverage/lcov.info

Catatan Penting untuk Exclusion:

• Storybook (*.stories.tsx): Harus diabaikan karena hanya untuk visualisasi komponen dan bukan bagian dari logika aplikasi utama.
• Mocks & Test Utilities: Selalu abaikan file dummy/mock agar tidak merusak perhitungan persentase coverage riil aplikasi.

D. Alur Integrasi CI/CD & PR Decoration

SonarQube terintegrasi secara otomatis pada setiap event Pull Request (PR) dan Push ke branch utama.

graph TD
    A[Developer push code ke PR Branch] --> B[CI/CD Runner Terpicu e.g., GitHub Actions]
    B --> C[Run Linter & Build Check]
    B --> D[Run Unit Tests & Generate Lcov Report]
    D --> E[SonarQube Scanner Executed]
    E --> F[Kirim Hasil Scan ke SonarQube Server]
    F --> G{Apakah Quality Gate Lolos?}
    G -- Ya --> H[Status CI/CD Hijau & PR siap di-Review/Merge]
    G -- Tidak --> I[Status CI/CD Merah & PR terblokir dari Merge]
    
    H & I --> J[PR Decoration: SonarQube menulis ringkasan audit langsung di kolom komentar PR]

E. Panduan Mengatasi Isu SonarQube (Best Practices)

Jika Quality Gate Anda gagal, berikut adalah langkah-langkah resolusinya:

1. Cara Meningkatkan Coverage

• Prioritaskan Unit Test pada Logika Bisnis (Business Logic): Fokuskan penulisan test pada utility functions, custom hooks, helper methods, dan router/state management logic.
• Gunakan Coverage Report Lokal: Sebelum push, jalankan test secara lokal dengan coverage flag (misalnya npm run test -- --coverage) untuk mendeteksi file mana saja yang belum ter-cover.

2. Cara Mengurangi Duplikasi Kode (DRY Principle)

• Jika SonarQube mendeteksi duplikasi pada komponen UI, pecah komponen tersebut menjadi sub-komponen yang dapat digunakan kembali (reusable atomic components).
• Pindahkan logika kalkulasi/format yang sama ke fungsi helper di folder utils/.

3. Menghadapi False Positive

• Ada kalanya SonarQube salah mendeteksi suatu kode sebagai Bug atau Code Smell padahal kode tersebut memang sengaja dibuat demikian karena alasan arsitektur/teknis.
• Berikan anotasi di atas baris kode tersebut menggunakan komentar spesifik agar scanner mengabaikannya:

  // nosonar
  const dangerousAPI = eval(userInput); // Diperbolehkan khusus untuk kasus ini saja
  

• Atau tandai isu tersebut sebagai "False Positive" atau "Won't Fix" langsung melalui dashboard UI SonarQube (membutuhkan permission khusus admin/tech lead).

F. Referensi Tambahan

• SonarQube Official Documentation: Panduan lengkap konfigurasi dan fitur pemindaian.
• SonarSource Clean Code Principles: Panduan mendalam tentang pentingnya menjaga kualitas kode dari Code Smell, Bugs, dan Vulnerabilities.