Привет, ребята,

При разработке любого проекта в реакции мы в основном занимаемся условными операциями или проходящими элементами к определенным компонентам, функциям и т. Д. Но если что-то неожиданное происходит с компонентом или функцией реагирования, и ошибка времени выполнения происходит, большая часть времени вы видите Белый экран смерти!. 😑 Теперь, если вы откроете инструменты разработчика и проверьте консоль, вы видите ошибку. Но это определенно не рекомендуется для обработки этого.

Эта ошибка времени выполнения или ошибки белого экрана следует обрабатывать изящно, и именно здесь Реагистрационная ошибка границы поставляется на картинке. Реагистрация добавила границы ошибок, чтобы поймать ошибку JavaScript и эффективно обрабатывать их. Согласно Реагистрационная документация , Границы ошибок представляют собой компоненты реагирования, которые ловят ошибки JavaScript в любом месте в своем дочернем дереве дочерних компонентов, регистрируйте эти ошибки и отобразите защиту UI, а не в разбивке дерева компонентов. До даты написания этой статьи React Rights поддерживаются только как компоненты класса. Следовательно, при использовании реагирования с крючками Это может быть единственный компонент класса, который вам понадобится.

Достаточно теории, давайте погрузимся в код сейчас –

Сначала создадим компонент класса и использую его как границу ошибки. Вот код –

class ErrorBoundary extends Component {
    state = {
        error: null,
    };
    static getDerivedStateFromError(error) {
        return { error };
    }
    render() {
        const { error } = this.state;

        if (error) {
            return (
                

                    
Seems like an error occured!
                    
{error.message}
                
            );
        }
        return this.props.children;
    }
}

export default ErrorBoundary;

В приведенном выше коде вы увидите статический метод getderedstatefromeRror (ошибка) Отказ Этот метод превратит Errorboundary Компонент класса в компонент, который фактически обрабатывает ошибки.

Здесь мы ловим ошибку в GetderedStateFromError метод и установка его в качестве состояния. Если ошибка присутствует, мы печатаем ее (на данный момент) и если нет ошибок, мы просто возвращаем контроль обратно в исходный элемент.

Теперь давайте посмотрим, где мы можем использовать эту границу ошибки. Считайте, что вы печатаете список пользователей, которые выбираются из API. Это будет выглядеть что-то подобное –

const Users = ({ userData, handleMoreDetails }) => {
    return (
        

            
Users List: 

            

                {userData.map((user) => (
                    

                        
Name: {user.name}
                        
Company: {user.company}
                         handleMoreDetails(user.id)}>
                            More details
                        
                    
                ))}
            
        
    );
};

Вышеуказанное Пользователь Компонент будет работать совершенно хорошо, пока не получит userdata. Но если, по какой-то причине, userdata это undefined или нулевой Наше приложение будет нарушено! Так что теперь, давайте добавим нашу границу ошибки на этот компонент. Следовательно, обновленный код будет выглядеть так –

const Users = ({ userData, handleMoreDetails }) => {
    return (
        

            
Users List: 
            
                

                    {userData.map((user) => (
                        

                            
Name: {user.name}
                            
Company: {user.company}
                             handleMoreDetails(user.id)}>
                                More details
                            
                        
                    ))}
                
            
        
    );
};

Здесь, когда возникает ошибка, наша компонент ErrorBoundary поймает, что и сообщение об ошибке будет напечатано на экран. Это сохранит приложение от взлома, и пользователь также поймет, что не так.

Важным моментом рассмотрения здесь является место, где мы использовали границу ошибки. Ошибка ошибки отобразится ошибка вместо компонента. Поэтому нам всегда нужно убедиться, что мы хотим разместить эту ошибку. В нашем примере мы определенно хотим показать заголовок страницы и другие детали. Мы просто хотим заменить компонент, где произошла ошибка и в этом случае, это просто UL элемент. Следовательно, мы завернули только UL элемент внутри границы ошибки и не весь компонент.

До сих пор мы уже поняли, что такое граница ошибки и как ее использовать. Но наш отстойной дисплей границ ошибок (где отображается ошибки), не используется и может быть улучшен. То, как мы показываем наши ошибки и падшие компоненты, будут отличаться для разных случаев в одном приложении. Таким образом, нам нужно будет сделать нашу ошибку граничной компонента более общемысленным, чтобы все эти последующие UIS можно использовать.

Для этого мы создадим опоры Errorcomponent В границе об ошибке и возвратом элемента передается на этот опор, когда происходит ошибка. Вот окончательный код обоих Errorboundary и Пользователь компоненты –

// User Component 

const Users = ({ userData, handleMoreDetails }) => {
    const ErrorMsg = (error) => {
        return (
            

                {/* You can use your own styling and methods of handling error */}
                
Something went wrong!
                
{error.message}
            
        );
    };

    return (
        

            
Users List: 
            
                

                    {userData.map((user) => (
                        

                            
Name: {user.name}
                            
Company: {user.company}
                             handleMoreDetails(user.id)}>
                                More details
                            
                        
                    ))}
                
            
        
    );
};

// ErrorBoundary Component
class ErrorBoundary extends Component {
    state = {
        error: null,
    };
    static getDerivedStateFromError(error) {
        return { error };
    }
    render() {
        const { error } = this.state;

        if (error) {
            return ;
        }
        return this.props.children;
    }
}

Вы также можете пройти ключ для вашей границы ошибки, если вам нужно использовать его несколько раз в одном компоненте. Это удалит предыдущее состояние ошибки из границы ошибки и покажет правильный элемент в каждом визуализации.

Граница ошибок – одна из действительно приятных функций, имеющих реакцию, и я видел, что он сравнительно меньше используется. Но используя это в вашем коде, безусловно, сэкономит вас от неловких моментов с неожиданной ошибкой. И кто не хочет лучшее обращение с ошибками. 😉

Если вы не хотите писать свой собственный граничный компонент ошибки, есть один удивительный пакет для этого. Вот ссылка Реакция – ошибка

Так что это было из этой статьи. Пожалуйста, поделитесь своими мыслями/комментариями/отзывами. 😇

Продолжай учиться

Оригинал: “https://dev.to/ms_yogii/handle-errors-gracefully-with-react-error-boundary-25mb”