Rumah > Artikel > hujung hadapan web > Menguasai Sempadan Ralat dalam Reaksi: Panduan untuk Pengendalian Ralat yang Berkesan

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

WBOYasal: 2024-07-20 00:55:30707semak imbas

Mastering Error Boundaries in React: A Guide to Effective Error Handling

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 */ }

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 */ }

3. Saya mahu Log kesilapan saya

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

 const logError = (error: Error, info: { componentStack: string }) => {
   // Do something with the error, e.g. log to an external API
 };

 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}

); } // You can use fallback / fallbackRender / FallbackComponent anything const App = () => { return { // Reset the state of your app so the error doesn't happen again }} > /* rest of your component */ }

4. Saya ingin menangkap ralat dalam pengendali acara & kod async

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

 function Example() {
   const { showBoundary } = useErrorBoundary();
   const getGreeting = async(name) => {
     try {
         const response = await fetchGreeting(name);
         // rest of your code
     } catch(error){
          // Show error boundary
         showBoundary(error);
     }
   }
   useEffect(() => {
    getGreeting()
   });

   return <Whatever UI you want to render/>
 }

Beberapa gotchas

ErrorBoundary ialah komponen pelanggan. Anda hanya boleh menghantar props yang boleh bersiri atau menggunakannya dalam fail yang mempunyai "pengguna klien"; arahan.

1. Apakah prop boleh bersiri?

Prop Serilzable bermakna ia boleh ditukar kepada strim bait dengan cara yang strim bait boleh ditukar kembali kepada prop asal.

Cara biasa untuk melakukannya dalam Javascript ialah JSON.stringify() & JSON.parse().

2. Cara menggunakan "use client"; arahan?

Sebut sahaja di bahagian atas fail

"use client";

Ada beberapa lagi variasi yang anda boleh gunakan. Tetapi artikel ini cukup bagus untuk membantu anda bermula.

Lihat dokumentasi penuh mereka di sini.

Sila beritahu saya dalam ulasan jika anda rasa ia membantu.

Selamat Pengekodan!

Atas ialah kandungan terperinci Menguasai Sempadan Ralat dalam Reaksi: Panduan untuk Pengendalian Ralat yang Berkesan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!