React ত্রুটি বাউন্ডারি ত্রুটি শ্রেণীবিভাগ: একটি বিস্তারিত গাইড

একটি শক্তিশালী এবং রক্ষণাবেক্ষণযোগ্য React অ্যাপ্লিকেশন তৈরির জন্য ত্রুটি হ্যান্ডলিং একটি গুরুত্বপূর্ণ দিক। React-এর Error Boundaries রেন্ডারিংয়ের সময় ঘটে যাওয়া ত্রুটিগুলি সুন্দরভাবে পরিচালনা করার একটি প্রক্রিয়া সরবরাহ করে, তবে একটি সত্যিকারের স্থিতিস্থাপক অ্যাপ্লিকেশন তৈরি করতে বিভিন্ন ত্রুটির ধরনগুলি কীভাবে শ্রেণীবদ্ধ করতে হয় এবং সেগুলির প্রতিক্রিয়া জানাতে হয় তা বোঝা অত্যন্ত গুরুত্বপূর্ণ। এই গাইডটি Error Boundaries-এর মধ্যে ত্রুটি শ্রেণীবিভাগের বিভিন্ন পদ্ধতির অনুসন্ধান করে, আপনার ত্রুটি পরিচালনা কৌশলকে উন্নত করতে ব্যবহারিক উদাহরণ এবং কার্যকরী ধারণা প্রদান করে।

React Error Boundaries কি?

React 16-এ প্রবর্তিত, Error Boundaries হল React উপাদান যা তাদের চাইল্ড কম্পোনেন্ট ট্রিতে যেকোনো জায়গায় জাভাস্ক্রিপ্ট ত্রুটিগুলি ধরে, সেই ত্রুটিগুলি লগ করে এবং সম্পূর্ণ কম্পোনেন্ট ট্রি ক্র্যাশ করার পরিবর্তে একটি ফলব্যাক UI প্রদর্শন করে। এগুলি try...catch ব্লকের মতোই কাজ করে, তবে কম্পোনেন্টগুলির জন্য।

Error Boundaries-এর মূল বৈশিষ্ট্যগুলি:

• উপাদান-স্তরের ত্রুটি হ্যান্ডলিং: নির্দিষ্ট উপাদান সাবট্রিগুলির মধ্যে ত্রুটিগুলি আলাদা করুন।
• সুন্দর অবনতি: একটি একক উপাদান ত্রুটির কারণে পুরো অ্যাপ্লিকেশনটিকে ক্র্যাশ হওয়া থেকে প্রতিরোধ করুন।
• নিয়ন্ত্রিত ফলব্যাক UI: একটি ত্রুটি ঘটলে ব্যবহারকারী-বান্ধব বার্তা বা বিকল্প সামগ্রী প্রদর্শন করুন।
• ত্রুটি লগিং: ত্রুটি তথ্য লগ করে ত্রুটি ট্র্যাকিং এবং ডিবাগিং সহজতর করুন।

কেন Error Boundaries-এ ত্রুটিগুলি শ্রেণীবদ্ধ করবেন?

কেবল ত্রুটি ধরা যথেষ্ট নয়। কার্যকর ত্রুটি হ্যান্ডলিংয়ের জন্য কি ভুল হয়েছে তা বোঝা এবং সেই অনুযায়ী প্রতিক্রিয়া জানানো প্রয়োজন। Error Boundaries-এর মধ্যে ত্রুটিগুলি শ্রেণীবদ্ধ করা বেশ কয়েকটি সুবিধা দেয়:

