Frontend Academy · Pelajaran

Sempadan Ralat

Laksanakan Sempadan Ralat berasaskan kelas dengan componentDidCatch dan getDerivedStateFromError untuk menghalang ralat pemaparan yang tidak ditangkap daripada menyebabkan keseluruhan aplikasi ranap.

Pelajaran 4 daripada 414 langkah

Sempadan Ralat ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Mengapa Sempadan Ralat?

Ralat yang tidak ditangkap semasa pemaparan, dalam kaedah kitar hayat atau dalam pembina akan merosakkan seluruh pepohon React secara lalai. Sempadan Ralat menangkap ralat ini dalam subpepohon dan membolehkan anda memaparkan fallback sebagai gantinya.

Hanya Komponen Kelas

Sempadan Ralat mestilah komponen kelas (masih pada tahun 2026 — belum ada padanan cangkuk). Cangkuk useErrorBoundary wujud dalam pustaka seperti react-error-boundary.

getDerivedStateFromError

Kaedah statik yang dipanggil apabila komponen turunan mencetuskan ralat. Pulangkan kemas kini keadaan yang mencetuskan pemaparan fallback.

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

componentDidCatch untuk Pengelogan

Gunakan componentDidCatch untuk mencatat ralat kepada perkhidmatan (Sentry, Datadog) — ia menerima kedua-dua ralat dan pepohon komponen React.

componentDidCatch(error, errorInfo) {
  Sentry.captureException(error, {
    contexts: { react: { componentStack: errorInfo.componentStack } }
  });
}

Membungkus Akar Aplikasi

Bungkus Aplikasi peringkat teratas anda dalam Sempadan Ralat untuk mengelakkan skrin kosong sepenuhnya.

<ErrorBoundary fallback={<GlobalErrorPage />}>
  <App />
</ErrorBoundary>

Sempadan Terperinci bagi Setiap Laluan atau Widget

Satu sempadan global ialah minimum. Tambahkan sempadan bagi setiap laluan supaya ranap dalam satu bahagian tidak mengosongkan seluruh aplikasi.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/dashboard" element={
    <ErrorBoundary fallback={<DashboardError />}>
      <Dashboard />
    </ErrorBoundary>
  } />
</Routes>

Perkara yang TIDAK ditangkap oleh Sempadan Ralat

Sempadan ralat TIDAK menangkap: ralat dalam pengendali peristiwa, kod tak segerak (setTimeout, janji), ralat yang dilontarkan semasa SSR, atau ralat dalam sempadan itu sendiri. Gunakan try/catch di tempat-tempat ini.

Ralat Pengendali Peristiwa

Bungkus pengendali peristiwa dengan try/catch dan panggil fungsi reportError secara manual.

function Button() {
  function onClick() {
    try {
      riskyOperation();
    } catch (err) {
      reportError(err);
      toast.error('Something went wrong');
    }
  }
  return <button onClick={onClick}>Click</button>;
}

Pustaka react-error-boundary

Pakej komuniti react-error-boundary menyediakan API yang sesuai untuk komponen fungsi, bersama sokongan tetapan semula.

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

<ErrorBoundary
  fallbackRender={({ error, resetErrorBoundary }) => (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )}
  onReset={() => refetch()}
>
  <DataView />
</ErrorBoundary>

Menetapkan Semula Semasa Pemulihan

Sediakan cara untuk pulih, seperti butang cuba lagi atau perubahan laluan. Sempadan tersebut hendaklah menetapkan semula keadaannya supaya tidak lagi memaparkan sandaran.

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  reset = () => this.setState({ hasError: false });
  render() {
    if (this.state.hasError) {
      return <button onClick={this.reset}>Retry</button>;
    }
    return this.props.children;
  }
}

Pembangunan berbanding Pengeluaran

Dalam pembangunan, React masih memaparkan tindanan ralat merah walaupun terdapat sempadan — ini memang disengajakan. Dalam pengeluaran, hanya sandaran sempadan yang dipaparkan.

Amalan Terbaik

1) Sempadan global pada punca app. 2) Sempadan bagi setiap laluan. 3) Sempadan terperinci di sekeliling widget yang berasingan. 4) Sentiasa catatkan ralat ke perkhidmatan penjejakan. 5) Paparkan tindakan pemulihan, seperti cuba lagi atau kembali ke halaman utama. 6) Jangan abaikan ralat secara senyap.

Semakan Pantas

Apakah jenis ralat yang TIDAK ditangkap oleh Sempadan Ralat React?

Jawab dalam pelajaran interaktif

Imbas Kembali: Sempadan Ralat

Komponen kelas dengan getDerivedStateFromError statik serta componentDidCatch. Membungkus subpepohon untuk menangkap ralat semasa pemaparan. Tidak menangkap pengendali peristiwa, kod tak segerak atau SSR. Letakkan sempadan global pada punca app, di samping sempadan bagi setiap laluan dan widget. Catatkan ralat ke Sentry. Tawarkan tindakan pemulihan. Gunakan pustaka react-error-boundary untuk pengalaman penggunaan API yang lebih kemas.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Sempadan Ralat” percuma?

Ya — teks penuh “Sempadan Ralat” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Sempadan Ralat”?

Laksanakan Sempadan Ralat berasaskan kelas dengan componentDidCatch dan getDerivedStateFromError untuk menghalang ralat pemaparan yang tidak ditangkap daripada menyebabkan keseluruhan aplikasi ranap. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Sempadan Ralat” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy