Время We Build в среду 🛠️

Наши разработчики регулярно просматривают журналы Sentry, чтобы обеспечить плавный UX, и на этот раз обнаружили действительно скрытую ошибку.

Изначально ошибка была головоломкой, поскольку она не была изолирована от конкретной страницы, и на первый взгляд не было никакого способа ее воспроизвести.

Моментом озарения стало зашифрованное сообщение в журналах ошибок («React DOMException: не удалось выполнить 'removeChild' на 'Node'»), которое заставило нас понять, что это связано с React. В React (самом популярном фреймворке фронтенда, на котором работают более 50 млн веб-сайтов) есть давняя ошибка, которая вызывала сбои веб-сайта при использовании с Google Translate в определенных сценариях. Да, я знаю, проверьте подробности здесь https://t.co/IzqDARY9s5

Предложенное решение с обертыванием условно отрисованных текстовых узлов в теги <span> не сработало для нас из-за конфликтов с тегами <Trans>, которые мы используем для переводов. Это затрудняло автоматический поиск и исправление этих проблем. С другой стороны, при тысячах текстовых узлов ручное исправление их по одному было непрактичным.

Команде пришлось проявить креативность, и они разработали хитроумный обходной путь:

→ Они «исправили обезьяну» React, чтобы следить за тем, когда Google Translate был включен с функцией «MutationObserver».

→ Если бы это было так, они бы убедились, что React обрабатывает текстовые узлы с помощью методов «removeChild» и «insertBefore», чтобы текстовые узлы удалялись или вставлялись правильно, предотвращая сбои.

И проблема решена! Теперь наши пользователи могут наслаждаться бесперебойным опытом без каких-либо неожиданных сбоев. И благодаря изобретательности нашей команды исправление было реализовано без ущерба для производительности.