• লক্ষ্যযুক্ত ত্রুটি হ্যান্ডলিং: বিভিন্ন ত্রুটির ধরনের জন্য বিভিন্ন প্রতিক্রিয়ার প্রয়োজন হতে পারে। উদাহরণস্বরূপ, একটি নেটওয়ার্ক ত্রুটির জন্য একটি পুনরায় চেষ্টা করার পদ্ধতির প্রয়োজন হতে পারে, যেখানে একটি ডেটা বৈধতা ত্রুটির জন্য ব্যবহারকারীর ইনপুট সংশোধন করার প্রয়োজন হতে পারে।
• উন্নত ব্যবহারকারীর অভিজ্ঞতা: ত্রুটির ধরনের উপর ভিত্তি করে আরও তথ্যপূর্ণ ত্রুটি বার্তা প্রদর্শন করুন। একটি সাধারণ “কিছু ভুল হয়েছে” বার্তা একটি নির্দিষ্ট বার্তা যা নেটওয়ার্ক সমস্যা বা অবৈধ ইনপুট নির্দেশ করে তার চেয়ে কম সহায়ক।
• উন্নত ডিবাগিং: ত্রুটিগুলি শ্রেণীবদ্ধ করা ডিবাগিংয়ের জন্য মূল্যবান প্রেক্ষাপট সরবরাহ করে এবং সমস্যাগুলির মূল কারণ চিহ্নিত করে।
• সক্রিয় পর্যবেক্ষণ: পুনরাবৃত্ত সমস্যাগুলি সনাক্ত করতে এবং ফিক্সগুলিকে অগ্রাধিকার দিতে বিভিন্ন ত্রুটির প্রকারের ফ্রিকোয়েন্সি ট্র্যাক করুন।
• কৌশলগত ফলব্যাক UI: ত্রুটিগুলির উপর নির্ভর করে বিভিন্ন ফলব্যাক UI প্রদর্শন করুন, যা ব্যবহারকারীকে আরও প্রাসঙ্গিক তথ্য বা ক্রিয়াকলাপ সরবরাহ করে।

ত্রুটি শ্রেণীবিভাগের পদ্ধতি

React Error Boundaries-এর মধ্যে ত্রুটিগুলি শ্রেণীবদ্ধ করতে বেশ কয়েকটি কৌশল ব্যবহার করা যেতে পারে:

1. instanceof ব্যবহার করে

instanceof অপারেটর পরীক্ষা করে যে একটি অবজেক্ট একটি নির্দিষ্ট শ্রেণীর উদাহরণ কিনা। এটি তাদের অন্তর্নির্মিত বা কাস্টম ত্রুটির প্রকারের উপর ভিত্তি করে ত্রুটিগুলি শ্রেণীবদ্ধ করার জন্য উপযোগী।

উদাহরণ:

