New Relic の JS errors で minify されていないスタックトレースを確認する

はじめに

こんにちは、フロントエンドエンジニアのすずきです。

こちらの記事で紹介した通り、弊社ではエラーの収集に New Relic を使っています。スニペットを入れるだけでキャッチされなかったエラーが収集でき便利なのですが、追加で設定をしないと出力されるスタックトレースは minify された JavaScript の内容になります。これでは不便なのでスタックトレースを元々の TypeScript の内容で表示するよう設定をしました。今回はその方法をご紹介します。

minify されていないスタックトレースを出力する方法

前提条件

弊社ではフロントエンドのフレームワークに Angular を採用していますので、Angular アプリケーションで説明を進めます
エラーを収集したいアプリケーションに New Relic Browser が設定されていること（手順はこちらの記事にも載っています）
ビルド時に SourceMap を出力する設定がされていること（こちらを参考に angular.json を設定してください）
出力場所の設定を変更していなければ dist フォルダに .map ファイルが出力されるようになります。

上記の設定のみ完了している状態で New Relic の [JS errors] > [Error Instances] を確認すると下のような画面が表示されます。

やること

やることは大きく分けてこの２つです

アプリケーションのバージョン情報を送信
SourceMap ファイルを New Relic にアップロード

バージョン情報を送信する目的は、エラーが発生した時にどのバージョンのアプリケーションで発生したかわかるようにすることです。 SourceMap をアップロードする時もアプリケーションのバージョンを指定することで、SourceMap をアプリケーションのバージョンに紐付けできます。

そのためにバージョンが一意になるキーを決める必要があります。それが下記のドキュメントに書いてある $release_name と $release_id です。 https://docs.newrelic.com/jp/docs/browser/new-relic-browser/browser-apis/addrelease/#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC

2 つの組み合わせが一意になっていればいいので、私が設定するときは $release_name はアプリケーション名で固定し、 $release_id はコミットハッシュにしました。

※バージョン管理は必須ではないので、1 番は必要に応じて実施してください。

バージョン情報を New Relic に送信

New Relic にはリリースバージョンを送信するための API が用意されているので、それを実行することで送信できます。

https://docs.newrelic.com/jp/docs/browser/new-relic-browser/browser-apis/addrelease/

ページ読み込み後のできるだけ早い段階で送信する必要があるので、今回は AppComponent の constructor で実行しました。

declare const newrelic: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor() {
    newrelic.addRelease('$release_name', '$release_id');
  }
}

html に挿入した New Relic のスニペットの末尾で実行するよう試したところ、それでも大丈夫そうでした。

この設定を追加したアプリケーションでエラーが発生すると New Relic の [JS errors] > [Error Instances] 画面で送信したリリースバージョンを確認できるようになります。

画像は $release_name を test-app 、$release_id を xxxyyyzzz に設定した例です。

SourceMap を New Relic にアップロード

SourceMap をアップロードする方法は 3 つ用意されています https://docs.newrelic.com/jp/docs/browser/new-relic-browser/browser-pro-features/upload-source-maps-api/#publish

@newrelic/publish-sourcemap を使用する
curl コマンドで API を実行する
New Relic の画面上でファイルを指定する

3 番は、エラー調査のたびにエラー発生時の SourceMap ファイルを 1 つずつアップロードしていく必要があるので、運用に合わずやめました。ドキュメントを見ると 1 番の方法が推奨されているのですが、 CI でアップロードを実行するときに、パッケージのダウンロードとインストールの時間を削減できると考え 2 番の API を使う方法を採用しました。

API 実行時に渡す値は下記の通りです。

Api-Key
API キーの確認方法はこちら
https://docs.newrelic.com/jp/docs/apis/intro-apis/new-relic-api-keys
sourcemap
アップロードする SourceMap ファイルのパス
javascriptUrl
New Relic の [JS errors] > [Error Instances] 画面に表示される、画像の赤枠部分
releaseId, releaseName
アプリケーションから addRelease API で送信したのと同じ値