ரியாக்ட் பிழை எல்லைகள்: வலுவான பிழை கையாளுதலுக்கான ஒரு விரிவான வழிகாட்டி

நவீன வலை மேம்பாட்டு உலகில், ஒரு மென்மையான மற்றும் நம்பகமான பயனர் அனுபவம் மிக முக்கியமானது. ஒரு கையாளப்படாத பிழை முழு ரியாக்ட் பயன்பாட்டையும் செயலிழக்கச் செய்து, பயனர்களை விரக்தியடையச் செய்து, மதிப்புமிக்க தரவை இழக்கச் செய்யும். ரியாக்ட் பிழை எல்லைகள் இந்தப் பிழைகளை நேர்த்தியாகக் கையாளவும், பேரழிவு தரும் செயலிழப்புகளைத் தடுக்கவும், மேலும் மீள்தன்மையுடைய மற்றும் பயனர் நட்பு அனுபவத்தை வழங்கவும் ஒரு சக்திவாய்ந்த வழிமுறையை வழங்குகின்றன. இந்த வழிகாட்டி ரியாக்ட் பிழை எல்லைகளின் நோக்கம், செயல்படுத்தல், சிறந்த நடைமுறைகள் மற்றும் மேம்பட்ட நுட்பங்களை உள்ளடக்கிய ஒரு விரிவான கண்ணோட்டத்தை வழங்குகிறது.

ரியாக்ட் பிழை எல்லைகள் என்றால் என்ன?

பிழை எல்லைகள் என்பவை ரியாக்ட் கூறுகளாகும், அவை தங்கள் குழந்தை கூறு மரத்தில் (child component tree) எங்கிருந்தாலும் ஜாவாஸ்கிரிப்ட் பிழைகளைப் பிடித்து, அந்தப் பிழைகளைப் பதிவுசெய்து, செயலிழந்த கூறு மரத்திற்குப் பதிலாக ஒரு ஃபால்பேக் UI-ஐக் காட்டுகின்றன. அவை ஒரு பாதுகாப்பு வலையாகச் செயல்பட்டு, பயன்பாட்டின் ஒரு பகுதியில் ஏற்படும் பிழைகள் முழு UI-ஐயும் செயலிழக்கச் செய்வதைத் தடுக்கின்றன. ரியாக்ட் 16-ல் அறிமுகப்படுத்தப்பட்ட பிழை எல்லைகள், முந்தைய, குறைந்த வலுவான பிழை கையாளும் வழிமுறைகளுக்கு மாற்றாக வந்தன.

ரியாக்ட் கூறுகளுக்கான `try...catch` தொகுதிகளாக பிழை எல்லைகளை நினையுங்கள். இருப்பினும், `try...catch`-ஐப் போலல்லாமல், இவை கூறுகளுக்கு வேலை செய்கின்றன, உங்கள் பயன்பாடு முழுவதும் பிழைகளைக் கையாள ஒரு அறிவிப்பு மற்றும் மீண்டும் பயன்படுத்தக்கூடிய வழியை வழங்குகின்றன.

பிழை எல்லைகளை ஏன் பயன்படுத்த வேண்டும்?

பிழை எல்லைகள் பல முக்கியமான நன்மைகளை வழங்குகின்றன:

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

ஒரு பிழை எல்லைக் கூறை உருவாக்குதல்

ஒரு பிழை எல்லைக் கூறை உருவாக்க, நீங்கள் பின்வரும் ஒன்று அல்லது இரண்டு வாழ்க்கைச் சுழற்சி முறைகளையும் செயல்படுத்தும் ஒரு கிளாஸ் கூறினை வரையறுக்க வேண்டும்:

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

