はじめに｜情報不足によるエラー原因特定の遅れを解消したい

システム開発において「バグ」の発生は避けられません。
単純なコードミスから意図しない挙動、さらにはユーザーにとって使いづらい仕様まで、その種類は多岐にわたります。

理想的には、バグを発見した瞬間に修正できるのが望ましいですが、発見者と開発者が異なることが多く、情報共有に時間がかかるという課題があります。
バグレポートの情報が不足していると、調査が難航し、修正までの時間が大幅に伸びてしまいます。

この「情報不足によるエラー原因特定の遅れ」を解消するために、バグ報告を効率化するツール「Alterly」を開発しました。

バグ報告における、初期情報の重要性について

バグレポートでは、「最初の報告時点で必要な情報が揃っていること」が極めて重要です。
情報が揃っていれば、エンジニアはすぐに原因を特定し、迅速に対応できます。

しかし、情報が不足していると、以下のような問題が発生します。

情報不足によるトラブルの例

①発見者の環境で発生したエラーが、開発者の環境で発生しない
OSやブラウザの違いが原因で、開発者側で再現できず、調査が難航する。

②発見者が不在で、追加情報が得られない
最初の報告だけでは不十分で、発見者に確認しようとしてもすぐに連絡が取れない。

③伝言ゲームによる情報の劣化
ユーザー → サポート担当 → プロジェクトマネージャー → 開発チームの伝達プロセスで、重要な情報が抜け落ちる。

最初のバグレポートで欲しい情報

最初のバグレポートの段階で以下の情報が揃っていれば、エンジニアはすぐにエラーの原因を特定できます。

⚫︎必要な情報
・URL：https://sample.com/page
・スクリーンショット：エラー発生箇所のスクリーンショット
・OS： macOS 10.15
・ブラウザ： Chrome 131
・スクリーンサイズ: 1000px ×800px
・エラー内容：TypeError: Cannot set properties of null　(setting 'onclick')
・エラー行数：index.js:26
・再現手順：バグが発生するまでの具体的な操作手順（動画）
・期待される結果：本来期待される動作や表示内容
・実際の結果：バグ発生時の具体的な状況や表示内容
・再現性：バグが毎回発生するのか、特定の条件下でのみ発生するのかの頻度

これらの情報が揃っていれば、エンジニアが「どの環境で、どのような操作をしたときに、どんなエラーが発生したのか」を正確に把握できるため、調査や修正のスピードが大幅に向上します。

検討したこと

バグ報告の際、必要な情報をテンプレートに沿ってクライアントに入力してもらう方法を検討しました。

しかし、この方法には以下の課題がありました。

・クライアントの負担が増える（報告のたびに手入力が必要）
・入力内容のばらつきが発生する（情報が不足したり、誤記があったりする）
・必要な情報が揃わず、追加確認が発生する（結果として、エンジニアの対応が遅れる）

そこで、「必要な情報を自動取得する」仕組みを導入するのが最も効率的と判断しました。

自動取得であれば、クライアントの負担を軽減しつつ、エンジニアにとって必要な情報を漏れなく取得できるため、報告から修正までのスピードが大幅に向上します。

バグ報告を効率化するツールを開発

そこで、バグ報告を効率化するツール「Alterly」を開発しました。

以下の点を重視して開発しました。
・非エンジニアでも簡単に使える
・エンジニアがバグの原因を特定するために必要な情報を、自動で取得できる
・必要な情報を極力自動取得して、必要であればテキストで補完する
・ブラウザ拡張機能として提供

ブラウザ拡張機能にした理由は、クライアント側での導入が容易で、特別な設定なしにすぐに利用できるからです。

使い方や機能の詳細は、後日他の記事にまとめます。

実際に案件で使ってみた

実際に、非エンジニアのクライアントとの案件で利用したところ、以下のような改善点がありました。

Before	After
バグの原因調査に時間がかかる	コンソールログやネットワークログを自動取得し、デバッグ時間を短縮
バグの発生環境（OS・ブラウザ情報など）を後で確認する必要がある	自動で取得し、開発者へ提供
再現手順を説明するのが大変	Alterlyなら画面キャプチャを自動取得し、すぐに共有可能

最初の報告の時点でバグ原因が特定でき、コミュニケーションコストが発生することは激減しました！

まとめ

エンジニアにとって、バグ修正は避けて通れない業務です。

しかし、バグを修正するには「十分な情報が揃っていること」が前提となります。
情報が不足していると、修正が難しくなるどころか、そもそも原因特定すらできません。

こうした課題を解決するために、「Alterly」を導入しました。

Alterlyを使えば、バグの報告と同時に、必要な情報を自動取得できるため、開発者とのコミュニケーションが格段にスムーズになります。

ぜひ、この記事を読んで興味を持った方は Alterly を試してみてください！
👉 http://alterly.net/