バグのあるWebアプリに終止符を

バグのあるWebアプリに終止符を

現在、ユーザーがWebで遭遇するあらゆるバグを確実に自動検出・修正することが可能です。明らかに、これはまだ実現していません。Replayの使命は、それを実現することです。

いくつかの要素が必要です。

1. 最新のコーディングエージェント
2. あらゆるバグを見るための可観測性
3. 各バグの根本原因を特定するための可観測性
4. これらを結びつけるハーネス

適切な可観測性は、AI搭載のSDLC全般と同様に、このプロセスにとって鍵となります。

エージェントはコンテキストを必要とします。可観測性は、エージェントが構築中のアプリが実際にどのように動作するかを知るためのコンテキストレイヤーです。実際に何が起こっているのか分からないと、推測を始め、間違いを犯し、状況は急速に悪化します。何が起こっているのか分かっていれば、アプリの動作に関する理論を確認し、軌道に乗ることができます。

より良い可観測性は、より良い結果をもたらします。

完璧な可観測性

Replayの中核技術は、ChromiumとNode.jsの時間旅行デバッガです。これらのランタイムのフォークバージョンは、低オーバーヘッドでランタイムへの非決定的な入力をキャプチャし、ランタイムを決定論的にリプレイできるようにします。記録中に実行されたすべてを回復し、実質的にデータベースにアンパックできるため、エージェントは実行されたすべてのステートメント、あらゆる時点での状態、すべての制御およびデータ依存関係などを、詳細を失うことなく見ることができます。

時間旅行デバッガは完璧な可観測性を提供します。アプリの動作に関するあらゆる質問に答えることができます。それを手に入れれば、エージェントは推測する必要がなくなります。何が起こったのかを正確に把握し、問題の実際の根本原因まで遡り、適切な修正を開発できます。

Replay QA

数ヶ月前にReplay QAをリリースしました。これは、デバッガを基盤とした、アプリのあらゆるバグを見つけて説明するためのドロップインツールです。QAは、単独で、またはガイダンスを受けてアプリを探索・テストします。新しい自己修復機能により、部分的に匿名化されたデータからユーザーセッションを再現して録音を作成できます。作成した録音を処理して、壊れた機能からグリッチ、パフォーマンス問題、セキュリティホールなど、さまざまなバグを検出します。そして、すべてのバグについて根本原因を特定し、録音から引き出された証拠でその分析をサポートします。

QAは自己修復も可能です。そのバックエンド全体が記録されており、問題が検出された場合（バグを見逃したり、正確に根本原因を特定できなかったりした場合）、それらの問題はデバッグされ、修正され、ソフトウェアファクトリによって永続的なテストケースに変換されます。

実験として、主要なアプリ構築ツールのコンテストで優勝したり、その他でプロモーションされた40のアプリ（Lovable、Replit、Base44、Bolt.newなど）でQAを実行しました。Astraに発見事項を確認・重複排除してもらった結果、900件以上のバグが見つかりました。その分布は以下の通りです。

［画像：バグの分布を示すグラフ］

例：デッドボタン

比較のために、これらのアプリの一部で他のQAツールを実行しました。以下は、CallVanceというアプリに関するQA Wolfからのバグレポートです。ダウンロードボタンが機能しません。QA Wolfはバグを特定し、再現手順を生成しますが、その原因については全く説明しません。

［画像：QA Wolfによるバグレポート］

このバグレポートに対処するエージェントは、コードを読み、根本原因を推測する必要があります。間違って推測した場合、複数の修正サイクルを経る必要があり、問題が解決できずに立ち往生する可能性があります。

これらの問題は、CallVanceやQA Wolfに固有のものではありません。アプリ構築ツールの製品にはバグが満載されており、時間旅行デバッガを使用せずにQAを行うと、原因に関する限定的な情報しか得られません。画面録画を見たり、ネットワークやコンソールログを見たりする表面的な観察は、原因を示唆することがありますが、決定的に特定することはできず、エージェントは常に推測することになります。

以下は、同じデッドボタンに関するReplay QAからのレポートです。

［画像：Replay QAによるバグレポート］

Replay QAは正確な問題を特定します。ReactコンポーネントのonClickハンドラが欠落していることです。QAは、ボタンに関連付けられたレンダリング関数を特定し、その関数と欠落しているハンドラを示す証拠を生成しました。このレポートを確認するエージェントは、根本原因を証拠と照合し、推測することなくバグ自体を修正できます。

例：レイアウトシフト

上記の技術は、録画ベースの分析なしでは発見が難しいものを含む、より複雑なバグにも同様に適用できます。以下は、同じCallVanceアプリでのレイアウトシフトです。アプリがロードされると、スケルトンがサイズを変更し、ページ上の他のコントロールがずれて、使いやすさに影響を与えます。

［画像：レイアウトシフトの例］

以下は、レポートからの根本原因です。

［画像：レイアウトシフトの根本原因レポート］

このレポートはより詳細で、異なるReactコミット、その間に行われたネットワークリクエスト、およびコンポーネントレンダリング関数の変数値など、すべての要因を参照してレイアウトシフトの根本原因を説明しています。この詳細なレポートは、エージェントがレイアウトシフトを適切に修正するために必要なものを正確に提供します。

今後の展望

Replay QAは現在一般公開されており、無料で試用できます。自己修復ユーザーセッション分析、GitHubおよびエージェント接続、ニーズに合わせてアプリを監視するためのスケジュール実行など、統合のセットアップは簡単です。QAを継続的に改善しており、バックエンド録音生成と分析をより深く統合して、フルスタックの時間旅行デバッグを実現する作業を進めています。

QAはAPIを介して録音を生成し、バグを分析するためにも利用できます。お問い合わせいただければ、その機能を構築中の製品に直接統合することに関心があるかどうかをお知らせください。