class NetworkError extends Error {
  constructor(message) {
    super(message);
    this.name = "NetworkError";
  }
}

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

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

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      let errorMessage = "কিছু ভুল হয়েছে।";
      if (this.state.error instanceof NetworkError) {
        errorMessage = "একটি নেটওয়ার্ক ত্রুটি ঘটেছে। অনুগ্রহ করে আপনার সংযোগটি পরীক্ষা করুন এবং আবার চেষ্টা করুন।";
      } else if (this.state.error instanceof ValidationError) {
        errorMessage = "একটি বৈধতা ত্রুটি ছিল। অনুগ্রহ করে আপনার ইনপুট পর্যালোচনা করুন।";
      }

      return (
        <div>
          <h2>ত্রুটি!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

ব্যাখ্যা:

• কাস্টম NetworkError এবং ValidationError ক্লাসগুলি বিল্ট-ইন Error ক্লাস প্রসারিত করে সংজ্ঞায়িত করা হয়েছে।
• MyErrorBoundary উপাদানের render পদ্ধতিতে, ধরা পড়া ত্রুটির ধরন পরীক্ষা করতে instanceof অপারেটর ব্যবহার করা হয়।
• ত্রুটির ধরনের উপর ভিত্তি করে, ফলব্যাক UI-তে একটি নির্দিষ্ট ত্রুটি বার্তা প্রদর্শিত হয়।

2. ত্রুটি কোড বা বৈশিষ্ট্য ব্যবহার করে

আরেকটি পদ্ধতি হল ত্রুটি বস্তুর মধ্যে ত্রুটি কোড বা বৈশিষ্ট্য অন্তর্ভুক্ত করা। এটি নির্দিষ্ট ত্রুটির দৃশ্যের উপর ভিত্তি করে আরও সূক্ষ্ম-দানাযুক্ত শ্রেণীবিভাগের জন্য অনুমতি দেয়।

উদাহরণ:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          const error = new Error("নেটওয়ার্কের অনুরোধ ব্যর্থ হয়েছে");
          error.code = response.status; // Add a custom error code
          reject(error);
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

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

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      let errorMessage = "কিছু ভুল হয়েছে।";
      if (this.state.error.code === 404) {
        errorMessage = "সংস্থান পাওয়া যায়নি।";
      } else if (this.state.error.code >= 500) {
        errorMessage = "সার্ভার ত্রুটি। অনুগ্রহ করে পরে আবার চেষ্টা করুন।";
      }

      return (
        <div>
          <h2>ত্রুটি!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

ব্যাখ্যা:

• fetchData ফাংশনটি ত্রুটি বস্তুতে একটি code বৈশিষ্ট্য যুক্ত করে, যা HTTP স্ট্যাটাস কোডকে প্রতিনিধিত্ব করে।
• MyErrorBoundary উপাদানটি নির্দিষ্ট ত্রুটির দৃশ্য নির্ধারণ করতে code বৈশিষ্ট্যটি পরীক্ষা করে।
• ত্রুটি কোডের উপর ভিত্তি করে, বিভিন্ন ত্রুটি বার্তা প্রদর্শিত হয়।

3. একটি কেন্দ্রীভূত ত্রুটি ম্যাপিং ব্যবহার করে

জটিল অ্যাপ্লিকেশনগুলির জন্য, একটি কেন্দ্রীভূত ত্রুটি ম্যাপিং বজায় রাখা কোড সংগঠন এবং রক্ষণাবেক্ষণযোগ্যতা উন্নত করতে পারে। এর মধ্যে একটি ডিকশনারী বা অবজেক্ট তৈরি করা জড়িত যা নির্দিষ্ট ত্রুটি বার্তা এবং হ্যান্ডলিং যুক্তিতে ত্রুটির প্রকার বা কোডগুলি ম্যাপ করে।

উদাহরণ:

const errorMap = {
  "NETWORK_ERROR": {
    message: "একটি নেটওয়ার্ক ত্রুটি ঘটেছে। আপনার সংযোগ পরীক্ষা করুন।",
    retry: true,
  },
  "INVALID_INPUT": {
    message: "অবৈধ ইনপুট। আপনার ডেটা পর্যালোচনা করুন।",
    retry: false,
  },
  404: {
    message: "সংস্থান পাওয়া যায়নি।",
    retry: false,
  },
  500: {
    message: "সার্ভার ত্রুটি। অনুগ্রহ করে পরে আবার চেষ্টা করুন।",
    retry: true,
  },
  "DEFAULT": {
    message: "কিছু ভুল হয়েছে।",
    retry: false,
  },
};

function handleCustomError(errorType) {
    const errorDetails = errorMap[errorType] || errorMap["DEFAULT"];
    return errorDetails;
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

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

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message } = this.state.errorDetails;
      return (
        <div>
          <h2>ত্রুটি!</h2>
          <p>{message}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorDetails.message}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

function MyComponent(){
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      try {
        throw new Error("NETWORK_ERROR");
      } catch (e) {
        throw e;
      }
    }, []);

    return <div></div>;
}

ব্যাখ্যা:

• errorMap অবজেক্ট ত্রুটির তথ্য সংরক্ষণ করে, যার মধ্যে বার্তা এবং পুনরায় চেষ্টা করার পতাকা রয়েছে, ত্রুটির প্রকার বা কোডের উপর ভিত্তি করে।
• handleCustomError ফাংশনটি ত্রুটি বার্তার উপর ভিত্তি করে errorMap থেকে ত্রুটির বিবরণ পুনরুদ্ধার করে এবং কোনো নির্দিষ্ট কোড না পাওয়া গেলে ডিফল্ট ফেরত দেয়।
• MyErrorBoundary উপাদানটি errorMap থেকে উপযুক্ত ত্রুটি বার্তা পেতে handleCustomError ব্যবহার করে।

ত্রুটি শ্রেণীবিভাগের জন্য সেরা অনুশীলন

