Server Rendering Errors in React 18: part 3
В предыдущем посте я упомянул, что поиск места, где ломается гидратация может быть крайне утомительным. В комментариях справедливо заметили, что сейчас в ошибке присутсвует и стек-трейс с компонентами и найти проблемное место достаточно легко.
До появление стейк-трейсов я находил проблемные места следующим образом:
1. ставил брейк-пойнт в ошибке гидратации;
2. поднимался на пару уровней в call stack выше;
3. находил DOM-ноду, которая попала в ошибку.
Достаточно простой алгоритм, но почему-то многие им не пользовались и в целом не понимают как работают дев-тулзы. Об этом я писал в посте Самый важный скилл, который никогда не проверяют на собеседованиях.
Тем не менее, способ далёк от идела.
История начинается с ишью Nicer Formatting of SSR Validation.
Одни из разрабочиков, кто попробовал решить эту проблему был Иван Бабак (@sompylasar). Он открыл пул-реквест, добавляющий в ошибки HTML дифф. Пул-реквест получил много комментариев и правки вносились практически 9 месяцев. После Дэн Абрамов попросил реализовать дифф в react-reconciler — так появился второй пул-реквест. История повторилась, только в этот раз пул-реквест пролежал практически 1.5 года. В феврале 2020 года Дэн Абрамов закрыл пул-реквест со словами «Thanks a lot for exploring this. The scope ended up being larger than we expected, and we went with a simpler». И этим simpler как раз таки стал стек компонентов.
На этом пост можно было бы и закончить, но всё гораздо забавнее.
В RFC server erros in react 18 в разделе Adoption есть интерсный пункт «The initial release will need to be fast-followed by two features: Better hydration error messages (so that they're easier to fix)». Что же за этим скрывается, учитывая парочку неудачных (с точки зрения мерджа, не с точки зрения кода) пул-реквестов с общим временм жизни больше двух лет?
Здесь история продолжается с твита Дэна Абрамова:
i want to make hydration errors easier to debug in react. even with component stacks, “expected to find <div> in <div>” is, um, not amazing. there’s been previous attempts to improve them but didn’t end up merged. but we can and should do better.
Сперва Дэн написал тесты на гидаратацию на 1300 строк, а после открыл пул-реквест Diffs for hydration errors. Кажется, история сделала полный круг.
Если вам интересно, как это устроено внутри, то можно посмотреть два стрима Дэна (в рамках которых он и написал этот пул-реквест): первый и второй.
P.S. Ссылок очень много, но обязательно посмотрите схемы в пул-реквестах Ивана. Человек очень много сил и времени вложил в свои пул-реквесты, которые, к сожалению, были закрыты.
P.P.S. Забавно, что именно Дэн взялся за новую реализацию диффа. Кажется, что он чувствует себя обязанным, что в общем-то более чем понятно. Надеюсь в этот раз всё получится и мы получим классные ошибки.
В предыдущем посте я упомянул, что поиск места, где ломается гидратация может быть крайне утомительным. В комментариях справедливо заметили, что сейчас в ошибке присутсвует и стек-трейс с компонентами и найти проблемное место достаточно легко.
До появление стейк-трейсов я находил проблемные места следующим образом:
1. ставил брейк-пойнт в ошибке гидратации;
2. поднимался на пару уровней в call stack выше;
3. находил DOM-ноду, которая попала в ошибку.
Достаточно простой алгоритм, но почему-то многие им не пользовались и в целом не понимают как работают дев-тулзы. Об этом я писал в посте Самый важный скилл, который никогда не проверяют на собеседованиях.
Тем не менее, способ далёк от идела.
История начинается с ишью Nicer Formatting of SSR Validation.
Одни из разрабочиков, кто попробовал решить эту проблему был Иван Бабак (@sompylasar). Он открыл пул-реквест, добавляющий в ошибки HTML дифф. Пул-реквест получил много комментариев и правки вносились практически 9 месяцев. После Дэн Абрамов попросил реализовать дифф в react-reconciler — так появился второй пул-реквест. История повторилась, только в этот раз пул-реквест пролежал практически 1.5 года. В феврале 2020 года Дэн Абрамов закрыл пул-реквест со словами «Thanks a lot for exploring this. The scope ended up being larger than we expected, and we went with a simpler». И этим simpler как раз таки стал стек компонентов.
На этом пост можно было бы и закончить, но всё гораздо забавнее.
В RFC server erros in react 18 в разделе Adoption есть интерсный пункт «The initial release will need to be fast-followed by two features: Better hydration error messages (so that they're easier to fix)». Что же за этим скрывается, учитывая парочку неудачных (с точки зрения мерджа, не с точки зрения кода) пул-реквестов с общим временм жизни больше двух лет?
Здесь история продолжается с твита Дэна Абрамова:
i want to make hydration errors easier to debug in react. even with component stacks, “expected to find <div> in <div>” is, um, not amazing. there’s been previous attempts to improve them but didn’t end up merged. but we can and should do better.
Сперва Дэн написал тесты на гидаратацию на 1300 строк, а после открыл пул-реквест Diffs for hydration errors. Кажется, история сделала полный круг.
Если вам интересно, как это устроено внутри, то можно посмотреть два стрима Дэна (в рамках которых он и написал этот пул-реквест): первый и второй.
P.S. Ссылок очень много, но обязательно посмотрите схемы в пул-реквестах Ивана. Человек очень много сил и времени вложил в свои пул-реквесты, которые, к сожалению, были закрыты.
P.P.S. Забавно, что именно Дэн взялся за новую реализацию диффа. Кажется, что он чувствует себя обязанным, что в общем-то более чем понятно. Надеюсь в этот раз всё получится и мы получим классные ошибки.