React Frontend Developer

Question 1

Что такое Error Boundaries в React и как они помогают в обработке ошибок?

Accepted Answer

Error Boundaries — это специальные компоненты в React, которые позволяют перехватывать и обрабатывать ошибки, возникшие в их дочерних компонентах. Они предотвращают полное разрушение приложения, позволяя вместо этого отобразить запасной UI, когда происходит ошибка. Error Boundaries работают только для ошибок, возникающих во время рендеринга, а не для ошибок в обработчиках событий или асинхронном коде.

Question 2

Как добавить обработку ошибок маршрутов (error handling routes)?

Accepted Answer

Обработка ошибок в React Router осуществляется через свойство errorElement для маршрута или через глобальный обработчик ошибок на уровне роутера. Ошибки могут быть отображены с помощью компонента ошибки.

Question 3

Чем полезен useRouteError, и в каких ситуациях его использовать?

Accepted Answer

useRouteError позволяет получить ошибку, возникшую в loader или action, и отобразить её пользователю. Он используется в errorElement маршрутов для показа кастомных страниц ошибок.

Question 4

В чем разница выводов – throw 'message' и throw new Error('message')?

Accepted Answer

throw 'message' — выбрасывает строку, но без стека вызовов и деталей ошибки.throw new Error('message') — создает объект ошибки с stack, name и другими свойствами, что упрощает отладку.

Question 5

Можно ли создать собственный тип ошибки (custom error type)? Как?

Accepted Answer

Да, можно создать собственный тип ошибки. Для этого нужно создать класс, который наследуется от встроенного класса Error, и добавить необходимые свойства и методы. В конструкторе обязательно нужно вызвать super() и установить Object.setPrototypeOf(this, CustomError.prototype) для правильной работы instanceof.

Question 6

Почему при использовании let и const возникает ReferenceError

Accepted Answer

let и const поднимаются (hoisting есть), но не инициализируются сразу. До строки объявления переменная находится в TDZ, и любое обращение к ней приводит к ReferenceError. Это сделано намеренно, чтобы избежать скрытых багов, когда код читает переменную до ее логического объявления. В отличие от var, где до объявления возвращается undefined, let/const сразу сигнализируют об ошибке.

Question 7

Можно ли выбросить ошибку внутри then и как она будет обработана

Accepted Answer

Да, внутри then можно выбросить ошибку с помощью throw. Такая ошибка автоматически превращает Promise в rejected. Она будет поймана ближайшим catch ниже по цепочке. По сути, throw внутри then эквивалентен return Promise.reject(error).

Question 8

Как инкапсулировать загрузку данных (loading, error, data)?

Accepted Answer

Для инкапсуляции состояний loading, error и data используется кастомный хук, который управляет асинхронным запросом. Хук возвращает объект с полями data, loading и error. Это позволяет переиспользовать логику загрузки в разных компонентах и избежать дублирования кода.

Question 9

Как устроена обработка ошибок в React?

Accepted Answer

В React для обработки ошибок используются Error Boundaries — компоненты, которые ловят ошибки в дочернем дереве и отображают запасной UI. Error Boundary создается с помощью методов componentDidCatch или getDerivedStateFromError. Однако Error Boundaries не ловят ошибки в асинхронном коде, обработчиках событий и серверном рендеринге — для них нужны отдельные try/catch.

Question 10

Какие ошибки Error Boundary не может перехватывать?

Accepted Answer

Error Boundary не может перехватывать ошибки в обработчиках событий, асинхронном коде (setTimeout, requestAnimationFrame), серверном рендеринге и собственные ошибки внутри самого Error Boundary. Также он не ловит ошибки, выброшенные вне цикла рендеринга React.

Вопросы React Frontend Developer