Cara Trigger React Error Boundary (Dev dan Test)

4 menit baca.
Tags: reactjavascriptjest

React error boundary cuma bekerja kalau error-nya kamu trigger di tempat yang benar. Kalau throw-nya di tempat yang salah, boundary tidak jalan dan kelihatannya seperti rusak.

Ini cara paling praktis untuk trigger React error boundary di development dan testing.

Error boundary sebenarnya menangkap apa

React error boundary menangkap error dari:

  • rendering
  • lifecycle methods
  • constructor di child component

Error boundary tidak menangkap error dari:

  • event handler
  • async callback seperti setTimeout
  • server-side rendering

Jadi kalau kamu klik tombol lalu throw di onClick, fallback boundary biasanya tidak muncul.

Cara cepat trigger di development

Cara paling gampang: throw saat render pakai debug flag:

function Profile({ shouldCrash }: { shouldCrash: boolean }) {
  if (shouldCrash) {
    throw new Error("Intentional crash for testing boundary");
  }

  return <div>Profile loaded</div>;
}

Wrap dengan boundary:

import { ErrorBoundary } from "react-error-boundary";

<ErrorBoundary fallback={<p>Something went wrong.</p>}>
  <Profile shouldCrash={true} />
</ErrorBoundary>;

Kalau fallback tampil, berarti setup React error boundary kamu sudah benar.

Pola test yang reliable di Jest

Pakai komponen yang throw saat render, lalu assert fallback-nya.

import { render, screen } from "@testing-library/react";
import { ErrorBoundary } from "react-error-boundary";

function CrashOnRender() {
  throw new Error("boom");
}

test("renders fallback when child crashes", () => {
  const spy = jest.spyOn(console, "error").mockImplementation(() => {});

  render(
    <ErrorBoundary fallback={<p data-testid="fallback">Fallback</p>}>
      <CrashOnRender />
    </ErrorBoundary>,
  );

  expect(screen.getByTestId("fallback")).toBeInTheDocument();
  spy.mockRestore();
});

Kenapa console.error di-mock? React akan log error saat test jalan, jadi output test bisa berisik. Behavior tetap dites, log noise berkurang.

Catatan penting soal event handler

Kalau failure terjadi di onClick, React error boundary tidak akan menangkapnya secara otomatis.

Pakai useErrorBoundary dari react-error-boundary, lalu teruskan error-nya:

import { useErrorBoundary } from "react-error-boundary";

function SaveButton() {
  const { showBoundary } = useErrorBoundary();

  const handleClick = async () => {
    try {
      await saveData();
    } catch (error) {
      showBoundary(error);
    }
  };

  return <button onClick={handleClick}>Save</button>;
}

Dengan pola ini, error dari async flow atau event-driven code tetap bisa masuk ke fallback boundary.

Kesimpulan

Untuk trigger React error boundary, throw saat render untuk cek cepat, dan pakai komponen crash di Jest untuk test yang stabil. Untuk error di event handler atau async code, kirim error secara eksplisit pakai showBoundary.

Related Posts