フォームレンダラーの鋸歯状の謎を解決する - レイテンシーのWhack-a-Mole

Core Concepts

フォームレンダラーのパフォーマンス問題の根本原因を特定し、効率的な修正を行うことで、ユーザーエクスペリエンスの向上を実現した。

Abstract

この記事では、Typeformのコアサービスの1つであるフォームレンダラーで発生したパフォーマンス問題の調査プロセスについて説明しています。
デプロイ後、フォームレンダラーのレスポンス時間に鋸歯状のパターンが見られるようになりました。この問題の原因を特定するために、以下の手順で調査を行いました:

メトリクスとトレーシングの分析

フォームAPI呼び出しに100msもかかっているなど、レスポンス時間の内訳に疑問が生じた

ランタイムメトリクスの収集

CPUの使用率と、イベントループの遅延が問題の発生と一致することが分かった
メモリ使用量に変化はなかったため、オブジェクトの過剰な生成が疑われた

プロファイラの活用

デプロイ直後と問題発生時のフレームグラフを比較し、trackPrivateForm関数が問題の原因であることを特定した

問題の修正

trackPrivateForm関数内で毎回生成していたRudderStackAnalyticsインスタンスを、関数外で1回だけ生成するように変更した
これにより、レスポンス時間の鋸歯状パターンが解消された

この調査を通して、継続的なシステムのモニタリングと詳細な分析の重要性を学びました。問題の早期発見と迅速な対応により、ユーザーエクスペリエンスの向上につなげることができました。

Stats

フォームAPI呼び出しに100msもかかっていた
デプロイ直後はCPU使用率が低下し、イベントループの遅延も減少していた
問題発生時はCPU使用率が上昇し、イベントループの遅延が増加していた
メモリ使用量に変化はなかった

Quotes

"Tools like Datadog help us track important metrics, like how fast our systems respond to requests."
"We could even confirm and narrow down the issue with distributed tracing."
"The Datadog Profiler allows us to choose different time frames and compare their flame graphs."

Key Insights Distilled From

Latency Whack-a-Mole: Our Renderer’s Sawtooth Mystery Solved

by Arnau Guadal... at medium.com 07-04-2024

https://medium.com/typeforms-engineering-blog/typeforms-sawtooth-mystery-solved-8051550ce780

Deeper Inquiries

フォームレンダラーのパフォーマンス問題を解決する際に、どのようなアプローチが考えられるでしょうか?

ファームレンダラーのパフォーマンス問題を解決する際には、まず問題の特定と分析が重要です。Datadogのメトリクス、トレーシング、ランタイムメトリクス、プロファイラなどのツールを活用して、問題の原因を特定しました。特に、ランタイムメトリクスを使用してCPU使用率、メモリ使用量、イベントループの遅延などを監視し、問題の発生源を特定しました。その後、プロファイラを使用して特定の関数や処理における時間のかかり具合を詳細に分析し、問題の原因を突き止めました。最終的に、問題の特定後はコードの最適化や修正を行い、パフォーマンスを改善しました。

この問題の根本原因は何か、別の可能性はないでしょうか?

この問題の根本原因は、trackPrivateForm関数内で繰り返し新しいAxiosインスタンスを生成していたことでした。このインスタンスの再生成が遅延の原因となっていました。問題を解決するために、RudderStackAnalyticsインスタンスの生成をtrackConversationFailed関数の外に移動し、インスタンスが1度だけ生成されるようにしました。この変更により、インスタンスの再生成がなくなり、パフォーマンスの向上が実珵されました。別の可能性としては、他の関数や処理においても同様のインスタンス再生成が行われている可能性が考えられますので、今後の監視と分析が重要です。

フォームレンダラーのパフォーマンス最適化に役立つ、他のツールやテクニックはありますか?

フォームレンダラーのパフォーマンスを最適化するためには、他のツールやテクニックも活用できます。例えば、キャッシュの効果的な活用や非同期処理の導入、コードの最適化などが考えられます。また、コードレビューやペアプログラミングを通じて、他のチームメンバーとの知識共有やアイデアの交換も重要です。さらに、定期的なパフォーマンステストやベンチマークテストを実施し、問題を事前に発見することも有効です。継続的な監視と改善を行いながら、フォームレンダラーのパフォーマンスを最適化するための取り組みを行うことが重要です。