Error Handling

Setiap ada error yang terjadi di aplikasi lo, React Router bakal nge-trigger ErrorBoundary yang ada di app/root.tsx. Lo bisa coba test ini dengan bikin error kayak gini:

Dengan begini, ErrorBoundary yang ada di app/root.tsx bakal di-render.

Kalo seandainya lo rajin dan mau bikin error handling yang lebih spesifik buat setiap route, lo bisa bikin ErrorBoundary di dalam route module itu sendiri.

Variable error di dalam ErrorBoundary ini bisa beda-beda tergantung dari error yang terjadi. Maka dari itu lo bisa cek tipe error-nya kayak yang udah dicontohin di file app/root.tsx.

Kalo error yang terjadi hasil dari data dengan status code dan text, branch isRouteErrorResponse bakal dipake. Contohnya:

Selain itu, kalo error yang terjadi adalah instance dari Error, branch error instanceof Error bakal dipake. Contohnya:

Kalo lo bikin beberapa ErrorBoundary, React Router bakal nge-render ErrorBoundary yang paling dekat dengan sumber error terjadi. Misal, kalo ada error di dalam Product component, maka ErrorBoundary yang ada di Product yang bakal di-render. Kalo nggak ada, maka ErrorBoundary parent-nya yang bakal di-render, sampai ke ErrorBoundary yang ada di app/root.tsx.