Обработка ошибок в React-приложении | Error Boundary

  Рет қаралды 19,506

Михаил Непомнящий

Михаил Непомнящий

3 жыл бұрын

Если в рабочем приложении на React случится ошибка, то конечный пользователь увидит просто белый экран и не сможет взаимодействовать с сайтом. React-предохранители или Error Boundary контейнеры на основе классовых компонентов помогают решить данный вопрос и подготовить полноценный UI, который предотвратит полное размонтирование приложения.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

Пікірлер: 29
@IliaKotl
@IliaKotl 3 жыл бұрын
Бомба!)) сегодня хотел как раз спросить и дополнительно - есть ли практика логгирования в отдельные хранилища/ файлы, для последующего анализа и устранения ошибок!?
@mishanep
@mishanep 3 жыл бұрын
Для логирования sentry.io предоставляет хороший сервис. У них, кстати, есть собственная либа для Error контейнера.
@uNkind33
@uNkind33 3 жыл бұрын
@@mishanep ++ за сентри
@llwebstylell242
@llwebstylell242 2 жыл бұрын
@@mishanep а что за логирование ? это для поиска багов и ошибок в режиме разработки ?
@yugo6418
@yugo6418 6 ай бұрын
Скорее всего речь идет о записи в хранилище данных (факт возникновения ошибки, причина ошибки, где эта ошибка произошла) для ведения учета о их возникновении и, в целом, возможности отследить её возникновение для того, чтобы разработчики могли понять почему эта ошибка произошла и как устранить её. Если простыми словами, то это система, где отслеживается каждая ошбика, полученная пользователем, и регистрируется в файлы (хранится там со всей нужной информацией), чтобы потом провести анализ (полученных ошибок) и сделать так, чтобы эта ошибка больше не происходила. @@llwebstylell242
@llwebstylell242
@llwebstylell242 6 ай бұрын
@@yugo6418 уже не актуальная инфа для меня, но спасибо, давно уже с этим всем разобрался
@alexshepel9387
@alexshepel9387 Жыл бұрын
Шикарне відео! Дуже дякую!!!
@petarthecodehunter3333
@petarthecodehunter3333 2 жыл бұрын
Спасибо вам большое. Слушать вас одно удовольствие)
@azizbekkomilov3589
@azizbekkomilov3589 2 жыл бұрын
Спасибо за видео ждём новых интересных видео!
@sergeyf466
@sergeyf466 Жыл бұрын
Видео просто супер, очень понятно и доходчиво объяснено !!!
@user-cx2bb4tj2z
@user-cx2bb4tj2z 2 жыл бұрын
Спасибо! Кратко и по делу!!!)
@magerrrr
@magerrrr 3 жыл бұрын
Спасибо большое! Классное видео)
@user-vm2db5cq1g
@user-vm2db5cq1g Жыл бұрын
Отличное видео! Автору благодарность за канал))
@uNkind33
@uNkind33 3 жыл бұрын
Спасибо за видео!
@HaveFun77777
@HaveFun77777 3 жыл бұрын
Благодарю вас!)
@HaveFun77777
@HaveFun77777 3 жыл бұрын
Как раз начал использовать в своём проекте. Было бы интересно от вас узнать об оптимизации рендера в реакт, как лучше всего это делать правильно?
@elvinyuzbekov2951
@elvinyuzbekov2951 4 ай бұрын
I liked this video
@from_brest2631
@from_brest2631 2 жыл бұрын
лойс
@Seacrest.
@Seacrest. 3 жыл бұрын
говорят читать доку, но все равно смотрим видосики
@mishanep
@mishanep 3 жыл бұрын
Я сам визуал и небольшой ролик по чему-то для меня новому сокращает возьню с документацией на часы. Понятно, что ни одно видео документацию не покроет, поэтому без нее всё равно никуда. Но если есть возможность быстрого старта, то это всегда здорово =)
@maxfillsen957
@maxfillsen957 3 жыл бұрын
Михаил, вопрос. Имеется некий но в API эта картинка 404 Not found (хотя сама ссылка есть, просто картинки по ней нету) как сделать обработку на наличие картинки? по типу {imgurl ? {imgurl} : Not Found} речь конечно о React приложении
@mishanep
@mishanep 3 жыл бұрын
Если imgurl может быть пустой, то тогда да, ваш вариант может иметь место: { imgurl ? : Not Found } Если же imgurl - конкретная ссылка, то такой код работать не будет. Здесь скорее сам компонент CardMedia должен обрабатывать на картинке событие onError - валидное dom-событие, возникающее при отсутствии ресурса. И при его обработке вместо картинки уже либо текст с ошибкой предлагать, либо fallback-картинку (т.е. точно работающую картинку, например, с той же самой ошибкой, только веселее).
@maxfillsen957
@maxfillsen957 3 жыл бұрын
@@mishanep material-ui.com/api/card-media/#cardmedia-api а если у него в API нет события onError?
@FireORcolD
@FireORcolD 11 ай бұрын
а можно узнать вообще как понять в какие моменты могут быть ошибки чтобы их оборачивать этими предохранителями или лучше одним обернуть весь проект?
@ArseniyBendyukov
@ArseniyBendyukov 3 жыл бұрын
спасибо, очень интересно! P.S. нашел канал благодаря Диме IT-KAMASUTRA
@mishanep
@mishanep 3 жыл бұрын
Спасибо ему :)
ErrorElement для обработки ошибок в React приложении
14:18
Михаил Непомнящий
Рет қаралды 14 М.
Cypress для End2end тестирования. Первый взгляд
26:12
Михаил Непомнящий
Рет қаралды 31 М.
Amazing weight loss transformation !! 😱😱
00:24
Tibo InShape
Рет қаралды 64 МЛН
No empty
00:35
Mamasoboliha
Рет қаралды 9 МЛН
World’s Largest Jello Pool
01:00
Mark Rober
Рет қаралды 101 МЛН
Обработка ошибок #0: Проблема
11:47
JavaScript.Ninja
Рет қаралды 8 М.
CSS-модули, SASS/SCSS и сброс стилей в React-приложении
18:28
Михаил Непомнящий
Рет қаралды 36 М.
React Proxy | Easiest Fix to CORS Errors
15:52
Sam Meech-Ward
Рет қаралды 83 М.
Learn React Error Boundaries In 7 Minutes
7:07
Web Dev Simplified
Рет қаралды 112 М.
Styled Components & React ПОЛНЫЙ КУРС
23:40
Ulbi TV
Рет қаралды 67 М.
Открываем все секреты React Context API
1:01:11
АйТи Синяк
Рет қаралды 21 М.
Failing Gracefully with React Error Boundary
15:01
Codevolution
Рет қаралды 37 М.
React JS #15 Контекст (React Context)
11:00
webDev
Рет қаралды 29 М.
Amazing weight loss transformation !! 😱😱
00:24
Tibo InShape
Рет қаралды 64 МЛН