A Broken Heart - Allen Pike

Еще одна история в стиле "один из самых безумных багов, с которым я сталкивался". Allen Pike рассказывает о баге, из-за которого страница загружалась в 100 раз дольше.

В чем суть. Однажды Allen увидел, что сайт, который обычно грузится моментально, стал виснуть при загрузке. В таком случае одна из первых реакций - недовольное "опять кто-то навертел в рендере React'а". Allen послал Claude Code найти и пофиксить проблемы с рендером React'а. Claude Code нашел, пофиксил и... ничего не изменилось

Allen'у пришлось самому погружаться в традиционные инструменты для дебага. Это принесло свои плоды - было обнаружено, что Safari тратит секунды, потребляя 90+% CPU M1 MAX на перестроение лэйаута.

Далее Allen взял еще один традиционный метод поиска проблем - бинарный поиск через удаление функционала.
Метод, я надеюсь, знакомый каждому:
1. Выбираем код, в котором, как мы думаем, скрыт корень проблемы. На ранних итерациях следует выбирать большие объемы кода
2. Удаляем код.
3. Если проблема исчезла - значит проблема где-то в этой части. Восстанавливаем код, goto 1 выбирать часть кода внутри текущей
4. Если проблема не исчезла - значит проблема где-то еще. Goto 1 выбирать новый кусок кода

Метод не идеальный, но сам периодически им пользуюсь, чтобы локализовать проблему. Как правило - заменяю импорты, компоненты, функции на заглушки и смотрю на эффект. Если помогло - значит то, что я заменил, содержит проблему.

Итак, возвращаемся к багу. Allen решил найти проблему этим методом с помощью Claude Code. Claude Code может оперировать кучей файлов с кодом и проверять гипотезу, что позволяет запустить процесс поиска проблемы в фоне. При этом Claude Code может выполнить это достаточно быстро.

Claude Code успешно обнаружил проблему и она оказалась в emoji ❤️. Что, весьма неожиданно. Allen (да и я тоже) часто использует emoji в интерфейсах, потому что они узнаваемы, их легко встраивать в интерфейсы (по сути как обычный текст) и они работают везде.

В чем корень проблемы. В 2008 году Apple добавили в шрифты цвета, чтобы поддержать emoji. Сделали это весьма костыльно - буквально зашили png в шрифты. Чуть позже рабочая группа сформировала удобный стандарт для цветов в шрифтах. В приложении использовался отдельный шрифт для emoji, чтобы добиться консистентности рендеринга emoji на разных платформах. Этот шрифт опирался на гугловый формат COLRv1, который ускорял загрузку шрифта, но фолбечился до svg в некоторых браузерах. Safari оказался как раз этим "некоторым" браузером. Собственно рендер svg и приводил к дикому пересчету лэйаута.

Такой вот баг.

Какие уроки можно вынести:
- Нельзя доверять даже рендерингу шрифтов. Шок.
- Старые добрые инструменты для поиска проблем все еще работают. Не шок. Если вы все еще не прокачались до черного пояса в девтулах - никогда не поздно начать это делать.
- ИИ-агенты позволяют автоматизировать поиск проблем

https://allenpike.com/2026/a-broken-heart

#development #safari #bug #emoji #cloudCode