Pembahasan

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:

app/routes/product.tsx

import type { Route } from "./+types/product";

export async function loader({ params }: Route.LoaderArgs) {
  // Simulasi error
  throw new Error("Something went wrong");
}

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.

app/routes/product.tsx

import type { Route } from "./+types/product";

export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
  return (
    <div>
      <h1>Waduh error</h1>
      <p>Hidup jokowi!</p>
    </div>
  );
}

// kode yang lain

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.

app/root.tsx

// kode yang lain

  if (isRouteErrorResponse(error)) {
    message = error.status === 404 ? "404" : "Error";
    details =
      error.status === 404
        ? "The requested page could not be found."
        : error.statusText || details;
  } else if (import.meta.env.DEV && error && error instanceof Error) {
    details = error.message;
    stack = error.stack;
  }

// kode yang lain juga

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

app/routes/product.tsx

import type { Route } from "./+types/product";

export async function loader({ params }: Route.LoaderArgs) {
  const product = await db.getProduct(params.pid);
  
  if (!product) {
    // kalo produk nggak ketemu, return 404
    return data(
      { message: "Product not found" },
      { status: 404 }
    );
  }

  return product;
}

// kode yang lain

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

app/routes/product.tsx

import type { Route } from "./+types/product";

export async function loader({ params }: Route.LoaderArgs) {
  try {
    const product = await db.getProduct(params.pid);
    return product;
  } catch (error) {
    // kalo ada error, lempar error
    throw new Error("Failed to load product");
  }
}

// kode yang lain

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.

Error Handling

Sudah paham pelajaran ini?

Diskusi