• স্পষ্ট ত্রুটির প্রকারগুলি সংজ্ঞায়িত করুন: আপনার অ্যাপ্লিকেশনের জন্য ত্রুটির প্রকার বা কোডের একটি ধারাবাহিক সেট স্থাপন করুন।
• প্রাসঙ্গিক তথ্য সরবরাহ করুন: ডিবাগিং সহজতর করার জন্য ত্রুটি বস্তুগুলিতে প্রাসঙ্গিক বিবরণ অন্তর্ভুক্ত করুন।
• ত্রুটি হ্যান্ডলিং লজিককে কেন্দ্রীভূত করুন: ত্রুটি হ্যান্ডলিংকে সামঞ্জস্যপূর্ণভাবে পরিচালনা করতে একটি কেন্দ্রীভূত ত্রুটি ম্যাপিং বা ইউটিলিটি ফাংশন ব্যবহার করুন।
• কার্যকরভাবে ত্রুটি লগ করুন: উৎপাদনে ত্রুটিগুলি ট্র্যাক এবং বিশ্লেষণ করতে ত্রুটি রিপোর্টিং পরিষেবাগুলির সাথে একীভূত হন। জনপ্রিয় পরিষেবাগুলির মধ্যে রয়েছে Sentry, Rollbar, এবং Bugsnag।
• ত্রুটি হ্যান্ডলিং পরীক্ষা করুন: আপনার Error Boundaries বিভিন্ন ত্রুটির প্রকারগুলি সঠিকভাবে পরিচালনা করে কিনা তা যাচাই করতে ইউনিট পরীক্ষা লিখুন।
• ব্যবহারকারীর অভিজ্ঞতা বিবেচনা করুন: ব্যবহারকারীদের সমাধানে গাইড করে এমন তথ্যপূর্ণ এবং ব্যবহারকারী-বান্ধব ত্রুটি বার্তা প্রদর্শন করুন। প্রযুক্তিগত শব্দ ব্যবহার করা এড়িয়ে চলুন।
• ত্রুটির হার নিরীক্ষণ করুন: পুনরাবৃত্ত সমস্যাগুলি সনাক্ত করতে এবং ফিক্সগুলিকে অগ্রাধিকার দিতে বিভিন্ন ত্রুটির প্রকারের ফ্রিকোয়েন্সি ট্র্যাক করুন।
• আন্তর্জাতিকীকরণ (i18n): ব্যবহারকারীর কাছে ত্রুটি বার্তা উপস্থাপন করার সময়, নিশ্চিত করুন যে আপনার বার্তাগুলি বিভিন্ন ভাষা এবং সংস্কৃতি সমর্থন করার জন্য সঠিকভাবে আন্তর্জাতিক করা হয়েছে। অনুবাদগুলি পরিচালনা করতে i18next বা React-এর Context API-এর মতো লাইব্রেরি ব্যবহার করুন।
• অ্যাক্সেসযোগ্যতা (a11y): নিশ্চিত করুন যে আপনার ত্রুটি বার্তাগুলি অক্ষমতাযুক্ত ব্যবহারকারীদের জন্য অ্যাক্সেসযোগ্য। স্ক্রিন রিডারগুলিতে অতিরিক্ত প্রসঙ্গ সরবরাহ করতে ARIA বৈশিষ্ট্য ব্যবহার করুন।
• নিরাপত্তা: ত্রুটি বার্তাগুলিতে আপনি যে তথ্য প্রদর্শন করেন সে সম্পর্কে সতর্ক থাকুন, বিশেষ করে উৎপাদন পরিবেশে। আক্রমণকারীদের দ্বারা শোষিত হতে পারে এমন সংবেদনশীল ডেটা প্রকাশ করা এড়িয়ে চলুন। উদাহরণস্বরূপ, শেষ-ব্যবহারকারীদের কাছে কাঁচা স্ট্যাক ট্রেস প্রদর্শন করবেন না।

উদাহরণ পরিস্থিতি: একটি ই-কমার্স অ্যাপ্লিকেশনে API ত্রুটিগুলি পরিচালনা করা হচ্ছে

একটি ই-কমার্স অ্যাপ্লিকেশন বিবেচনা করুন যা একটি API থেকে পণ্যের তথ্য পুনরুদ্ধার করে। সম্ভাব্য ত্রুটির পরিস্থিতিগুলির মধ্যে রয়েছে:

• নেটওয়ার্ক ত্রুটি: API সার্ভার অনুপলব্ধ বা ব্যবহারকারীর ইন্টারনেট সংযোগে বাধা।
• প্রমাণীকরণ ত্রুটি: ব্যবহারকারীর প্রমাণীকরণ টোকেন অবৈধ বা মেয়াদোত্তীর্ণ।
• সংস্থান পাওয়া যায়নি ত্রুটি: অনুরোধ করা পণ্যটি বিদ্যমান নেই।
• সার্ভার ত্রুটি: API সার্ভারে একটি অভ্যন্তরীণ ত্রুটি দেখা দেয়।

