Как сделать, чтобы крашился только конкретный компонент, а не всё приложение?

Question

[vaskadogana]

Недавно обновил версию вебпака и реакта. Теперь если в одном из компонентов критическая ошибка всё крашится. Раньше в случае бага, не работал только компонент с багой, теперь же всё ломается, выглядит примерно вот так .
p.s. приложение clientSide

Answer 1

[Nick]

Вообще ошибки надо бы исправлять, но можно глянуть в сторону componentDidCatch

Comments

[vaskadogana]

Таки да, с ошибками не годится)
Спасибо, componentDidCatch. Таки правильно впечатление было, что в
В старой версии реакт (вроде 13), что компонент инкапсулирован. При обращении выбрасывало ошибку и обрабатывало код дальше. Дали возможность маневра.
https://reactjs.org/blog/2017/07/26/error-handling...

Answer 2

[Robur]

В вашем скриншоте в консоле есть сообщение об ошибке, в нем есть ответ на ваш вопрос и ссылка где почитать

Comments

[vaskadogana]

вопрос был не про ошибку, а про то что весь код перестает работать. В старой версии реакт (вроде 13), складывалось впечатление, что компонент инкапсулирован. При обращении выбрасывало ошибку и обрабатывало код дальше.

На скрине две ошибки.
1. warning про то что у каждого элемента должен быть уникальный key
2. Про то, что компонент отмаунтился и его стейт обновить не выйдет

[Robur]

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

[vaskadogana]

Robur, вообще то читал)
Ответ из серии сам разбирайся со своими багами, вон в ошибке ссылка про дебаг.
Из доков рецепт: либо каждый компонент заворачивать в перехватчик ошибки, либо внутри каждого вставлять этот перехватчик. Можно было так и написать.
Меня же волновал вопрос глобально, думал может быть есть какая то фишка в настройках или какую то функцию вынесли во вне, на подобии с prop-types.
p.s. Ваш ответ был бы уместен, если бы я спросил, - Почему ничего не работает. Почему вдруг перестало работать?
Такое кароч. Некоторые моменты лучше спросить на тостере, чтобы закрыть проблему или понять в какую сторону гуглить. Либо потратить пару месяцев, чтобы досконально выучить JS и внутренности react, пилить какой то свой костыль, потом вдруг понять, что нужно было при сборке подключить какой нить пресет..

[Robur]

У вас конкретный вопрос - как сделать чтобы не крашилось. На это есть конкретный ответ, написанный в доках реакта и вы его получили еще в своей консоли, если вы это читали - то уже знаете это все и без тостера и наличие componentDidCatch вас не должно удивлять.

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

То что вас "волнует" - никому за пределами вашей головы не известно пока вы это не скажете.