ರಿಯಾಕ್ಟ್ ಎರರ್ ಬೌಂಡರೀಸ್: ದೃಢವಾದ ಎರರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್‌ಗೆ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ

ಆಧುನಿಕ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಜಗತ್ತಿನಲ್ಲಿ, ಸುಗಮ ಮತ್ತು ವಿಶ್ವಾಸಾರ್ಹ ಬಳಕೆದಾರರ ಅನುಭವವು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ಒಂದೇ ಒಂದು ನಿರ್ವಹಿಸದ ಎರರ್ ಸಂಪೂರ್ಣ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಕ್ರ್ಯಾಶ್ ಮಾಡಬಹುದು, ಇದರಿಂದ ಬಳಕೆದಾರರು ನಿರಾಶೆಗೊಳ್ಳುತ್ತಾರೆ ಮತ್ತು ಸಂಭಾವ್ಯವಾಗಿ ಅಮೂಲ್ಯವಾದ ಡೇಟಾವನ್ನು ಕಳೆದುಕೊಳ್ಳಬಹುದು. ರಿಯಾಕ್ಟ್ ಎರರ್ ಬೌಂಡರೀಸ್ ಈ ಎರರ್‌ಗಳನ್ನು ಸರಾಗವಾಗಿ ನಿರ್ವಹಿಸಲು, ಗಂಭೀರ ಕ್ರ್ಯಾಶ್‌ಗಳನ್ನು ತಡೆಯಲು ಮತ್ತು ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ಅನುಭವವನ್ನು ನೀಡಲು ಒಂದು ಶಕ್ತಿಯುತ ವ್ಯವಸ್ಥೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ ಮಾರ್ಗದರ್ಶಿ ರಿಯಾಕ್ಟ್ ಎರರ್ ಬೌಂಡರೀಸ್‌ನ ಸಮಗ್ರ ಅವಲೋಕನವನ್ನು ನೀಡುತ್ತದೆ, ಅವುಗಳ ಉದ್ದೇಶ, ಅಳವಡಿಕೆ, ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಸುಧಾರಿತ ತಂತ್ರಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

ರಿಯಾಕ್ಟ್ ಎರರ್ ಬೌಂಡರೀಸ್ ಎಂದರೇನು?

ಎರರ್ ಬೌಂಡರೀಸ್ ಎಂದರೆ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು. ಅವು ತಮ್ಮ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಲ್ಲಿ ಎಲ್ಲಿಯಾದರೂ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎರರ್‌ಗಳನ್ನು ಹಿಡಿದು, ಆ ಎರರ್‌ಗಳನ್ನು ಲಾಗ್ ಮಾಡಿ, ಮತ್ತು ಕ್ರ್ಯಾಶ್ ಆದ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯ ಬದಲಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತವೆ. ಅವು ಒಂದು ಸುರಕ್ಷತಾ ಜಾಲದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಅಪ್ಲಿಕೇಶನ್‌ನ ಒಂದು ಭಾಗದಲ್ಲಿನ ಎರರ್‌ಗಳು ಸಂಪೂರ್ಣ UI ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವುದನ್ನು ತಡೆಯುತ್ತವೆ. ರಿಯಾಕ್ಟ್ 16 ರಲ್ಲಿ ಪರಿಚಯಿಸಲಾದ ಎರರ್ ಬೌಂಡರೀಸ್, ಹಿಂದಿನ, ಕಡಿಮೆ ದೃಢವಾದ ಎರರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಬದಲಾಯಿಸಿದವು.

ಎರರ್ ಬೌಂಡರೀಸ್ ಅನ್ನು try...catch ಬ್ಲಾಕ್‌ಗಳೆಂದು ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗಾಗಿ ಯೋಚಿಸಿ. ಆದಾಗ್ಯೂ, try...catch ನಂತೆ ಅಲ್ಲದೆ, ಇವು ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಾದ್ಯಂತ ಎರರ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಘೋಷಣಾತ್ಮಕ ಮತ್ತು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತವೆ.

