We Build Wednesday の時間です 🛠️

当社の開発者は、スムーズな UX を確保するために定期的にセントリー ログを確認していますが、今回は本当に厄介なバグを発見しました。

このバグは、特定のページに限定されておらず、一見すると再現する方法がなかったため、当初は頭の体操になりました。

ひらめいた瞬間は、エラー ログの不可解なメッセージ (「React DOMException: 'Node' で 'removeChild' を実行できませんでした」) で、React に関連していることがわかりました。React (5,000 万以上の Web サイトを支える最も人気のあるフロントエンド フレームワーク) には、特定のシナリオで Google Translate を使用すると Web サイトがクラッシュするという長年のバグがあります。はい、わかっています。詳細はこちらで確認してください https://t.co/IzqDARY9s5

条件付きでレンダリングされたテキスト ノードを <span> タグでラップするという提案された解決策は、翻訳に使用する <Trans> タグと競合するため、機能しませんでした。これにより、これらの問題を自動的に検出して修正することが困難になりました。一方、テキスト ノードが何千もある場合、手動で 1 つずつ修正するのは現実的ではありませんでした。

チームは創造性を発揮する必要があり、巧妙な回避策を開発しました。

→ 「MutationObserver」関数を使用して、Google Translate が有効になっているかどうかを監視するように React に「モンキー パッチ」を適用しました。

→ 有効になっている場合は、React がテキスト ノードを「removeChild」および「insertBefore」メソッドで処理するようにし、テキスト ノードが正しく削除または挿入されるようにして、クラッシュを防止しました。

これで問題は解決しました。ユーザーは予期しないクラッシュがなく、シームレスなエクスペリエンスを楽しめるようになりました。チームの創意工夫のおかげで、パフォーマンスを犠牲にすることなく修正が実装されました。