Ако сте неко време радили са Реацт-ом, можда сте наишли на поруку која гласи „Размислите о додавању границе грешке у ваше стабло да бисте прилагодили понашање при руковању грешкама." Можда сте ово видели у конзоли прегледача кад год су ваше компоненте црасх.
Реацт препоручује коришћење границе грешке да би се обезбедило боље корисничко искуство када дође до грешке.
Шта је гранична класа грешке у Реацт-у?
Границе грешке раде као три/цатцх блок у ванилла ЈаваСцрипт-у. Разлика је у томе што они хватају грешке које се јављају у Реацт компонентама. Ако дође до грешке у компоненти корисничког интерфејса, Реацт уклања стабло унутар те компоненте и замењује га резервним корисничким интерфејсом који сте дефинисали. То значи да грешка утиче само на компоненту у којој се јавља, а остатак апликације ради како се очекује.
Према Реацт документација, граничне класе грешке не хватају грешке у:
- Обрађивачи догађаја.
- Асинхрони код.
- Код на страни сервера.
- Грешке убачене у саму границу грешке (а не њену децу).
За горе наведене грешке можете користити блок три/цатцх.
На пример, да бисте ухватили грешку која се јавља у обрађивач догађаја, користите следећи код:
функцијаЕвентЦомпонент() {
конст [еррор, сетЕррор] = усеСтате(нула)конст хандлеЦлицк = () => {
покушати {
// Уради нешто
} улов (грешка) {
сетЕррор (грешка)
}
}
повратак (
<>
<див>{еррор? грешка: ""}див>
<дугмеонЦлицк={хандлеЦлицк}>Дугмедугме>
)
}
Користите границе грешака да бисте ухватили грешке само у Реацт компонентама.
Креирање граничне класе грешке
Границу грешке можете да креирате тако што ћете дефинисати класу која садржи једну или обе следеће методе:
- статички гетДериведСтатеФромЕррор()
- компонентаДидЦатцх()
Функција гетДериведСтатеФромЕррор() ажурира стање компоненте када се грешка ухвати, док можете да користите цомпонентДидЦатцх() да евидентирате информације о грешци на конзоли. Такође можете послати грешке служби за пријављивање грешака.
Испод је пример који показује како да направите једноставну граничну класу грешке.
класаЕррорБоундарипротежеРеаговати.Саставни део{
конструктор(реквизити) {
супер(реквизити);
ово.стате = { грешка: лажно };
}статичнагетДериведСтатеФромЕррор(грешка){
// Ажурирај стање тако да ће следећи рендер приказати резервни кориснички интерфејс.
повратак { грешка: грешка };
}цомпонентДидЦатцх (грешка, еррорИнфо) {
// Евидентирај грешку у сервис за извештавање о грешци
}дати, пружити() {
ако (ово.држава.еррор) {
// Овде направите прилагођени резервни кориснички интерфејс
повратак<х1>Изгледа да постоји проблем.х1>;
}
повратаково.пропс.цхилдрен;
}
}
извозУобичајено ЕррорБоундари;
Када дође до грешке, гетДериведСтатеФромЕррор() ће ажурирати стање и последично покренути поновно приказивање које ће приказати резервни кориснички интерфејс.
Ако не желите да креирате класу границе грешке од нуле, користите реацт-еррор-боундари НПМ пакет. Овај пакет обезбеђује компоненту ЕррорБоундари која се обавија око компоненти за које мислите да би могле изазвати грешке.
Коришћење граничне класе грешке
Да бисте обрадили грешке, омотајте компоненте компонентом класе границе грешке. Можете умотати компоненту највишег нивоа или појединачне компоненте.
Ако умотате компоненту највишег нивоа, гранична класа грешке ће обрађивати грешке које су избациле све компоненте у апликацији Реацт.
<ЕррорБоундари>
<Апликација/>
ЕррорБоундари>
Ако умотате појединачну компоненту са ЕррорБоундари, грешка у тој компоненти неће утицати на то како се друга компонента приказује.
<ЕррорБоундари>
<Профил/>
ЕррорБоундари>
На пример, грешка у компоненти профила неће утицати на то како се приказује друга компонента попут компоненте Херо. Иако се компонента профила може срушити, остатак апликације ће радити добро. Ово је много боље од приказивања генеричког белог резервног екрана који обезбеђује Реацт.
Руковање грешкама у ЈаваСцрипт-у
Програмске грешке могу бити фрустрирајуће за програмере и кориснике. Неуспех у решавању грешака може да изложи ваше кориснике ружном корисничком интерфејсу са тешко разумљивим порукама о грешкама.
Када правите своју Реацт компоненту, креирајте класу границе грешке било од нуле или користећи пакет реацт-еррор-боундари да бисте приказали поруке о грешкама које су прилагођене кориснику.
