Angular Academy · Pelajaran

Menangani Kesalahan Secara Global

Tangkap dan ubah kesalahan HTTP secara terpusat.

Menangani Kesalahan Secara Global adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Penanganan error terpusat

Daripada menangkap error HTTP di setiap komponen, interceptor dapat menanganinya secara global: mencatatnya, menampilkan toast, mengalihkan saat 401, atau menormalkan bentuk error.

catchError dalam interceptor

Alirkan stream next(req) melalui catchError untuk mencegat kegagalan.

import { catchError, throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';

export const errorInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      console.error('HTTP error', err.status);
      return throwError(() => err);
    })
  );

Memeriksa HttpErrorResponse

HttpErrorResponse membawa status, message, dan isi error dari server. Buat percabangan berdasarkan status untuk menangani berbagai kasus.

catchError((err: HttpErrorResponse) => {
  if (err.status === 0) console.error('network/CORS error');
  else console.error('server error', err.status);
  return throwError(() => err);
})

Mengalihkan saat 401

401 biasanya berarti sesi telah kedaluwarsa. Alihkan ke halaman masuk dari interceptor.

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const router = inject(Router);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      if (err.status === 401) router.navigate(['/login']);
      return throwError(() => err);
    })
  );
};

Menampilkan notifikasi

Injeksi layanan toast/notifikasi untuk menyampaikan error kepada pengguna secara konsisten.

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const toast = inject(ToastService);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      toast.error(err.error?.message ?? 'Something went wrong');
      return throwError(() => err);
    })
  );
};

Meneruskan kembali vs menelan error

Biasanya teruskan kembali dengan throwError(() => err) agar komponen tetap dapat merespons. Kembalikan observable cadangan (seperti of(null)) hanya jika Anda benar-benar ingin menyembunyikan error dari pemanggil.

Menormalkan error

Petakan isi error server yang beragam ke bentuk error aplikasi yang konsisten sebelum meneruskannya kembali, sehingga penanganan lanjutan menjadi lebih sederhana.

catchError((err: HttpErrorResponse) => {
  const appError = {
    code: err.status,
    message: err.error?.message ?? err.message
  };
  return throwError(() => appError);
})

Membedakan error klien dan server

err.error instanceof ErrorEvent (atau err.status === 0) menunjukkan error klien/jaringan; selain itu, backend mengembalikan status error. Tangani keduanya secara berbeda.

Menghindari penanganan ganda

Jika interceptor sudah menampilkan toast, komponen juga tidak boleh menampilkannya untuk error yang sama. Tentukan satu lapisan penanganan yang terlihat oleh pengguna untuk menghindari pesan duplikat.

Mencatat ke layanan pemantauan

Interceptor terpusat adalah tempat yang ideal untuk meneruskan error ke alat pemantauan (Sentry, dan sebagainya) bersama konteks permintaan.

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const monitor = inject(MonitoringService);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      monitor.captureHttpError(req.url, err.status, err.message);
      return throwError(() => err);
    })
  );
};

Mengurutkan interceptor error

Tempatkan interceptor error sedemikian rupa agar membungkus interceptor lainnya, sehingga dapat menangkap error dari seluruh rantai (termasuk percobaan ulang).

provideHttpClient(
  withInterceptors([authInterceptor, retryInterceptor, errorInterceptor])
)

Pemeriksaan Singkat

Uji pemahaman Anda tentang penanganan error global.

Ringkasan: Menangani Error Secara Global

Interceptor error memusatkan penanganan kegagalan HTTP.

Gunakan catchError pada next(req).
Buat percabangan berdasarkan HttpErrorResponse.status (misalnya alihkan saat 401).
Teruskan kembali agar komponen dapat merespons; telan error hanya jika memang diinginkan.

Berikutnya: percobaan ulang dan indikator pemuatan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menangani Kesalahan Secara Global” gratis?

Ya — teks lengkap “Menangani Kesalahan Secara Global” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menangani Kesalahan Secara Global”?

Tangkap dan ubah kesalahan HTTP secara terpusat. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Menangani Kesalahan Secara Global” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy