تسلط بر مرزهای خطا در React: راهنمای مدیریت موثر خطا

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;
  }
}

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

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

 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}/pre>
     /div>
   );
 }

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

 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}/pre>
     /div>
   );
 }

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

 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}/pre>
     /div>
   );
 }
 // You can use fallback / fallbackRender / FallbackComponent anything
 const App = () => {
 return ErrorBoundary 
 FallbackComponent={Fallback}
 onError={logError}
 onReset={(details) => {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 /ErrorBoundary>
 }

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

"use client";