Ответ
При ошибке Lazy Loading компонент не загрузится, и пользователь увидит fallback-контент (если он указан в Suspense) или пустое место.
Пример обработки ошибок с Error Boundary:
import { ErrorBoundary } from 'react-error-boundary';
function ErrorFallback({ error }) {
return <div>Ошибка загрузки компонента</div>;
}
const LazyComponent = React.lazy(() => import('./Component'));
function App() {
return (
<ErrorBoundary FallbackComponent={ErrorFallback}>
<Suspense fallback={<div>Загрузка...</div>}>
<LazyComponent />
</Suspense>
</ErrorBoundary>
);
}Без Error Boundary ошибка будет всплывать в консоль, но интерфейс не сломается полностью. Важно предусматривать такие сценарии для критичных компонентов.
Ответ 18+ 🔞
Да ты посмотри, какая хуйня может случиться с этим вашим Lazy Loading! Представь, компонент тупо не загрузится, и юзеру покажется либо заглушка из Suspense, либо просто пустота, блядь. Вообще нихуя.
Вот, смотри, как можно подстраховаться через Error Boundary, чтобы не выглядеть полным мудаком:
import { ErrorBoundary } from 'react-error-boundary';
function ErrorFallback({ error }) {
return <div>Ошибка загрузки компонента</div>;
}
const LazyComponent = React.lazy(() => import('./Component'));
function App() {
return (
<ErrorBoundary FallbackComponent={ErrorFallback}>
<Suspense fallback={<div>Загрузка...</div>}>
<LazyComponent />
</Suspense>
</ErrorBoundary>
);
}А если этого хитрожопого Error Boundary нет, то ошибка, конечно, всплывёт в консоль, как говно в проруби, но интерфейс вроде как не разъебётся полностью. Но это не повод расслаблять булки, ёпта! На особо важных местах эту хуйню надо обязательно предусматривать, а то будет волнение ебать, а терпения у пользователей — ноль ебать.