இதோ ஒரு பிழை எல்லைக் கூறின் அடிப்படை உதாரணம்:

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

  static getDerivedStateFromError(error) {
    // அடுத்த ரெண்டரில் ஃபால்பேக் UI-ஐக் காட்ட நிலையை புதுப்பிக்கவும்.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // எடுத்துக்காட்டு "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in App
    console.error("பிடிபட்ட பிழை: ", error, info.componentStack);
    // நீங்கள் ஒரு பிழை அறிக்கை சேவைக்கும் பிழையைப் பதிவு செய்யலாம்
    // logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // நீங்கள் எந்தவொரு தனிப்பயன் ஃபால்பேக் UI-ஐயும் ரெண்டர் செய்யலாம்
      return 
ஏதோ தவறு நடந்துவிட்டது.
;
    }

    return this.props.children; 
  }
}

விளக்கம்:

• ErrorBoundary கூறு என்பது React.Component-ஐ நீட்டிக்கும் ஒரு கிளாஸ் கூறு ஆகும்.
• கன்ஸ்ட்ரக்டர் hasError: false உடன் நிலையைத் துவக்குகிறது. இந்த கொடியானது ஃபால்பேக் UI-ஐ ரெண்டர் செய்வதா இல்லையா என்பதைத் தீர்மானிக்கப் பயன்படுத்தப்படும்.
• static getDerivedStateFromError(error) என்பது வீசப்பட்ட பிழையைப் பெறும் ஒரு ஸ்டேடிக் முறையாகும். இது நிலையை hasError: true எனப் புதுப்பிக்கிறது, இது ஃபால்பேக் UI-இன் ரெண்டரிங்கைத் தூண்டும்.
• componentDidCatch(error, info) என்பது பிழை மற்றும் கூறு ஸ்டேக் பற்றிய தகவல்களைக் கொண்ட ஒரு info பொருளைப் பெறும் ஒரு வாழ்க்கைச் சுழற்சி முறையாகும். இது கன்சோலில் பிழையைப் பதிவுசெய்யப் பயன்படுகிறது. ஒரு தயாரிப்பு பயன்பாட்டில், நீங்கள் பொதுவாக ஒரு பிழை அறிக்கை சேவைக்கு பிழையைப் பதிவு செய்வீர்கள்.
• render() முறையானது hasError நிலையைச் சரிபார்க்கிறது. அது உண்மையாக இருந்தால், அது ஒரு ஃபால்பேக் UI-ஐ (இந்த விஷயத்தில், ஒரு எளிய

  குறிச்சொல்) ரெண்டர் செய்கிறது. இல்லையெனில், அது கூறின் குழந்தைகளை ரெண்டர் செய்கிறது.

பிழை எல்லைகளைப் பயன்படுத்துதல்

ஒரு பிழை எல்லையைப் பயன்படுத்த, நீங்கள் பாதுகாக்க விரும்பும் கூறு அல்லது கூறுகளை ErrorBoundary கூறுடன் போர்த்தினால் போதும்:

ComponentThatMightThrow ஒரு பிழையை வீசினால், ErrorBoundary பிழையைப் பிடித்து, அதன் நிலையைப் புதுப்பித்து, அதன் ஃபால்பேக் UI-ஐ ரெண்டர் செய்யும். பயன்பாட்டின் மற்ற பகுதிகள் சாதாரணமாக தொடர்ந்து செயல்படும்.

பிழை எல்லைகளின் இடம்

பயனுள்ள பிழை கையாளுதலுக்கு பிழை எல்லைகளின் இடம் மிக முக்கியமானது. இந்த உத்திகளைக் கருத்தில் கொள்ளுங்கள்:

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

உதாரணம்:

function App() {
  return (
    

      
        

      
      
        
      
      
        
          
        
      
      
        
  );
}

இந்த எடுத்துக்காட்டில், பயன்பாட்டின் ஒவ்வொரு முக்கியப் பகுதியும் (ஹெடர், சைடுபார், கண்டென்ட்ஏரியா, ஃபூட்டர்) ஒரு பிழை எல்லையுடன் போர்த்தப்பட்டுள்ளது. இது ஒவ்வொரு பகுதியும் பிழைகளைத் தனித்தனியாகக் கையாள அனுமதிக்கிறது, ஒரு ஒற்றைப் பிழை முழு பயன்பாட்டையும் பாதிப்பதைத் தடுக்கிறது.

