React është një bibliotekë e fuqishme JavaScript për ndërtimin e ndërfaqeve të përdoruesit. Një nga pikat e forta të tij është aftësia për të trajtuar gabimet me hijeshi, duke përdorur një veçori të quajtur kufijtë e gabimeve. Në këtë artikull, ne do të shqyrtojmë se cilat janë kufijtë e gabimeve dhe si mund t'i përdorni ato për të përmirësuar aftësitë e trajtimit të gabimeve të aplikacioneve tuaja React.
Cilët janë kufijtë e gabimit?
Kufijtë e gabimeve janë një veçori në React që ju lejon të trajtoni gabimet që ndodhin gjatë paraqitjes së një komponenti. Në JavaScript tradicionale, një gabim në një pjesë të kodit mund të përhapet në grupin e thirrjeve, duke rezultuar përfundimisht në një përplasje. Megjithatë, me kufijtë e gabimeve, ju mund të kapni gabime në një pjesë të caktuar të kodit tuaj dhe të shfaqni një ndërfaqe kthimi në vend që të prishni të gjithë aplikacionin.
Kufijtë e gabimeve zbatohen duke përdorur dy metoda të reja në API-në React.Component: static getDerivedStateFromError() dhe componentDidCatch(). Këto metoda ju lejojnë të përcaktoni një komponent si një kufi gabimi dhe të trajtoni çdo gabim që ndodh brenda fëmijëve të tij.
Përdorimi i kufijve të gabimeve
Për të përdorur kufijtë e gabimeve, do t'ju duhet të përcaktoni një komponent të ri që zgjeron React.Component dhe zbaton metodën componentDidCatch(). componentDidCatch() merr dy argumente: gabimin që u hodh dhe një objekt që përfaqëson informacion shtesë rreth gabimit.
Këtu është një shembull i një komponenti të thjeshtë kufiri gabimi:
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, errorInfo) {
this.setState({ hasError: true });
console.error(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
Në këtë shembull, komponenti ErrorBoundary vendos gjendjen e tij fillestare në hasError: false. Nëse ndodh një gabim në ndonjë nga fëmijët e tij, thirret metoda componentDidCatch(), e cila vendos hasError në true. Komponenti më pas jep një ndërfaqe të përsëritur në vend të fëmijëve të tij.
Për të përdorur komponentin ErrorBoundary, thjesht mbështilleni atë rreth çdo komponenti për të cilin dëshironi të trajtoni gabimet:
<ErrorBoundary> <MyComponent /> </ErrorBoundary>
Tani, nëse ndodh një gabim në MyComponent, komponenti ErrorBoundary do ta kapë gabimin dhe do të shfaqë një ndërfaqe kthimi.
Praktikat më të mira për përdorimin e kufijve të gabimeve
Këtu janë disa praktika më të mira për përdorimin e kufijve të gabimeve në aplikacionet tuaja React:
- Përdorni kufijtë e gabimeve me masë. Kufijtë e gabimeve janë një mjet i fuqishëm, por ato gjithashtu mund të mbipërdoren. Përdorni ato vetëm për komponentë që janë kritikë për funksionalitetin e aplikacionit ose që kanë logjikë komplekse.
- Shfaqni një mesazh të dobishëm për përdoruesin. Kur ndodh një gabim, shfaqni një mesazh te përdoruesi që shpjegon se çfarë shkoi keq dhe ofron një mënyrë për të rikuperuar nga gabimi.
- Regjistrimi i gabimeve për korrigjimin e gabimeve. Përdorni metodën
console.error()për të regjistruar gabimet në tastierë për qëllime korrigjimi. - Test kufijtë e gabimit. Sigurohuni që të testoni plotësisht kufijtë e gabimeve tuaja për t'u siguruar që ato kapin dhe trajtojnë gabimet në mënyrë korrekte.
Përfundim
Kufijtë e gabimeve janë një veçori e fuqishme në React që ju lejojnë t'i trajtoni gabimet me hijeshi dhe t'i parandaloni ato të prishin të gjithë aplikacionin tuaj. Duke zbatuar kufijtë e gabimeve, ju mund të ofroni një përvojë më të mirë të përdoruesit dhe të përmirësoni cilësinë e përgjithshme të aplikacioneve tuaja React.
