Belajar Angular - Observability & Monitoring

#Pendahuluan

Aplikasi yang berjalan di production adalah kotak hitam jika tidak ada observability. Kalian hanya tahu aplikasi rusak ketika pengguna melapor, padahal error sudah terjadi ribuan kali di browser pengguna lain.

Episode 22 membahas logging error frontend dan metrik performa, monitoring interaksi pengguna dan performa halaman, error reporting dengan Sentry atau LogRocket, serta dukungan production dan penanganan insiden. Kalian akan membangun visibilitas terhadap aplikasi setelah dirilis.

Observability bukan fitur tambahan, melainkan bagian dari definisi "selesai". Tanpa visibilitas, tim tidak bisa mengukur kualitas maupun menemukan akar masalah dengan cepat.

#Logging Error Frontend dan Metrik Performa

#Menangkap Error Global

Angular memiliki ErrorHandler yang bisa diganti dengan implementasi custom untuk menangkap semua error yang tidak tertangani:

Custom ErrorHandler

import { ErrorHandler, Injectable } from "@angular/core";
 
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: unknown): void {
    console.error("[app] unhandled error", error);
    reportToObservability(error);
  }
}

Ganti handler default di provider aplikasi dengan provide: ErrorHandler, useClass: GlobalErrorHandler. Error yang sebelumnya menghilang di konsol kini tercatat di satu tempat.

#Metrik Performa dengan Performance API

Browser menyediakan PerformanceObserver untuk membaca Core Web Vitals seperti LCP dan CLS:

Mengukur LCP

function observeLcp(): void {
  new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      console.log("LCP", entry.startTime);
      sendMetric("lcp", entry.startTime);
    }
  }).observe({ type: "largest-contentful-paint", buffered: true });
}

Metrik ini memberi gambaran nyata tentang pengalaman pengguna, bukan sekadar dugaan dari hasil pengujian lokal.

#Monitoring Interaksi Pengguna dan Performa Halaman

#Real User Monitoring

Real User Monitoring mengukur performa dari sudut pandang pengguna sungguhan. Inisialisasi dilakukan sekali di main.ts:

Inisialisasi monitoring

import { enableProdMode } from "@angular/core";
import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app/app.component";
import { appConfig } from "./app/app.config";
 
bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Data yang dikumpulkan mencakup waktu render halaman, interaksi pengguna, dan perjalanan pengguna di aplikasi. Pola halaman yang lambat atau tombol yang sering gagal menjadi terlihat jelas.

#Menangkap Error HTTP

Interceptor adalah tempat yang tepat untuk mencatat setiap request yang gagal beserta statusnya:

Interceptor pencatat error

import { HttpInterceptorFn } from "@angular/common/http";
import { catchError, throwError } from "rxjs";
 
export const logInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    catchError((error) => {
      console.error("HTTP error", req.url, error.status);
      return throwError(() => error);
    })
  );
};

Gabungkan ini dengan retry policy agar error sementara tidak mengganggu pengguna, dan hanya error yang benar-benar persisten yang sampai ke tool observability.

#Error Reporting dengan Sentry atau LogRocket

#Memasang Sentry

Sentry mengumpulkan stack trace, konteks, dan pengguna yang terdampak secara otomatis:

npm install @sentry/angular @sentry/core

Inisialisasi Sentry sebelum aplikasi berjalan, lalu daftarkan ErrorHandler dari @sentry/angular agar error Angular diteruskan ke Sentry. Setiap error datang dengan breadcrumbs — urutan aksi pengguna sebelum error terjadi.

#LogRocket untuk Session Replay

LogRocket merekam session pengguna, termasuk console, network request, dan state aplikasi. Fitur ini sangat membantu debugging masalah yang sulit direproduksi: kalian tidak hanya melihat stack trace, tetapi juga apa yang sebenarnya dilakukan pengguna sebelum error muncul.

Kombinasi Sentry untuk error dan LogRocket untuk replay memberi gambaran lengkap: apa yang rusak dan bagaimana pengguna sampai ke sana.

#Production Support dan Incident Handling

#Severity dan Prioritas

Tidak semua error sama pentingnya. Klasifikasikan berdasarkan dampak: error yang menghalangi transaksi lebih penting daripada error pada fitur sekunder. Sentry memungkinkan grouping dan alerting berdasarkan severity sehingga on-call tidak dibanjiri notifikasi.

#Alur Penanganan Insiden

Siapkan runbook: bagaimana mengidentifikasi cakupan insiden, mencari log yang relevan, melakukan rollback versi, dan mengkomunikasikan status. Metrik performa yang terpantau secara real-time membantu memutuskan apakah insiden perlu rollback segera atau cukup diobservasi.

Sebuah check alert di level platform melengkapi keseluruhan sistem: jika server tidak merespons atau error rate melonjak, tim mendapat notifikasi sebelum pengguna sempat melapor.

#Penutup

Inti yang harus dibawa pulang:

• ErrorHandler custom menangkap semua error yang tidak tertangani.
• Core Web Vitals diukur dengan PerformanceObserver.
• Real User Monitoring mengukur pengalaman pengguna yang sebenarnya.
• Interceptor mencatat error HTTP beserta statusnya.
• Sentry mengumpulkan stack trace dan breadcrumbs; LogRocket merekam session.
• Runbook dan alerting membentuk siklus penanganan insiden yang sehat.

Di episode 23 berikutnya kita akan membahas fitur modern yang stabil dan tren masa depan — standalone components, Signals, dan standalone APIs, tren frontend enterprise, ekosistem Angular dengan Material dan CDK, serta strategi menjaga keahlian Angular tetap relevan.