ஃபால்பேக் UI-ஐத் தனிப்பயனாக்குதல்

ஒரு பிழை எல்லையால் காட்டப்படும் ஃபால்பேக் UI தகவலறிந்ததாகவும் பயனர் நட்புடையதாகவும் இருக்க வேண்டும். இந்த வழிகாட்டுதல்களைக் கருத்தில் கொள்ளுங்கள்:

• தெளிவான பிழைச் செய்தியை வழங்கவும்: என்ன தவறு நடந்தது என்பதை விளக்கும் ஒரு சுருக்கமான மற்றும் தகவலறிந்த பிழைச் செய்தியைக் காட்டவும். தொழில்நுட்பச் சொற்களைத் தவிர்த்து, பயனர்களுக்கு எளிதில் புரியும் மொழியைப் பயன்படுத்தவும்.
• தீர்வுகளை வழங்கவும்: பக்கத்தைப் புதுப்பித்தல், பின்னர் மீண்டும் முயற்சித்தல் அல்லது ஆதரவைத் தொடர்புகொள்வது போன்ற சாத்தியமான தீர்வுகளைப் பயனருக்குப் பரிந்துரைக்கவும்.
• பிராண்ட் நிலைத்தன்மையைப் பராமரிக்கவும்: ஃபால்பேக் UI உங்கள் பயன்பாட்டின் ஒட்டுமொத்த வடிவமைப்பு மற்றும் பிராண்டிங்குடன் பொருந்துவதை உறுதிசெய்யவும். இது ஒரு சீரான பயனர் அனுபவத்தைப் பராமரிக்க உதவுகிறது.
• பிழையைப் புகாரளிக்க ஒரு வழியை வழங்கவும்: பயனர்கள் உங்கள் குழுவிற்குப் பிழையைப் புகாரளிக்க அனுமதிக்கும் ஒரு பொத்தான் அல்லது இணைப்பைச் சேர்க்கவும். இது பிழைத்திருத்தம் மற்றும் சிக்கல்களைச் சரிசெய்வதற்கு மதிப்புமிக்க தகவல்களை வழங்க முடியும்.

உதாரணம்:

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

  static getDerivedStateFromError(error) {
    // அடுத்த ரெண்டரில் ஃபால்பேக் UI-ஐக் காட்ட நிலையை புதுப்பிக்கவும்.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // நீங்கள் ஒரு பிழை அறிக்கை சேவைக்கும் பிழையைப் பதிவு செய்யலாம்
    console.error("பிடிபட்ட பிழை: ", error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // நீங்கள் எந்தவொரு தனிப்பயன் ஃபால்பேக் UI-ஐயும் ரெண்டர் செய்யலாம்
      return (
        

          
ஓ! ஏதோ தவறு நடந்துவிட்டது.
          
மன்னிக்கவும், இந்த உள்ளடக்கத்தைக் காட்ட முயற்சிக்கும்போது ஒரு பிழை ஏற்பட்டது.
          
தயவுசெய்து பக்கத்தைப் புதுப்பிக்கவும் அல்லது சிக்கல் தொடர்ந்தால் ஆதரவைத் தொடர்பு கொள்ளவும்.
           window.location.reload()}>பக்கத்தைப் புதுப்பிக்கவும்
          ஆதரவைத் தொடர்பு கொள்ளவும்
        
      );
    }

    return this.props.children; 
  }
}

இந்த எடுத்துக்காட்டு ஒரு தெளிவான பிழைச் செய்தி, பரிந்துரைக்கப்பட்ட தீர்வுகள் மற்றும் பக்கத்தைப் புதுப்பிப்பதற்கும் ஆதரவைத் தொடர்புகொள்வதற்கும் இணைப்புகளை உள்ளடக்கிய ஒரு தகவலறிந்த ஃபால்பேக் UI-ஐக் காட்டுகிறது.

