React-ல் வலுவான ரிசோர்ஸ் லோடிங்: ஹூக்குகளுடன் Error Boundaries-ஐ கையாளுதல்

நவீன வலைச் செயலிகளில், ரிசோர்ஸ்களை ஒத்திசைவற்ற முறையில் லோட் செய்வது ஒரு பொதுவான நடைமுறையாகும். அது ஒரு API-இலிருந்து தரவைப் பெறுவதாக இருந்தாலும், படங்களை லோட் செய்வதாக இருந்தாலும், அல்லது மாட்யூல்களை இறக்குமதி செய்வதாக இருந்தாலும், ரிசோர்ஸ் லோடிங்கின் போது ஏற்படக்கூடிய பிழைகளைக் கையாள்வது ஒரு சீரான பயனர் அனுபவத்திற்கு மிகவும் முக்கியமானது. React Error Boundaries, அவற்றின் கீழ் உள்ள காம்போனென்ட் ட்ரீயில் எங்கிருந்தும் ஜாவாஸ்கிரிப்ட் பிழைகளைப் பிடிக்கவும், அந்தப் பிழைகளைப் பதிவு செய்யவும், முழு செயலியையும் செயலிழக்கச் செய்வதற்குப் பதிலாக ஒரு ஃபால்பேக் UI-ஐக் காட்டவும் ஒரு வழிமுறையை வழங்குகிறது. இந்தக் கட்டுரை, React Hooks-களுடன் இணைந்து Error Boundaries-ஐப் பயன்படுத்தி ரிசோர்ஸ் லோடிங் பிழைகளை எவ்வாறு திறம்பட நிர்வகிப்பது என்பதை ஆராய்கிறது.

Error Boundaries-ஐப் புரிந்துகொள்ளுதல்

React 16-க்கு முன்பு, காம்போனென்ட் ரெண்டரிங்கின் போது கையாளப்படாத ஜாவாஸ்கிரிப்ட் பிழைகள் React-ன் உள் நிலையைச் சிதைத்து, அடுத்தடுத்த ரெண்டர்களில் குழப்பமான பிழைகளை ஏற்படுத்தும். Error Boundaries, அவற்றின் கீழ் உள்ள காம்போனென்ட்களில் ஏற்படும் பிழைகளுக்கான கேட்ச்-ஆல் பிளாக்குகளாகச் செயல்படுவதன் மூலம் இந்தப் பிரச்சனைக்குத் தீர்வு காண்கின்றன. அவை பின்வரும் லைஃப்சைக்கிள் மெத்தடுகளில் ஒன்று அல்லது இரண்டையும் செயல்படுத்தும் React காம்போனென்ட்கள் ஆகும்:

• static getDerivedStateFromError(error): இந்த ஸ்டேடிக் மெத்தட், ஒரு கீழ்நிலை காம்போனென்டால் பிழை ஏற்பட்ட பிறகு அழைக்கப்படுகிறது. இது ஏற்பட்ட பிழையை ஒரு ஆர்குமென்டாகப் பெற்று, காம்போனென்டின் ஸ்டேட்டைப் புதுப்பிக்க ஒரு மதிப்பைத் திருப்பியளிக்கிறது.
• componentDidCatch(error, info): இந்த லைஃப்சைக்கிள் மெத்தட், ஒரு கீழ்நிலை காம்போனென்டால் பிழை ஏற்பட்ட பிறகு அழைக்கப்படுகிறது. இது ஏற்பட்ட பிழையை ஒரு ஆர்குமென்டாகவும், எந்த காம்போனென்ட் பிழையை ஏற்படுத்தியது என்பது பற்றிய தகவல்களைக் கொண்ட ஒரு ஆப்ஜெக்ட்டையும் பெறுகிறது. இதை நீங்கள் பிழைத் தகவல்களைப் பதிவு செய்யப் பயன்படுத்தலாம்.

முக்கியமாக, Error Boundaries ஆனது ரெண்டரிங் கட்டத்தில், லைஃப்சைக்கிள் மெத்தடுகளில், மற்றும் அவற்றின் கீழ் உள்ள முழு ட்ரீயின் கன்ஸ்ட்ரக்டர்களில் ஏற்படும் பிழைகளை மட்டுமே பிடிக்கும். அவை not பின்வருவனவற்றிற்கான பிழைகளைப் பிடிக்காது:

• ஈவென்ட் ஹேண்ட்லர்கள் (கீழேயுள்ள பிரிவில் மேலும் அறிக)
• ஒத்திசைவற்ற குறியீடு (எ.கா., setTimeout அல்லது requestAnimationFrame கால்பேக்குகள்)
• சர்வர்-சைட் ரெண்டரிங்
• Error Boundary-லேயே ஏற்படும் பிழைகள் (அதன் கீழ் உள்ள காம்போனென்ட்களில் அல்ல)

Error Boundaries மற்றும் React Hooks: ஒரு சக்திவாய்ந்த கலவை

Error Boundaries-ஐ செயல்படுத்த கிளாஸ் காம்போனென்ட்கள் பாரம்பரியமாகப் பயன்படுத்தப்பட்டாலும், React Hooks மிகவும் சுருக்கமான மற்றும் செயல்பாட்டு அணுகுமுறையை வழங்குகின்றன. பிழை கையாளுதல் தர்க்கத்தை உள்ளடக்கிய மற்றும் ரிசோர்ஸ் லோடிங்கின் போது பிழைகளை ஏற்படுத்தக்கூடிய காம்போனென்ட்களை எளிதாகச் சுற்றிவைக்க ஒரு வசதியான வழியை வழங்கும், மீண்டும் பயன்படுத்தக்கூடிய useErrorBoundary ஹூக்கை நாம் உருவாக்கலாம்.

தனிப்பயன் useErrorBoundary ஹூக்கை உருவாக்குதல்

useErrorBoundary ஹூக்கின் ஒரு எடுத்துக்காட்டு இங்கே:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

விளக்கம்:

• useState: பிழை நிலையை (error state) நிர்வகிக்க useState-ஐப் பயன்படுத்துகிறோம். இது ஆரம்பத்தில் பிழையை null என அமைக்கிறது.
• useCallback: resetError மற்றும் captureError செயல்பாடுகளை மெமோயிஸ் செய்ய useCallback-ஐப் பயன்படுத்துகிறோம். இந்தச் செயல்பாடுகள் ப்ராப்ஸாக அனுப்பப்பட்டால் தேவையற்ற மறு-ரெண்டர்களைத் தடுப்பது ஒரு நல்ல நடைமுறையாகும்.
• ErrorBoundary காம்போனென்ட்: இது useCallback-ஐக் கொண்டு உருவாக்கப்பட்ட ஒரு ஃபங்ஷனல் காம்போனென்ட் ஆகும். இது children மற்றும் விருப்பத்தேர்வான fallback ப்ராப்பை எடுத்துக்கொள்கிறது. ஸ்டேட்டில் ஒரு பிழை இருந்தால், அது வழங்கப்பட்ட fallback காம்போனென்டையோ அல்லது ஒரு இயல்புநிலை பிழை செய்தியையோ ரெண்டர் செய்கிறது. இல்லையெனில், அது சில்ட்ரனை ரெண்டர் செய்கிறது. இது நமது Error Boundary ஆகச் செயல்படுகிறது. டிபென்டென்சி அரேவான `[error]`, `error` ஸ்டேட் மாறும் போது இது மறு-ரெண்டர் செய்வதை உறுதி செய்கிறது.
• captureError செயல்பாடு: இந்தச் செயல்பாடு பிழை நிலையை அமைக்கப் பயன்படுகிறது. ரிசோர்ஸ்களை லோட் செய்யும்போது இதை ஒரு try...catch பிளாக்கிற்குள் அழைப்பீர்கள்.
• resetError செயல்பாடு: இந்தச் செயல்பாடு பிழை நிலையை நீக்குகிறது, இதனால் காம்போனென்ட் அதன் சில்ட்ரனை மீண்டும் ரெண்டர் செய்ய அனுமதிக்கிறது (சாத்தியமானால் ரிசோர்ஸ் லோடிங்கை மீண்டும் முயற்சிக்கிறது).

பிழை கையாளுதலுடன் ரிசோர்ஸ் லோடிங்கை செயல்படுத்துதல்

இப்போது, இந்த ஹூக்கை ரிசோர்ஸ் லோடிங் பிழைகளைக் கையாள எப்படிப் பயன்படுத்துவது என்று பார்ப்போம். ஒரு API-இலிருந்து பயனர் தரவைப் பெறும் ஒரு காம்போனென்ட்டைக் கருத்தில் கொள்வோம்:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data. Retry