クライアントエラーのログ収集(プロトタイプ)

[Sachiaki-Kasuya]

概要

ブラウザ上でエラーが発生した時にコンソールログとfrontendコンテナにログ出力するように対応
ログ収集対象者として、ログインしているユーザと管理者を想定
/client-errorとしてPOSTし、成功時は204を返す

ペイロードの概要

以下の3項目を出力

• actionLog: 操作ログ（ヘッダーやラベルのクリック、ルーティングを過去20件分記録）
  • ユーザ操作が関連する個所にどのような操作をしたのかを設定した、url（の一部）や実行時の日時を保存
  • 現状 apiCall、click、mapInteraction（地図関連の操作）、routeChange（画面遷移） をactionLog.entries[x].typeに設定
• enviroment: 使用デバイスやブラウザを表示
  • https://developer.mozilla.org/ja/docs/Web/API/Navigator/userAgent を使用
• error: 発生したエラーの詳細
  • message、発生日時、URL、スタック時のログを表示

実行例

actionLog.entriesのリスト内容は左のデータ（先頭）が古く、右（最後尾）が最新の情報です
直後に記載のerrorに至るまでのユーザー操作を表しており、原因を調査する補助情報として想定しています

確認したエラーパターン

位置情報をOFFにして以下の動作でエラーが出ることを確認

• ログイン後初期表示 一般ユーザ・管理者
• 幸福度一覧表示 一般ユーザ
• 幸福度登録（通常、画像添付） 一般ユーザ
• 幸福度削除 一般ユーザ
• 幸福度インポート 管理者
• 幸福度エクスポート 管理者
• 地図タイル読み込み失敗時
• アクセストークン期限切れ後に操作

try-catch外で発生したエラーの検知について

ブラウザで error / unhandledrejection として通知するものはキャッチ可能

frontend/src/components/client-error-reporter.tsx

window.addEventListener('error', handleError)
window.addEventListener('unhandledrejection', handleUnhandledRejection)

https://github.com/c-3lab/oasismap/pull/393/changes#diff-8a4eff86f584ef8bf08f0dad00a85554fe9e7bfe6e35528fe1d8fbaa1cca86b7R49-R50

上記の handleErrorとhandleUnhandledRejection でキャッチできていることを確認

各呼び出しでログ出力を設定し、開発者ツールのコンソールで動作確認

• handleError

• handleUnhandledRejection

[Sachiaki-Kasuya]

申し訳ありません、今回実装分の setGeolocationStatus('not_supported') が漏れていました
後ほど修正コミットプッシュいたします

(追記)：修正コミットプッシュ済み

oasismap/frontend/src/libs/geolocation.ts

Line 16 in f00f183

setGeolocationStatus('not_supported')

[keita-yasuda]

エラー収集ツールであるSentryでは、届いたエラーレポートを種類毎に集約するIssuesという機能がありました。
https://docs.sentry.io/product/issues/

当PRの実装にも、エラー種別を表す情報がログ出力されるような機能追加を検討してはいかがでしょうか。