Cara Trigger React Error Boundary (Dev dan Test)

4 menit baca.
Tags: reactjavascriptjest

Untuk trigger React error boundary, lempar error saat child component sedang render. Itu jalur yang memang ditangkap oleh error boundary di React.

Kalau error terjadi di event handler atau async callback, boundary tidak akan menangkapnya sendiri. Untuk kasus itu, catch error-nya lalu kirim ke showBoundary dari react-error-boundary.

Jawaban cepat

Untuk cek cepat di development, tambahkan crash sementara saat render:

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

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

Lalu render component itu di dalam error boundary:

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

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

Kalau fallback tampil, berarti boundary sudah terpasang dengan benar.

Error apa yang ditangkap React error boundary

React error boundary menangkap error yang terjadi di bawahnya saat:

  • rendering
  • lifecycle method
  • constructor child component

Error boundary tidak menangkap error dari:

  • event handler
  • async callback seperti setTimeout
  • server-side rendering
  • error yang dilempar di dalam error boundary itu sendiri

Bagian ini penting. Kalau kamu klik tombol lalu throw di dalam onClick, React tidak akan otomatis mengganti UI dengan fallback. Error itu terjadi setelah render, di luar jalur yang ditangani error boundary secara default.

Contoh dasar crash saat render

Pakai component kecil yang crash hanya saat diminta. Saya lebih suka pakai prop atau debug flag lokal karena mudah dihapus setelah selesai testing.

function CrashToggle({ enabled }: { enabled: boolean }) {
  if (enabled) {
    throw new Error('CrashToggle crashed on purpose');
  }

  return <p>No crash.</p>;
}

export function SettingsPage() {
  const shouldCrash = false; // Ubah ke true saat testing, lalu hapus.

  return (
    <ErrorBoundary fallback={<p>Settings failed to render.</p>}>
      <CrashToggle enabled={shouldCrash} />
    </ErrorBoundary>
  );
}

Jangan tinggalkan flag ini di kode asli. Ini hanya cara cepat untuk memastikan fallback muncul di tempat yang kamu harapkan.

Pola test Jest yang stabil

Di test, pola paling bersih tetap sama: render child component 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 a child crashes', () => {
  const consoleError = jest
    .spyOn(console, 'error')
    .mockImplementation(() => {});

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

    expect(screen.getByTestId('fallback')).toBeInTheDocument();
  } finally {
    consoleError.mockRestore();
  }
});

React akan menulis render error ke console saat test berjalan. Mock console.error membuat output test tetap rapi tanpa mengubah behavior yang sedang dites. Kalau kamu pakai Vitest, gunakan vi.spyOn sebagai pengganti jest.spyOn.

Trigger error boundary dari event handler

Error di onClick, onSubmit, timer, dan promise callback tidak otomatis masuk ke error boundary. Dengan react-error-boundary, teruskan error-nya sendiri:

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

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

  async function handleClick() {
    try {
      await saveData();
    } catch (error) {
      showBoundary(error);
    }
  }

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

Sekarang failure dari event path tetap bisa menampilkan fallback boundary. Ini berguna untuk async UI action ketika kamu ingin satu section dianggap gagal, bukan hanya menampilkan error kecil di sekitar tombol.

Cara memastikan boundary bekerja

Cek tiga hal ini:

  • Fallback muncul saat child throw ketika render.
  • Fallback tidak muncul saat crash component dimatikan.
  • Error dari event atau async code memanggil showBoundary(error) kalau memang ingin ditangani oleh boundary.

Untuk manual testing, buat crash-nya sementara dan jelas. Untuk automated test, simpan crash component di file test supaya tidak ikut masuk ke production code.

Kesalahan yang sering terjadi

Kesalahan paling umum adalah throw di dalam click handler lalu berharap boundary menangkapnya. Pakai showBoundary untuk jalur itu.

Kesalahan lain adalah memasang boundary di bawah component yang crash. Error boundary menangkap error di child, bukan di parent atau sibling component.

Cek juga fallback-nya sendiri. Kalau fallback ikut throw, hasilnya bisa terlihat seperti boundary utama gagal, padahal error kedua itu yang sebenarnya bermasalah.

Kesimpulan

Untuk trigger React error boundary, throw saat render di child component. Pakai pola itu untuk cek cepat di browser dan test Jest. Untuk event handler atau async code, catch error-nya lalu kirim ke boundary dengan showBoundary.

Related Posts