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

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

React பிழை எல்லைகள் என்றால் என்ன?

React 16 இல் அறிமுகப்படுத்தப்பட்டது, பிழை எல்லைகள் என்பது React கூறுகள் ஆகும், அவை குழந்தை கூறு மரத்தில் JavaScript பிழைகளைப் பிடிக்கின்றன, அந்த பிழைகளை உள்நுழைக்கின்றன, மேலும் முழு கூறு மரத்தையும் செயலிழக்கச் செய்வதைத் தவிர்த்து ஒரு பின்னணி UI ஐக் காட்டுகின்றன. அவை try...catch தொகுதிக்கு ஒத்த முறையில் செயல்படுகின்றன, ஆனால் கூறுகளுக்கு.

பிழை எல்லைகளின் முக்கிய பண்புகள்:

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

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

பிழைகளைப் பிடிப்பது மட்டும் போதாது. திறம்பட பிழைகளைக் கையாளுவதற்கு எது தவறு நடந்தது என்பதைப் புரிந்துகொள்வதும் அதற்கேற்ப பதிலளிப்பதும் அவசியம். பிழை எல்லைகளுக்குள் பிழைகளை வகைப்படுத்துவது பல நன்மைகளை வழங்குகிறது:

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

பிழை வகைப்பாட்டிற்கான அணுகுமுறைகள்

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

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 = "Something went wrong.";
      if (this.state.error instanceof NetworkError) {
        errorMessage = "A network error occurred. Please check your connection and try again.";
      } else if (this.state.error instanceof ValidationError) {
        errorMessage = "There was a validation error. Please review your input.";
      }

      return (
        <div>
          <h2>Error!</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; 
  }
}

விளக்கம்:

• Custom 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("Network request failed");
          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 = "Something went wrong.";
      if (this.state.error.code === 404) {
        errorMessage = "Resource not found.";
      } else if (this.state.error.code >= 500) {
        errorMessage = "Server error. Please try again later.";
      }

      return (
        <div>
          <h2>Error!</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: "A network error occurred. Please check your connection.",
    retry: true,
  },
  "INVALID_INPUT": {
    message: "Invalid input. Please review your data.",
    retry: false,
  },
  404: {
    message: "Resource not found.",
    retry: false,
  },
  500: {
    message: "Server error. Please try again later.",
    retry: true,
  },
  "DEFAULT": {
    message: "Something went wrong.",
    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>Error!</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 ஆகியவை அடங்கும்.
• பிழை கையாளுதலைச் சோதிக்கவும்: உங்கள் பிழை எல்லைகள் வெவ்வேறு பிழை வகைகளை சரியாகக் கையாளுகின்றன என்பதைச் சரிபார்க்க அலகு சோதனைகளை எழுதுங்கள்.
• பயனர் அனுபவத்தைக் கவனியுங்கள்: தீர்வை நோக்கி பயனர்களை வழிநடத்தும் தகவல் தரும் மற்றும் பயனர் நட்பு பிழை செய்திகளைக் காட்டுங்கள். தொழில்நுட்பச் சொற்களைத் தவிர்க்கவும்.
• பிழை விகிதங்களைக் கண்காணிக்கவும்: மீண்டும் மீண்டும் ஏற்படும் சிக்கல்களை அடையாளம் காணவும், திருத்தங்களுக்கு முன்னுரிமை அளிக்கவும், வெவ்வேறு பிழை வகைகளின் அதிர்வெண்ணைக் கண்காணிக்கவும்.
• சர்வதேசமயமாக்கல் (i18n): பயனர் பிழை செய்திகளை வழங்கும் போது, ​​உங்கள் செய்திகள் வெவ்வேறு மொழிகளையும் கலாச்சாரங்களையும் ஆதரிக்க சரியாக சர்வதேசமயமாக்கப்படுவதை உறுதி செய்யவும். மொழிபெயர்ப்புகளை நிர்வகிக்க i18next அல்லது React இன் Context API போன்ற நூலகங்களைப் பயன்படுத்தவும்.
• அணுகல்தன்மை (a11y): உங்கள் பிழை செய்திகள் ஊனமுற்ற பயனர்களுக்கு அணுகக்கூடியதா என்பதை உறுதிப்படுத்தவும். திரை வாசகர்களுக்கு கூடுதல் சூழலை வழங்க ARIA பண்புக்கூறுகளைப் பயன்படுத்தவும்.
• பாதுகாப்பு: பிழை செய்திகளில் நீங்கள் என்ன தகவலைக் காட்டுகிறீர்கள் என்பதில் கவனமாக இருங்கள், குறிப்பாக உற்பத்தி சூழல்களில். தாக்குபவர்களால் பயன்படுத்தக்கூடிய முக்கியமான தரவைக் காட்டுவதைத் தவிர்க்கவும். எடுத்துக்காட்டாக, இறுதிப் பயனர்களுக்கு மூல அடுக்கு தடயங்களைக் காட்டாதீர்கள்.

எடுத்துக்காட்டு காட்சி: ஒரு இ-காமர்ஸ் பயன்பாட்டில் API பிழைகளைக் கையாளுதல்

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

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

பிழை எல்லைகள் மற்றும் பிழை வகைப்பாட்டைப் பயன்படுத்துவதன் மூலம், பயன்பாடு இந்த சூழ்நிலைகளைச் சிறப்பாகக் கையாள முடியும்:

// 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>Error!</h2>
          <p>{message}</p>
          {retry && <button onClick={() => window.location.reload()}>மீண்டும் முயற்சி</button>}
        </div>
      );
    }

    return this.props.children;
  }
}

விளக்கம்:

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

முடிவுரை

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

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

மேலும் ஆதாரங்கள்:

• React பிழை எல்லைகள் ஆவணங்கள்
• React 16 பிழை எல்லைகளுக்கான Sentry இன் வழிகாட்டி
• Robin Wieruch இன் React பிழை எல்லை பயிற்சி