பல்வேறு வகையான பிழைகளைக் கையாளுதல்

பிழை எல்லைகள் ரெண்டரிங்கின் போது, வாழ்க்கைச் சுழற்சி முறைகளில், மற்றும் அவற்றிற்குக் கீழே உள்ள முழு மரத்தின் கன்ஸ்ட்ரக்டர்களில் ஏற்படும் பிழைகளைப் பிடிக்கின்றன. அவை பின்வரும் பிழைகளைப் பிடிப்பதில்லை:

• நிகழ்வு கையாளர்கள் (Event handlers)
• ஒத்திசைவற்ற குறியீடு (எ.கா., setTimeout, requestAnimationFrame)
• சர்வர்-பக்க ரெண்டரிங்
• பிழை எல்லையிலேயே வீசப்படும் பிழைகள் (அதன் குழந்தைகளில் அல்ல)

இந்த வகையான பிழைகளைக் கையாள, நீங்கள் வெவ்வேறு நுட்பங்களைப் பயன்படுத்த வேண்டும்.

நிகழ்வு கையாளர்கள்

நிகழ்வு கையாளர்களில் ஏற்படும் பிழைகளுக்கு, ஒரு நிலையான try...catch தொகுதியைப் பயன்படுத்தவும்:

function MyComponent() {
  const handleClick = () => {
    try {
      // பிழையை ஏற்படுத்தக்கூடிய குறியீடு
      throw new Error("நிகழ்வு கையாளரில் ஏதோ தவறு நடந்துவிட்டது");
    } catch (error) {
      console.error("நிகழ்வு கையாளரில் பிழை: ", error);
      // பிழையைக் கையாளவும் (எ.கா., ஒரு பிழைச் செய்தியைக் காட்டவும்)
      alert("ஒரு பிழை ஏற்பட்டது. தயவுசெய்து மீண்டும் முயற்சிக்கவும்.");
    }
  };

  return என்னை கிளிக் செய்யவும்;
}

ஒத்திசைவற்ற குறியீடு

ஒத்திசைவற்ற குறியீட்டில் ஏற்படும் பிழைகளுக்கு, ஒத்திசைவற்ற செயல்பாட்டிற்குள் try...catch தொகுதிகளைப் பயன்படுத்தவும்:

function MyComponent() {
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        // தரவைச் செயலாக்கவும்
        console.log(data);
      } catch (error) {
        console.error("தரவைப் பெறுவதில் பிழை: ", error);
        // பிழையைக் கையாளவும் (எ.கா., ஒரு பிழைச் செய்தியைக் காட்டவும்)
        alert("தரவைப் பெறுவதில் தோல்வி. தயவுசெய்து பின்னர் மீண்டும் முயற்சிக்கவும்.");
      }
    }

    fetchData();
  }, []);

  return 
தரவு ஏற்றப்படுகிறது...
;
}

மாற்றாக, கையாளப்படாத ப்ராமிஸ் நிராகரிப்புகளுக்கு நீங்கள் ஒரு உலகளாவிய பிழை கையாளும் பொறிமுறையைப் பயன்படுத்தலாம்:

window.addEventListener('unhandledrejection', function(event) {
  console.error('கையாளப்படாத நிராகரிப்பு (ப்ராமிஸ்: ', event.promise, ', காரணம்: ', event.reason, ');');
  // விருப்பமாக ஒரு உலகளாவிய பிழைச் செய்தியைக் காட்டவும் அல்லது ஒரு சேவைக்கு பிழையைப் பதிவு செய்யவும்
  alert("ஒரு எதிர்பாராத பிழை ஏற்பட்டது. தயவுசெய்து பின்னர் மீண்டும் முயற்சிக்கவும்.");
});

மேம்பட்ட பிழை எல்லை நுட்பங்கள்

பிழை எல்லையை மீட்டமைத்தல்

