JavaScript エラー率は、ユーザーの機能を損ない、ユーザー エクスペリエンスを低下させる可能性がある JavaScript エラーが発生したブラウザ アプリケーションの割合を測定します。 このスコアカード ルールは、顧客満足度に直接影響するフロントエンドの問題を特定し、優先順位をつけて修正するのに役立ちます。
このスコアカードルールについて
この JavaScript エラー率ルールは、デジタル エクスペリエンス成熟度モデルのレベル 1 (リアクティブ) の一部です。ブラウザ アプリケーションに、ユーザーに影響を与える可能性のある未解決の JavaScript エラーがあるかどうかを評価します。
これが重要である理由: JavaScript エラーにより、フォーム、ナビゲーション、支払い、インタラクティブ機能などの重要なユーザー機能が損なわれる可能性があります。機能不全に陥ったユーザーはタスクを放棄することが多く、コンバージョンの喪失やブランドイメージの低下につながります。
このルールの仕組み
このルールは、JavaScript エラーを示すブラウザー エンティティ ( New Relic Browserによるアプリケーション モニター) の割合を評価します。 フロントエンド コードの問題により、ユーザーが機能不全に陥る可能性があるアプリケーションを識別します。
スコアを理解する
- 合格（緑）:ユーザーに影響を与える JavaScript エラーのあるブラウザ アプリケーションの割合が低い
- 不合格（赤）:ブラウザ アプリケーションの高い割合で JavaScript エラーが解決されていない
- 目標:すべてのブラウザ アプリケーション、特にユーザー トラフィックが多いアプリケーションでの JavaScript エラーを最小限に抑えます。
これが意味するもの:
- 合格点:フロントエンド アプリケーションは、壊れた機能を最小限に抑えながら、信頼性の高いユーザー エクスペリエンスを提供します。
- 不合格スコア:ユーザーは、満足度やコンバージョンに影響を与える可能性のある壊れた機能、フォーム、またはインタラクションに遭遇している可能性があります。
JavaScriptのエラー率を下げる方法
スコアに高い JavaScript エラー率が示されている場合は、次の手順に従ってフロントエンドの問題を特定し、解決してください。
1. エラー受信トレイでエラーパターンを分析する
- エラー受信箱にアクセス: New Relicのエラー受信箱に移動して、アプリケーション全体のすべての JavaScript エラーを確認します。
- 影響の大きいエラーを特定する:最も多くのユーザーまたは重要なユーザー ジャーニーに影響を与えるエラーに焦点を当てます。
- 類似したエラーをグループ化する:エラーメッセージ、影響を受けるページ、またはユーザーセグメントのパターンを探します。
- ビジネスへの影響度に応じて優先順位を付ける:トラフィックの多いページやコンバージョンに重要なフローのエラーを最初に解決する
2. エラーを分類してトリアージする
重大なエラー（すぐに修正してください）:
- 支払い処理の失敗
- ユーザー認証の問題
- データ送信の問題
- ナビゲーションまたはルーティングの失敗
優先度の高いエラー（スプリント内で修正）:
- フォーム検証の失敗
- 検索機能の問題
- ユーザーインタラクションの問題
- コンテンツの読み込み失敗
中程度の優先度のエラー (今後のリリースで修正予定):
- 軽微なUIの不具合
- 重大ではない機能の障害
- 美容やスタイリングの問題
- エッジケースのシナリオ
3. 体系的なエラー解決を実装する
再現と診断:
- スタックトレースを使用する:エラーの詳細を調べて、どのコードが失敗しているかを理解する
- ブラウザの互換性を確認する:エラーがブラウザ固有の問題ではないことを確認する
- ユーザーシナリオのテスト:エラーを引き起こすユーザーアクションを再現する
- 最近のデプロイメントを確認する:エラーが最近のコード変更と相関しているかどうかを確認する
根本原因を修正する:
- Null/未定義チェック:欠落データに対する適切なエラー処理を追加します
- APIエラー処理:失敗したネットワークrequestsに対して適切なフォールバックを実装する
- 入力検証:フォームがエッジケースや無効な入力を処理することを確認する
- リソースの読み込み:不足している画像、スクリプト、またはスタイルシートに対するエラー処理を追加します
4. エラー防止策を確立する
より優れたエラー処理を実装します。
- Try-catchブロック:リスクのある操作を適切なエラー処理で囲む
- デフォルト値:欠落または無効なデータに対するフォールバックを提供する
- グレースフルデグラデーション:機能が故障してもコア機能が動作することを保証する
- ユーザーフレンドリーなメッセージ:技術的な詳細ではなく、役立つエラーメッセージを表示します
開発手法の改善:
- コードレビュー:ピアレビュー中のエラー処理に重点を置く
- テスト戦略:単体テストと統合テストにエラー シナリオを含めます。
- ステージング環境:本番リリース前に徹底的にテストする
- 監視統合:開発環境とステージング環境にエラー追跡を追加します。
改善の測定
これらのメトリクスを追跡して、JavaScript エラー削減の取り組みを検証します。
- エラー率の削減: JavaScript エラーのあるアプリケーションの割合の減少
- ユーザーへの影響 メトリクス:コンバージョン率の向上、直帰率の低下、ユーザー満足度の向上
- エラー解決時間: JavaScript の問題をより迅速に特定して修正
- エラーの再発:修正後のエラーの繰り返しが少なくなりました。
一般的なJavaScriptエラーのシナリオ
サードパーティのスクリプトの失敗:
- 問題:外部ライブラリまたはウィジェットがロードに失敗したり、問題が発生したりするとエラーが発生します。
- 解決策:エラー境界を実装し、フォールバックを使用し、サードパーティの依存関係を監視します。
Browser互換性の問題:
- 問題:コードは一部のブラウザでは動作するが、他のブラウザでは動作しない
- 解決策:ブラウザ間でテストし、ポリフィルを使用し、プログレッシブエンハンスメントを実装する
ネットワークおよび API の障害:
- 問題:ネットワークrequestsが失敗したり予期しないデータが返されたりすると、JavaScript エラーが発生します。
- 解決策: APIに適切なエラー処理を追加し、再試行ロジックを実装し、ユーザーのフィードバックを提供します。
ユーザー入力のエッジケース:
- 問題:予期しないユーザー入力によりフォームやインタラクションが中断される
- 解決策:包括的な入力検証とサニタイジング処理を実装する
高度なエラー管理戦略
エラー追跡の自動化
- 自動アラート:新しいJavaScriptエラーや頻繁に発生するJavaScriptエラーに関するアラートを設定します
- エラーのグループ化:アラート疲れを回避するためにインテリジェントなグループ化を使用します
- 影響スコアリング:ユーザーへの影響と頻度に基づいてエラーを優先順位付けします
開発ワークフローとの統合
- CI/CDインテグレーション:重大なエラーが検出された場合にデプロイメントをブロックします。
- パフォーマンス バジェット:エラー率の閾値をデプロイメント ゲートとして設定します
- エラーの帰属:エラーを特定のデプロイメントまたは機能リリースに関連付ける
ユーザー体験の焦点
- リアルユーザー監視:エラーが実際のユーザーの行動にどのような影響を与えるかを追跡する
- コンバージョンへの影響:エラー率とビジネス メトリクスの相関関係を測定する
- ユーザー ジャーニー分析:ユーザー フローのどこでエラーが最も頻繁に発生するかを理解します。
重要な考慮事項
- ユーザーへの影響による優先順位付け:最もユーザーまたは重要なビジネス機能に影響を与えるエラーに最初に焦点を当てます。
- 完璧さと実用性のバランス:ユーザー体験に重大な影響を与えない限り、多少のエラーは許容されるかもしれません
- ビジネスコンテキストを考慮する:トラフィック量の多いアプリケーションでは、社内ツールよりもエラー許容度が低くなる場合があります。
- デプロイメント後のモニタリング:修正によって新しいエラーが発生しないことを確認する
次のステップ
- 即時の対応:エラー受信箱を確認し、ユーザーに影響を与える最も影響の大きいJavaScriptエラーを特定します。
- プロセス改善:定期的なエラートリアージ会議と解決ワークフローを確立する
- 予防の焦点:開発プロセスでより優れたエラー処理プラクティスを実装する
- Advance監視:プロアクティブなエラー防止とユーザーエクスペリエンスの最適化に向けた移行
- レベル2に進む: JavaScriptエラーが制御されたら、 Core Web Vitalsの最適化に焦点を当てます。
JavaScript エラー監視と解決方法の詳細については、ブラウザ監視ドキュメントとエラー受信トレイ ガイドを参照してください。