ಎರರ್ ಬೌಂಡರೀಸ್ ಅನ್ನು ಏಕೆ ಬಳಸಬೇಕು?

ಎರರ್ ಬೌಂಡರೀಸ್ ಹಲವಾರು ನಿರ್ಣಾಯಕ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತವೆ:

• ಅಪ್ಲಿಕೇಶನ್ ಕ್ರ್ಯಾಶ್‌ಗಳನ್ನು ತಡೆಯಿರಿ: ಒಂದೇ ಕಾಂಪೊನೆಂಟ್ ಎರರ್ ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಕ್ರ್ಯಾಶ್ ಮಾಡುವುದನ್ನು ತಡೆಯುವುದು ಇದರ ಅತಿದೊಡ್ಡ ಪ್ರಯೋಜನವಾಗಿದೆ. ಖಾಲಿ ಸ್ಕ್ರೀನ್ ಅಥವಾ ಅನುಪಯುಕ್ತ ಎರರ್ ಸಂದೇಶದ ಬದಲಿಗೆ, ಬಳಕೆದಾರರು ಒಂದು ಸುಂದರವಾದ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ನೋಡುತ್ತಾರೆ.
• ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಿ: ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಪ್ರದರ್ಶಿಸುವ ಮೂಲಕ, ಎರರ್ ಬೌಂಡರೀಸ್ ಬಳಕೆದಾರರಿಗೆ ಅಪ್ಲಿಕೇಶನ್‌ನ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿರುವ ಭಾಗಗಳನ್ನು ಬಳಸುವುದನ್ನು ಮುಂದುವರಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ಕಿರಿಕಿರಿ ಮತ್ತು ನಿರಾಶಾದಾಯಕ ಅನುಭವವನ್ನು ತಪ್ಪಿಸುತ್ತದೆ.
• ಎರರ್‌ಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸಿ: ಎರರ್ ಬೌಂಡರೀಸ್ ಎರರ್‌ಗಳನ್ನು ಅಪ್ಲಿಕೇಶನ್‌ನ ನಿರ್ದಿಷ್ಟ ಭಾಗಗಳಿಗೆ ಪ್ರತ್ಯೇಕಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಇದರಿಂದ ಸಮಸ್ಯೆಯ ಮೂಲ ಕಾರಣವನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಡೀಬಗ್ ಮಾಡಲು ಸುಲಭವಾಗುತ್ತದೆ.
• ವರ್ಧಿತ ಲಾಗಿಂಗ್ ಮತ್ತು ಮಾನಿಟರಿಂಗ್: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಸಂಭವಿಸುವ ಎರರ್‌ಗಳನ್ನು ಲಾಗ್ ಮಾಡಲು ಎರರ್ ಬೌಂಡರೀಸ್ ಒಂದು ಕೇಂದ್ರ ಸ್ಥಳವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ ಮಾಹಿತಿಯು ಸಮಸ್ಯೆಗಳನ್ನು ಪೂರ್ವಭಾವಿಯಾಗಿ ಗುರುತಿಸಲು ಮತ್ತು ಸರಿಪಡಿಸಲು ಅಮೂಲ್ಯವಾಗಿರುತ್ತದೆ. ಇದನ್ನು Sentry, Rollbar ಅಥವಾ Bugsnag ನಂತಹ ಮಾನಿಟರಿಂಗ್ ಸೇವೆಗೆ ಜೋಡಿಸಬಹುದು, ಇವೆಲ್ಲವೂ ಜಾಗತಿಕ ವ್ಯಾಪ್ತಿಯನ್ನು ಹೊಂದಿವೆ.
• ಅಪ್ಲಿಕೇಶನ್ ಸ್ಟೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಿ: ಕ್ರ್ಯಾಶ್‌ನಿಂದಾಗಿ ಎಲ್ಲಾ ಅಪ್ಲಿಕೇಶನ್ ಸ್ಟೇಟ್ ಅನ್ನು ಕಳೆದುಕೊಳ್ಳುವ ಬದಲು, ಎರರ್ ಬೌಂಡರೀಸ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಉಳಿದ ಭಾಗಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ಮುಂದುವರಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಬಳಕೆದಾರರ ಪ್ರಗತಿ ಮತ್ತು ಡೇಟಾವನ್ನು ಸಂರಕ್ಷಿಸುತ್ತದೆ.