சில சந்தர்ப்பங்களில், பயனர்கள் பிழை எல்லையை மீட்டமைத்து, பிழையை ஏற்படுத்திய செயல்பாட்டை மீண்டும் முயற்சிக்க ஒரு வழியை வழங்க விரும்பலாம். நெட்வொர்க் சிக்கல் போன்ற ஒரு தற்காலிக சிக்கலால் பிழை ஏற்பட்டால் இது பயனுள்ளதாக இருக்கும்.

ஒரு பிழை எல்லையை மீட்டமைக்க, நீங்கள் ரெட்யக்ஸ் அல்லது கண்டெக்ஸ்ட் போன்ற ஒரு நிலை மேலாண்மை நூலகத்தைப் பயன்படுத்தி பிழை நிலையை நிர்வகிக்கலாம் மற்றும் ஒரு மீட்டமைப்பு செயல்பாட்டை வழங்கலாம். மாற்றாக, பிழை எல்லையை மீண்டும் மவுண்ட் செய்ய கட்டாயப்படுத்துவதன் மூலம் ஒரு எளிமையான அணுகுமுறையைப் பயன்படுத்தலாம்.

உதாரணம் (மீண்டும் மவுண்ட் செய்ய கட்டாயப்படுத்துதல்):

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

  static getDerivedStateFromError(error) {
    // அடுத்த ரெண்டரில் ஃபால்பேக் UI-ஐக் காட்ட நிலையை புதுப்பிக்கவும்.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // நீங்கள் ஒரு பிழை அறிக்கை சேவைக்கும் பிழையைப் பதிவு செய்யலாம்
    console.error("பிடிபட்ட பிழை: ", error, info.componentStack);
    this.setState(prevState => ({ errorCount: prevState.errorCount + 1 }));
  }

  resetError = () => {
      this.setState({hasError: false, key: this.state.key + 1})
  }

  render() {
    if (this.state.hasError) {
      // நீங்கள் எந்தவொரு தனிப்பயன் ஃபால்பேக் UI-ஐயும் ரெண்டர் செய்யலாம்
      return (
        

          
ஓ! ஏதோ தவறு நடந்துவிட்டது.
          
மன்னிக்கவும், இந்த உள்ளடக்கத்தைக் காட்ட முயற்சிக்கும்போது ஒரு பிழை ஏற்பட்டது.
          மீண்டும் முயற்சிக்கவும்
        
      );
    }

    return 
{this.props.children}
;
  }
}

இந்த எடுத்துக்காட்டில், போர்த்தப்பட்ட div-க்கு ஒரு 'key' சேர்க்கப்பட்டுள்ளது. key-ஐ மாற்றுவது கூறினை மீண்டும் மவுண்ட் செய்ய கட்டாயப்படுத்துகிறது, இது பிழை நிலையை திறம்பட நீக்குகிறது. `resetError` முறையானது கூறின் `key` நிலையைப் புதுப்பிக்கிறது, இது கூறினை மீண்டும் மவுண்ட் செய்து அதன் குழந்தைகளை மீண்டும் ரெண்டர் செய்ய வைக்கிறது.

சஸ்பென்ஸுடன் பிழை எல்லைகளைப் பயன்படுத்துதல்

ரியாக்ட் சஸ்பென்ஸ் சில நிபந்தனைகள் பூர்த்தி செய்யப்படும் வரை (எ.கா., தரவு பெறப்படும் வரை) ஒரு கூறின் ரெண்டரிங்கை "நிறுத்தி வைக்க" உங்களை அனுமதிக்கிறது. ஒத்திசைவற்ற செயல்பாடுகளுக்கு ஒரு வலுவான பிழை கையாளும் அனுபவத்தை வழங்க, நீங்கள் பிழை எல்லைகளை சஸ்பென்ஸுடன் இணைக்கலாம்.

import React, { Suspense } from 'react';

function MyComponent() {
  return (
    
      ஏற்றப்படுகிறது...