Error Boundaries এবং ত্রুটি শ্রেণীবিভাগ ব্যবহার করে, অ্যাপ্লিকেশনটি এই পরিস্থিতিগুলি সুন্দরভাবে পরিচালনা করতে পারে:

// Example (Simplified)
async function fetchProduct(productId) {
  try {
    const response = await fetch(`/api/products/${productId}`);
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error("PRODUCT_NOT_FOUND");
      } else if (response.status === 401 || response.status === 403) {
        throw new Error("AUTHENTICATION_ERROR");
      } else {
        throw new Error("SERVER_ERROR");
      }
    }
    return await response.json();
  } catch (error) {
    if (error instanceof TypeError && error.message === "Failed to fetch") {
      throw new Error("NETWORK_ERROR");
    }
    throw error;
  }
}

class ProductErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    const errorDetails = handleCustomError(error.message); // Use errorMap as shown previously
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message, retry } = this.state.errorDetails;
      return (
        <div>
          <h2>ত্রুটি!</h2>
          <p>{message}</p>
          {retry && <button onClick={() => window.location.reload()}>আবার চেষ্টা করুন</button>}
        </div>
      );
    }

    return this.props.children;
  }
}

ব্যাখ্যা:

• fetchProduct ফাংশনটি API প্রতিক্রিয়া স্থিতির কোড পরীক্ষা করে এবং স্থিতির উপর ভিত্তি করে নির্দিষ্ট ত্রুটির ধরন নিক্ষেপ করে।
• ProductErrorBoundary উপাদানটি এই ত্রুটিগুলি ধরে এবং উপযুক্ত ত্রুটি বার্তা প্রদর্শন করে।
• নেটওয়ার্ক ত্রুটি এবং সার্ভার ত্রুটিগুলির জন্য, একটি “আবার চেষ্টা করুন” বোতাম প্রদর্শিত হয়, যা ব্যবহারকারীকে আবার অনুরোধ করার অনুমতি দেয়।
• প্রমাণীকরণ ত্রুটির জন্য, ব্যবহারকারীকে লগইন পৃষ্ঠায় পুনর্নির্দেশিত করা যেতে পারে।
• সংস্থান পাওয়া যায়নি ত্রুটির জন্য, পণ্যটি বিদ্যমান নেই তা নির্দেশ করে একটি বার্তা প্রদর্শিত হয়।

উপসংহার

রিয়্যাক্ট Error Boundaries-এর মধ্যে ত্রুটিগুলি শ্রেণীবদ্ধ করা স্থিতিস্থাপক, ব্যবহারকারী-বান্ধব অ্যাপ্লিকেশন তৈরির জন্য অপরিহার্য। instanceof পরীক্ষা, ত্রুটি কোড এবং কেন্দ্রীভূত ত্রুটি ম্যাপিংয়ের মতো কৌশলগুলি ব্যবহার করে, আপনি কার্যকরভাবে বিভিন্ন ত্রুটির পরিস্থিতি পরিচালনা করতে পারেন এবং আরও ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে পারেন। আপনার অ্যাপ্লিকেশনটি অপ্রত্যাশিত পরিস্থিতিগুলি সুন্দরভাবে পরিচালনা করে তা নিশ্চিত করতে ত্রুটি হ্যান্ডলিং, লগিং এবং পরীক্ষার জন্য সেরা অনুশীলনগুলি অনুসরণ করতে ভুলবেন না।

এই কৌশলগুলি প্রয়োগ করার মাধ্যমে, আপনি আপনার React অ্যাপ্লিকেশনগুলির স্থিতিশীলতা এবং রক্ষণাবেক্ষণযোগ্যতা উল্লেখযোগ্যভাবে উন্নত করতে পারেন, যা আপনার ব্যবহারকারীদের জন্য, তাদের অবস্থান বা পটভূমি নির্বিশেষে একটি মসৃণ এবং আরও নির্ভরযোগ্য অভিজ্ঞতা প্রদান করে।

আরও সংস্থান:

• React Error Boundaries Documentation
• Sentry'র গাইড টু React 16 Error Boundaries
• রবিন উইয়ারুচের React Error Boundary টিউটোরিয়াল