#заметка дня
Я в очередной раз уронил продакшен. На сей раз, не для всех пользователей, а только для параноиков.
Как оказалось, некоторые люди ставят запрет не только на cookies, но и на local storage и даже на session storage. Возможно, такова политика безопасности. Возможно, за них это делает антитрекинговое расширение или условный блокировщик рекламы. Но факт есть факт.
Так вот, дамы и господа. Обращение к любому API, даже, казалось бы, внутреннему всегда может упасть.
Вы должны быть к этому готовы и либо использовать try-catch, либо проверять доступность объекта. А лучше всё и сразу.
Да, это банально, но многие ли из вас задумываются о том, что у клиента может стоять запрет буквально на всё?
А касаемо падения прода… Это очень плохо. Не потому что упало, а потому что я повторил ошибку, допущенную чуть больше года назад. Т. е. я тогда не сделал выводов и даже не установил мониторинг.
Ошибаться — можно, ошибаться одинаково — нельзя. Совсем.
Ну и чтобы не повторилось, мы настроили фронтенд-мониторинг — Datadog Real-User Monitoring. Теперь получаем информацию об ошибках в реальном времени.
Естественно, это не единственный подобный сервис:
- Stackdriver Error Reporting
- MONQ
- Sentry
- TrackJS
И так далее, очень и очень много, выбирать есть из чего.
В общем, не забывайте включать голову и используйте мониторинг.
#frontend #trycatch #localstorage #monitoring
Я в очередной раз уронил продакшен. На сей раз, не для всех пользователей, а только для параноиков.
Как оказалось, некоторые люди ставят запрет не только на cookies, но и на local storage и даже на session storage. Возможно, такова политика безопасности. Возможно, за них это делает антитрекинговое расширение или условный блокировщик рекламы. Но факт есть факт.
Так вот, дамы и господа. Обращение к любому API, даже, казалось бы, внутреннему всегда может упасть.
Вы должны быть к этому готовы и либо использовать try-catch, либо проверять доступность объекта. А лучше всё и сразу.
Да, это банально, но многие ли из вас задумываются о том, что у клиента может стоять запрет буквально на всё?
А касаемо падения прода… Это очень плохо. Не потому что упало, а потому что я повторил ошибку, допущенную чуть больше года назад. Т. е. я тогда не сделал выводов и даже не установил мониторинг.
Ошибаться — можно, ошибаться одинаково — нельзя. Совсем.
Ну и чтобы не повторилось, мы настроили фронтенд-мониторинг — Datadog Real-User Monitoring. Теперь получаем информацию об ошибках в реальном времени.
Естественно, это не единственный подобный сервис:
- Stackdriver Error Reporting
- MONQ
- Sentry
- TrackJS
И так далее, очень и очень много, выбирать есть из чего.
В общем, не забывайте включать голову и используйте мониторинг.
#frontend #trycatch #localstorage #monitoring
Datadog
Cloud Monitoring as a Service | Datadog
See metrics from all of your apps, tools & services in one place with Datadog’s cloud monitoring as a service solution. Try it for free.
👍1
#статья дня
Что произойдёт, если посетитель вашего сайта или веб-приложения отключит куки?
Давайте перефразирую: обернули ли вы в try-catch все ваши вызовы localStorage, sessionStorage, IndexedDB? Нет? А почему?
Почему я до сих пор в тестовых вижу сырые вызовы localStorage? Опустим тот факт, что многие там ещё и токены хранят…
Так вот: если пользователь отключит куки, он получит такое веселье, как на скриншоте выше. И пустой экран заодно. Оно вам надо? Обработайте ошибку и предупредите нормально.
Ошибаются все, даже MDN. Вот собственно обзорная статья об этом: https://blog.tomayac.com/2022/08/30/things-not-available-when-someone-blocks-all-cookies/
Я тоже огрёб как-то раз, забыв обернуть localStorage в try-catch и выкатив код на продакшен. Оказалось, среди клиентов много параноиков.
Ну что делать.
#cookie #localStorage
Что произойдёт, если посетитель вашего сайта или веб-приложения отключит куки?
Давайте перефразирую: обернули ли вы в try-catch все ваши вызовы localStorage, sessionStorage, IndexedDB? Нет? А почему?
Почему я до сих пор в тестовых вижу сырые вызовы localStorage? Опустим тот факт, что многие там ещё и токены хранят…
Так вот: если пользователь отключит куки, он получит такое веселье, как на скриншоте выше. И пустой экран заодно. Оно вам надо? Обработайте ошибку и предупредите нормально.
Ошибаются все, даже MDN. Вот собственно обзорная статья об этом: https://blog.tomayac.com/2022/08/30/things-not-available-when-someone-blocks-all-cookies/
Я тоже огрёб как-то раз, забыв обернуть localStorage в try-catch и выкатив код на продакшен. Оказалось, среди клиентов много параноиков.
Ну что делать.
#cookie #localStorage
👍28🤔4⚡1
#статья дня
Что произойдёт, если посетитель вашего сайта или веб-приложения отключит куки?
Давайте перефразирую: обернули ли вы в try-catch все ваши вызовы localStorage, sessionStorage, IndexedDB? Нет? А почему?
Почему я до сих пор в тестовых вижу сырые вызовы localStorage? Опустим тот факт, что многие там ещё и токены хранят…
Так вот: если пользователь отключит куки, он получит такое веселье, как на скриншоте выше. И пустой экран заодно. Оно вам надо? Обработайте ошибку и предупредите нормально.
Ошибаются все, даже MDN. Вот собственно обзорная статья об этом: https://blog.tomayac.com/2022/08/30/things-not-available-when-someone-blocks-all-cookies/
Я тоже огрёб как-то раз, забыв обернуть localStorage в try-catch и выкатив код на продакшен. Оказалось, среди клиентов много параноиков.
Ну что делать.
#cookie #localStorage #бородач
Что произойдёт, если посетитель вашего сайта или веб-приложения отключит куки?
Давайте перефразирую: обернули ли вы в try-catch все ваши вызовы localStorage, sessionStorage, IndexedDB? Нет? А почему?
Почему я до сих пор в тестовых вижу сырые вызовы localStorage? Опустим тот факт, что многие там ещё и токены хранят…
Так вот: если пользователь отключит куки, он получит такое веселье, как на скриншоте выше. И пустой экран заодно. Оно вам надо? Обработайте ошибку и предупредите нормально.
Ошибаются все, даже MDN. Вот собственно обзорная статья об этом: https://blog.tomayac.com/2022/08/30/things-not-available-when-someone-blocks-all-cookies/
Я тоже огрёб как-то раз, забыв обернуть localStorage в try-catch и выкатив код на продакшен. Оказалось, среди клиентов много параноиков.
Ну что делать.
#cookie #localStorage #бородач
👍20❤5
#статья дня
Что произойдёт, если посетитель вашего сайта или веб-приложения отключит куки?
Давайте перефразирую: обернули ли вы в try-catch все ваши вызовы localStorage, sessionStorage, IndexedDB? Нет? А почему?
Почему я до сих пор в тестовых вижу сырые вызовы localStorage? Опустим тот факт, что многие там ещё и токены хранят…
Так вот: если пользователь отключит куки, он получит такое веселье, как на скриншоте выше. И пустой экран заодно. Оно вам надо? Обработайте ошибку и предупредите нормально.
Ошибаются все, даже MDN. Вот собственно обзорная статья об этом: https://blog.tomayac.com/2022/08/30/things-not-available-when-someone-blocks-all-cookies/
Я тоже огрёб как-то раз, забыв обернуть localStorage в try-catch и выкатив код на продакшен. Оказалось, среди клиентов много параноиков.
Ну что делать.
#cookie #localStorage #бородач
Что произойдёт, если посетитель вашего сайта или веб-приложения отключит куки?
Давайте перефразирую: обернули ли вы в try-catch все ваши вызовы localStorage, sessionStorage, IndexedDB? Нет? А почему?
Почему я до сих пор в тестовых вижу сырые вызовы localStorage? Опустим тот факт, что многие там ещё и токены хранят…
Так вот: если пользователь отключит куки, он получит такое веселье, как на скриншоте выше. И пустой экран заодно. Оно вам надо? Обработайте ошибку и предупредите нормально.
Ошибаются все, даже MDN. Вот собственно обзорная статья об этом: https://blog.tomayac.com/2022/08/30/things-not-available-when-someone-blocks-all-cookies/
Я тоже огрёб как-то раз, забыв обернуть localStorage в try-catch и выкатив код на продакшен. Оказалось, среди клиентов много параноиков.
Ну что делать.
#cookie #localStorage #бородач
👌13👍9
Media is too big
VIEW IN TELEGRAM
#такое дня
Очень интересно наблюдать за тем, как люди переоткрывают для себя старые Web API. Только с другой стороны.
Ну я в том смысле, что на нас с вами сплошь и рядом несётся поток нововведений и он настолько шумит, что складывается впечатление, будто раньше вообще не было фана.
Был. Но, скажем так, интрузивный 🙂 Сейчас поясню.
Вот пронеслась ураганом демка, на которой 3D-сцена делится на два окна и эти окна взаимодействуют между собой: https://twitter.com/_nonfigurativ_/status/1727657155409363120
Автор пока не дал исходников самой модельки, только демо попроще: https://bgstaal.github.io/multipleWindow3dScene/
Но работает это взаимодействие на API из начала нулевых: window.screenX и, соответственно, screenY (и их алиасы: screenLeft и screenTop; потому что IE).
Ну, то есть, буквально доступно в любом браузере вообще. И давно.
Так что давайте повторим! Не без помощи мэтра Wes Bos, конечно. Он не дал ссылку на демо, потому пришлось немного постараться уже мне и собрать пример: https://htmlshit.github.io/webcam/dist/
Открывайте, разрешайте доступ к камере и увидите примерно ту же картину, что и на моём видео к посту.
Применить это, конечно, тупо некуда. Но как пример взаимодействия разных окон через localStorage — очень даже заходит :)
Так вот, почему интрузивно: потому что раньше можно было двигать открытое окно. То есть, представьте себе, вы хотите окно закрыть, мышкой двигаете — а оно уползает. Сейчас такого, конечно, сделать нельзя.
P. S. Перезалил видео. Я не ожидал, что телега оригинал зальёт.
#webcam #localstorage #fun
Очень интересно наблюдать за тем, как люди переоткрывают для себя старые Web API. Только с другой стороны.
Ну я в том смысле, что на нас с вами сплошь и рядом несётся поток нововведений и он настолько шумит, что складывается впечатление, будто раньше вообще не было фана.
Был. Но, скажем так, интрузивный 🙂 Сейчас поясню.
Вот пронеслась ураганом демка, на которой 3D-сцена делится на два окна и эти окна взаимодействуют между собой: https://twitter.com/_nonfigurativ_/status/1727657155409363120
Автор пока не дал исходников самой модельки, только демо попроще: https://bgstaal.github.io/multipleWindow3dScene/
Но работает это взаимодействие на API из начала нулевых: window.screenX и, соответственно, screenY (и их алиасы: screenLeft и screenTop; потому что IE).
Ну, то есть, буквально доступно в любом браузере вообще. И давно.
Так что давайте повторим! Не без помощи мэтра Wes Bos, конечно. Он не дал ссылку на демо, потому пришлось немного постараться уже мне и собрать пример: https://htmlshit.github.io/webcam/dist/
Открывайте, разрешайте доступ к камере и увидите примерно ту же картину, что и на моём видео к посту.
Применить это, конечно, тупо некуда. Но как пример взаимодействия разных окон через localStorage — очень даже заходит :)
Так вот, почему интрузивно: потому что раньше можно было двигать открытое окно. То есть, представьте себе, вы хотите окно закрыть, мышкой двигаете — а оно уползает. Сейчас такого, конечно, сделать нельзя.
P. S. Перезалил видео. Я не ожидал, что телега оригинал зальёт.
#webcam #localstorage #fun
👍21
#статья дня
Можно ли заменить стейт-менеджеры — простым localStorage?
Вопрос не настолько абсурдный, как может показаться, хотя понятное дело, что многие из вас уже знают ответ.
Давайте подумаем:
> Не всё должно быть постоянным. Допустим, у тебя открыто модальное окно. Перезагрузил страницу — и оно снова открыто, потому что значение сохранилось в localStorage. Абсурдный UX.
> Нет реактивности. Если просто читать из localStorage, React не узнает, что данные изменились, и не перерендерит компонент. Придётся вручную дёргать setState.
> Событие storage работает не так. Оно срабатывает только в других вкладках, а не в той, где ты вызвал localStorage.setItem(). То есть синхронизацию внутри приложения оно не решает.
> Ограничения. Только строки, лимит около 5 МБ, возможные ошибки при парсинге JSON, коллизии ключей. Всё это требует дополнительных костылей.
> SSR недоступен. На сервере localStorage просто не существует, и код падает с ошибкой.
localStorage и, частично, sessionStorage отлично подходят для мелочей:
> выбор темы,
> сохранение введённых данных формы,
> открытая вкладка меню,
Но как только речь заходит о данных, которые должны синхронно обновляться в разных компонентах и вызывать ререндер — нужен Context или полноценный state-менеджер.
Итак: localStorage — это удобное дополнение к Context/Redux/Zustand, но не замена. Он решает задачу «сохранить между сессиями», а не «синхронизировать состояние внутри React».
А если хотите подробностей — собственно, статья от Нади Макаревич: https://www.developerway.com/posts/local-storage-instead-of-context
Не думаю, что олды что-то найдут новое (разве что лишний раз поржать над событием storage), но у новичков вопросы такого плана возникают постоянно.
#react #localstorage
Можно ли заменить стейт-менеджеры — простым localStorage?
Вопрос не настолько абсурдный, как может показаться, хотя понятное дело, что многие из вас уже знают ответ.
Давайте подумаем:
> Не всё должно быть постоянным. Допустим, у тебя открыто модальное окно. Перезагрузил страницу — и оно снова открыто, потому что значение сохранилось в localStorage. Абсурдный UX.
> Нет реактивности. Если просто читать из localStorage, React не узнает, что данные изменились, и не перерендерит компонент. Придётся вручную дёргать setState.
> Событие storage работает не так. Оно срабатывает только в других вкладках, а не в той, где ты вызвал localStorage.setItem(). То есть синхронизацию внутри приложения оно не решает.
> Ограничения. Только строки, лимит около 5 МБ, возможные ошибки при парсинге JSON, коллизии ключей. Всё это требует дополнительных костылей.
> SSR недоступен. На сервере localStorage просто не существует, и код падает с ошибкой.
localStorage и, частично, sessionStorage отлично подходят для мелочей:
> выбор темы,
> сохранение введённых данных формы,
> открытая вкладка меню,
Но как только речь заходит о данных, которые должны синхронно обновляться в разных компонентах и вызывать ререндер — нужен Context или полноценный state-менеджер.
Итак: localStorage — это удобное дополнение к Context/Redux/Zustand, но не замена. Он решает задачу «сохранить между сессиями», а не «синхронизировать состояние внутри React».
А если хотите подробностей — собственно, статья от Нади Макаревич: https://www.developerway.com/posts/local-storage-instead-of-context
Не думаю, что олды что-то найдут новое (разве что лишний раз поржать над событием storage), но у новичков вопросы такого плана возникают постоянно.
#react #localstorage
❤9🫡1