Menguasai Sempadan Ralat dalam Reaksi: Panduan untuk Pengendalian Ralat yang Berkesan

Apakah Sempadan Ralat?

Semasa membina aplikasi, ralat tidak dapat dielakkan. Ia mungkin datang daripada API, UI atau dari beberapa tempat lain.

Sangat penting untuk mengendalikan ralat ini dengan anggun & mengekalkan UX yang baik walaupun terdapat ralat ini.

Sempadan Ralat ialah salah satu cara pengendalian ralat dalam React.

---

Bagaimanakah Ralat Sempadan membantu?

Untuk memahami perkara ini, mari kita fahami situasi sebelum pengenalan Sempadan Ralat.

Sebelum Had Ralat, ralat yang berlaku di dalam komponen akhirnya merebak & memecahkan UI atau memaparkan skrin putih.

Ini menyebabkan UX yang sangat teruk.

Sempadan Ralat membantu kami mengendalikan ralat tersebut & memaparkan UI sandaran dan bukannya memecahkan UI atau skrin putih yang dipaparkan.

---

Bagaimana untuk menggunakan Error Boundary?

React v16 secara rasmi memperkenalkan Sempadan Ralat.

Ia adalah Komponen Berasaskan Kelas yang boleh digunakan untuk membalut aplikasi anda.

Ia menerima UI sandaran untuk dipaparkan sekiranya aplikasi anda mempunyai ralat atau sebaliknya, ia hanya menjadikan komponen kanak-kanak untuk menyambung semula aliran biasa aplikasi anda.

Beginilah cara Dokumentasi React mengesyorkan menggunakannya,

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}

---

Apakah masalah dengan Sempadan Ralat React?

Ia tidak dapat menangkap ralat yang berlaku dalam,

• Pengendali Acara (ralat ini perlu dikendalikan dengan blok cuba-tangkap)
• Kod Asynchronous (API, setTimeout, requestAnimationFrame dll.)
• Pemaparan sebelah pelayan
• Ralat yang berlaku dalam Error Boundary itu sendiri
• Ia tidak berfungsi dengan Komponen Fungsian. Walaupun kita boleh menjadikannya berfungsi dengan beberapa perubahan kod.
• Cangkuk tidak boleh digunakan di dalamnya.

---

Apakah penyelesaiannya?

Terdapat pakej npm yang dipanggil react-error-boundary yang merupakan pembalut di atas komponen Error Boundary tradisional.

Menggunakan pakej ini, kami dapat mengatasi semua isu yang dihadapi dalam komponen Sempadan Ralat tradisional.

---

Bagaimana cara menggunakannya?

Anda boleh membalut keseluruhan aplikasi anda atau anda boleh membalut komponen individu dengan .

Perincian pelaksanaan terpulang kepada anda.

Mari kita fahami cara menggunakannya.

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

const App = () => {
return <ErrorBoundary fallback={<div>Something went wrong</div>}>
/* rest of your component */
</ErrorBoundary>
}

Ini adalah contoh paling mudah menggunakan ErrorBoundary. Terdapat banyak lagi perpustakaan ini.

---

Memahami API react-error-boundary

Mari cuba memahami API dengan senario yang berbeza.

1. Saya ingin menunjukkan UI sandaran generik untuk Ralat dalam Aplikasi

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

 const App = () => {
 return <ErrorBoundary fallback={<div>Something went wrong</div>}>
 /* rest of your component */
 </ErrorBoundary>
 }

2. Saya ingin menunjukkan butiran ralat khusus dalam komponen sandaran saya

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

 function fallbackRender({ error, resetErrorBoundary }) {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     <div role="alert">
       <p>Something went wrong:</p>
       <pre style={{ color: "red" }}>{error.message}

); } const App = () => { return { // Reset the state of your app so the error doesn't happen again }} > /* rest of your component */ }

Salin selepas log masuk

Daripada membuat sandaran atau sandaranRender, anda juga boleh menggunakan Komponen Reaksi.

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

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     <div role="alert">
       <p>Something went wrong:</p>
       <pre style={{ color: "red" }}>{error.message}

); } const App = () => { return { // Reset the state of your app so the error doesn't happen again }} > /* rest of your component */ }

Salin selepas log masuk