はじめに
API ログを取っていますか、便利に使えていますか？
ログにもいろいろありますが、本記事では Backend API での、アクセスごとのリクエスト・レスポンスのログについて焦点を当てます。このログを使うと、それぞれのエンドポイントがどれぐらい使われているのか、レスポンス速度はどうなのか、エラーレートは問題ないかなどを確認することができますね。
今回は、実際にサービスを運用している中で欲しくなって追加した、特に React などを利用した SPA(Single Page Application) の場合に有効な、ロケーション情報の取得について共有します！
ロケーション情報の取得
SPA では、それぞれのページで必要な API を叩くことになるため、ページと API は一対一に対応しません。
こんな場合に、ブラウザの URL である、ロケーション情報を API のリクエストの中身に含めて、API ログ情報に付与しておくととても便利なデータになります。
具体的には、以下の３項目です。
| パラメータ | 説明 |
|---|---|
| location.search | URL のクエリストリング（例: ?q=キーワードを入力） |
| location.pathname | URL のパス |
| location.hash | URL のハッシュ (例：#ロケーション情報の取得) |
| 参考：Location 情報一覧 |
これらのデータがあると、例えば以下の調査に役立ちます。
API でエラーがでたときのユーザの行動文脈把握
リクエストに含められた GET や POST のデータがあれば、関数に渡された値は認識することができますが、ユーザがどういった文脈でその値を含めたリクエストを送ってきたかについては、利用箇所が複数あった場合には、一意に定まらない場合があります。ロケーション情報が入っていると、どの機能を利用していて、どういう表示がなされている際に送られてきたリクエストかが自明となるため、問題解決へのスピードが早くなります。
あるページAの表示が重いと言われた場合の速度調査
そもそも表示が重い原因にはブラウザやネットワークなども要因になり得ますが、今回はバックエンドについて。
挙動についてブラウザで実際に試してみたり、コードベースで確認することはできますが、実際にユーザがリクエストした際にどのようなレスポンス速度になっているのかを確認できると調査が早いですよね。ロケーション情報があれば、そのページAで使われている API を列挙してログを確認するのではなく、location.pathname がページAであるようなログをフィルタして確認することが可能です。
サンプルコード
具体的には以下のコードで集めています。
import axios from 'axios';
export function initializeInterceptor() {
axios.interceptors.request.use(request => {
request.headers.common['X-Location-Pathname'] = location.pathname;
request.headers.common['X-Location-Search'] = location.search;
request.headers.common['X-Location-Hash'] = location.hash;
return request;
});
}
まとめ
ロケーション情報を API のログに入れておくと調査に役立つという、実際にサービスを運用する中で得られた知見を共有させてもらいました。
こういった情報を仕込むと便利だよというのがありましたら、コメントいただけるとありがたいです！