React 19: ErrorBoundary с типизацией, error.cause и строгое логирование
React 19: ErrorBoundary с типизацией, error.cause и строгое логирование Границы ошибок в React долго выглядели как костыль для асинхронщины: раньше ErrorBoundary отлавливал только синхронные ошибки, а запросы с then/catch просто пролетали мимо. В 19 версии это починили через use и новые хуки, но типизация все равно остается местом, где можно наступить на грабли в production. Интерфейс и цепочка ошибок Интерфейс ErrorBoundaryState с Error | null, getDerivedStateFromError ловит ошибку, componentDidCatch отправляет в лог. Но что действительно спасает в реальных кейсах — это error.cause из ES2022. Когда fetch падает с 401, ты пробрасываешь не строку, а объект: * error.cause?.status для проверки статуса * error.cause?.message для текста interface AppError extends Error { cause?: { status: number; message: string; }; } Production: сужение и безопасность Передавать полный stack клиенту — плохая идея. Там пути файлов и внутренние адреса. Мы обрезаем первые 200 символов, если ошибка некастомная, и никогда не светим причину наружу: error.cause только во внутренний логгер. Схема логирования через instanceof: * если error instanceof AppError — пишем структурированно с типом, причиной и стеком * если просто Error — обрезаем стек, кидаем предупреждение * если вообще не Error — логируем как строку и показываем generic fallback Типичная ошибка instanceof не работает, если ошибка прилетела из другого iframe или realm. Там error.cause может быть сериализованным объектом, и придется проверять по полям вручную. Встречал такое при интеграции с микросервисными виджетами. Еще один момент — не засовывай всю логику в componentDidCatch: вынеси ее в отдельную функцию handleFatalError с возвратом never и переиспользуй, иначе при рефакторинге придется переписывать каждый Boundary. Вывод: Типизированный ErrorBoundary с error.cause и строгим логированием через instanceof — это надежный паттерн для обработки асинхронных ошибок, который дает консистентность и безопасность в production. Источники: React docs про Error Boundaries, MDN про Error.cause, React 19 release notes про use() hook и async errors.