ಎರರ್ ಬೌಂಡರಿ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸುವುದು

ಎರರ್ ಬೌಂಡರಿ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸಲು, ನೀವು ಈ ಕೆಳಗಿನ ಒಂದು ಅಥವಾ ಎರಡೂ ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಕ್ಲಾಸ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಡಿಫೈನ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ:

• 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("Caught an 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 (
    

      
        

      
      
        
      
      
        
          
        
      
      
        
  );
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಅಪ್ಲಿಕೇಶನ್‌ನ ಪ್ರತಿಯೊಂದು ಪ್ರಮುಖ ವಿಭಾಗವನ್ನು (Header, Sidebar, ContentArea, Footer) ಎರರ್ ಬೌಂಡರಿಯೊಂದಿಗೆ ಸುತ್ತುವರಿಯಲಾಗಿದೆ. ಇದು ಪ್ರತಿಯೊಂದು ವಿಭಾಗವು ಸ್ವತಂತ್ರವಾಗಿ ಎರರ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಒಂದೇ ಎರರ್ ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ನ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

ಫಾಲ್‌ಬ್ಯಾಕ್ 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("Caught an error: ", error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // ನೀವು ಯಾವುದೇ ಕಸ್ಟಮ್ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ರೆಂಡರ್ ಮಾಡಬಹುದು
      return (
        

          
ಅಯ್ಯೋ! ಏನೋ ತಪ್ಪಾಗಿದೆ.
          
ಕ್ಷಮಿಸಿ, ಈ ವಿಷಯವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಪ್ರಯತ್ನಿಸುವಾಗ ಎರರ್ ಸಂಭವಿಸಿದೆ.
          
ದಯವಿಟ್ಟು ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸಿ ಅಥವಾ ಸಮಸ್ಯೆ ಮುಂದುವರಿದರೆ ಬೆಂಬಲವನ್ನು ಸಂಪರ್ಕಿಸಿ.
           window.location.reload()}>ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿ
          ಬೆಂಬಲವನ್ನು ಸಂಪರ್ಕಿಸಿ
        
      );
    }

    return this.props.children; 
  }
}

ಈ ಉದಾಹರಣೆಯು ಸ್ಪಷ್ಟವಾದ ಎರರ್ ಸಂದೇಶ, ಸೂಚಿಸಲಾದ ಪರಿಹಾರಗಳು, ಮತ್ತು ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಲು ಮತ್ತು ಬೆಂಬಲವನ್ನು ಸಂಪರ್ಕಿಸಲು ಲಿಂಕ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಹೆಚ್ಚು ಮಾಹಿತಿಯುಕ್ತ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

ವಿವಿಧ ರೀತಿಯ ಎರರ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು

ಎರರ್ ಬೌಂಡರೀಸ್ ರೆಂಡರಿಂಗ್ ಸಮಯದಲ್ಲಿ, ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್‌ಗಳಲ್ಲಿ, ಮತ್ತು ಅವುಗಳ ಕೆಳಗಿನ ಸಂಪೂರ್ಣ ಟ್ರೀಯ ಕನ್ಸ್ಟ್ರಕ್ಟರ್‌ಗಳಲ್ಲಿ ಸಂಭವಿಸುವ ಎರರ್‌ಗಳನ್ನು ಹಿಡಿಯುತ್ತವೆ. ಅವು ಈ ಕೆಳಗಿನವುಗಳಿಗೆ ಎರರ್‌ಗಳನ್ನು ಹಿಡಿಯುವುದಿಲ್ಲ:

• ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು
• ಅಸಿಂಕ್ರೋನಸ್ ಕೋಡ್ (ಉದಾ., 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('Unhandled rejection (promise: ', event.promise, ', reason: ', event.reason, ');');
  // ಐಚ್ಛಿಕವಾಗಿ ಗ್ಲೋಬಲ್ ಎರರ್ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಿ ಅಥವಾ ಎರರ್ ಅನ್ನು ಸೇವೆಗೆ ಲಾಗ್ ಮಾಡಿ
  alert("ಅನಿರೀಕ್ಷಿತ ಎರರ್ ಸಂಭವಿಸಿದೆ. ದಯವಿಟ್ಟು ನಂತರ ಮತ್ತೆ ಪ್ರಯತ್ನಿಸಿ.");
});

ಸುಧಾರಿತ ಎರರ್ ಬೌಂಡರಿ ತಂತ್ರಗಳು

ಎರರ್ ಬೌಂಡರಿಯನ್ನು ಮರುಹೊಂದಿಸುವುದು

ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, ಬಳಕೆದಾರರಿಗೆ ಎರರ್ ಬೌಂಡರಿಯನ್ನು ಮರುಹೊಂದಿಸಲು ಮತ್ತು ಎರರ್‌ಗೆ ಕಾರಣವಾದ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ಮರುಪ್ರಯತ್ನಿಸಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸಲು ನೀವು ಬಯಸಬಹುದು. ನೆಟ್‌ವರ್ಕ್ ಸಮಸ್ಯೆಯಂತಹ ತಾತ್ಕಾಲಿಕ ಸಮಸ್ಯೆಯಿಂದ ಎರರ್ ಉಂಟಾಗಿದ್ದರೆ ಇದು ಉಪಯುಕ್ತವಾಗಬಹುದು.

ಎರರ್ ಬೌಂಡರಿಯನ್ನು ಮರುಹೊಂದಿಸಲು, ನೀವು Redux ಅಥವಾ Context ನಂತಹ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿ ಎರರ್ ಸ್ಟೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಬಹುದು ಮತ್ತು ಮರುಹೊಂದಿಸುವ ಫಂಕ್ಷನ್ ಅನ್ನು ಒದಗಿಸಬಹುದು. ಪರ್ಯಾಯವಾಗಿ, ಎರರ್ ಬೌಂಡರಿಯನ್ನು ರಿಮೌಂಟ್ ಮಾಡಲು ಒತ್ತಾಯಿಸುವ ಮೂಲಕ ನೀವು ಸರಳವಾದ ವಿಧಾನವನ್ನು ಬಳಸಬಹುದು.

ಉದಾಹರಣೆ (ರಿಮೌಂಟ್ ಮಾಡಲು ಒತ್ತಾಯಿಸುವುದು):

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("Caught an 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' ಅನ್ನು ಸೇರಿಸಲಾಗಿದೆ. ಕೀಯನ್ನು ಬದಲಾಯಿಸುವುದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಿಮೌಂಟ್ ಮಾಡಲು ಒತ್ತಾಯಿಸುತ್ತದೆ, ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಎರರ್ ಸ್ಟೇಟ್ ಅನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ. `resetError` ಮೆಥಡ್ ಕಾಂಪೊನೆಂಟ್‌ನ `key` ಸ್ಟೇಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ, ಇದರಿಂದ ಕಾಂಪೊನೆಂಟ್ ರಿಮೌಂಟ್ ಆಗುತ್ತದೆ ಮತ್ತು ಅದರ ಚಿಲ್ಡ್ರನ್‌ಗಳನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.

ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಬಳಸುವುದು

ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ನ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಕೆಲವು ಷರತ್ತುಗಳನ್ನು ಪೂರೈಸುವವರೆಗೆ (ಉದಾ., ಡೇಟಾ ಪಡೆಯುವವರೆಗೆ) "ಸಸ್ಪೆಂಡ್" ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳಿಗೆ ಹೆಚ್ಚು ದೃಢವಾದ ಎರರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ನೀವು ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು.

import React, { Suspense } from 'react';

function MyComponent() {
  return (
    
      ಲೋಡ್ ಆಗುತ್ತಿದೆ...