ブラウザモニタリングでは、 ソースマップ のアップロードをサポートしています。このソースマップは、 JS エラー ページ
ソースマップをAPI経由でブラウザにアップロードするためには、以下の情報が必要です。
JavaScriptのURLとは何ですか？ エージェントがコードのエラーを捕捉するたびに、エラーが発生したJavaScriptのURLが関連付けられます。これは、HTMLのscriptタグの src 属性です。この完全な JavaScript の URL は、ソースマップをブラウザに送信する際に必要です。
ブラウザのエラーのJavaScriptファイルのURLは、 JS errors ページで確認できます。UIでこれらのエラーを見つける方法については、 ブラウザ監視ソースマップ を参照してください。
リリースネームやIDは必要ですか？ 多くの組織では、JavaScriptのURLにバージョン番号やハッシュを入れています。これは通常、"バスト" のキャッシュに追加され、ユーザーが最新バージョンのコードを入手できるようにします。このタイプのURLは次のようなものです。
https://example.com/assets/application-59.min.js
https://example.com/assets/bundle-d6d031.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js
アプリの URL にバージョン情報が自動的に付加されていれば、ブラウザエージェントはコードのエラーを照合するために必要なものをすべて持っていることになります。 ソースマップの生成 に進むことができます。
この が に該当せず、JS の URL に が のバージョン情報が付加されていない場合は、 のリリース名と ID を API で指定してエージェントを支援する必要があります。
レポのURLやビルドコミットのハッシュは必要ですか？ この機能が利用可能になったときに、New Relic を CodeStream の組織に接続することに興味がある場合は、リポジトリの URL またはビルドコミットハッシュが必要です。それ以外の場合はオプションです。
ご興味のある方は、 CodeStreamとNew Relic の連携により、エラーの特定と修正の共同作業が容易になったことをご紹介しています。
ソースマップのアップロードに制限はありますか？ アップロードできるソースマップの総数に制限はありません。ただし、APIはアカウントごとに料金制限があります。
1分間に最大1000枚のソースマップをアップロードできます。
1日あたり最大15,000枚のソースマップをアップロードできます。
APIリクエストごとにアップロードまたは公開できるソースマップは1つだけです。
ソースマップファイルのサイズは最大50MBです。
1 つまたは複数のソースマップができたら、それをブラウザに公開する準備ができています。ソースマップをブラウザに送信するには、以下のいずれかの方法を使用できます。
ソースマップをブラウザにアップロードする最も簡単でお勧めの方法は、新しい @newrelic/publish-sourcemap npm モジュール を使用することです。このモジュールは、ソースマップをアップロードするためのコマンドラインツールとJavascriptのAPIを提供します。詳しいドキュメントはnpm repoにあります。
ここでは、コマンドラインでnpmモジュールを使用する例をご紹介します。
npmのコマンドラインです。発行 ここでは、コマンドラインからnpmモジュールを使ってソースマップをアップロードする例を紹介します。ソースマップは、ローカルファイルまたはリモートURLから来ることができることに注意してください。
npm install -g @newrelic/publish-sourcemap
publish-sourcemap PATH_TO_SOURCE_MAP_FILE (local or remote) PATH_TO_ORIGINAL_FILE --apiKey=YOUR_NEW_RELIC_USER_KEY --applicationId=YOUR_NEW_RELIC_APP_ID --repoUrl=GITHUB_REPOSITORY_URL --buildCommit=GIT_BUILD_COMMIT_HASH npmコマンドライン。公開されたマップの一覧表示 ここでは、公開されたソースマップのリストアップの例を紹介します。
list-sourcemaps --applicationId=YOUR_APP_ID --apiKey=YOUR_NEW_RELIC_USER_KEY
Options:
--applicationId Browser application id
--apiKey New Relic user API keynpmのコマンドライン。削除 ここでは、ソースマップを削除する例をご紹介します。
delete-sourcemap --applicationId=YOUR_APP_ID --apiKey=YOUR_NEW_RELIC_USER_API_KEY --sourcemapId=YOUR_SOURCE_MAP_ID
Options:
--applicationId Browser application id
--apiKey New Relic user API key
--sourcemapId Unique id generated for a source mapここでは、npmモジュールを使って、クライアントサイドのJavaScriptからパブリッシュする例をご紹介します。
npmをNode.jsのスクリプト経由で発行する ここでは、Node.jsのスクリプトを使ってソースマップを公開する例をご紹介します。
var publishSourcemap = require('@newrelic/publish-sourcemap').publishSourcemap
publishSourcemap({
sourcemapPath: 'SOURCE_MAP_FULL_PATH ',
javascriptUrl: 'JS_URL ',
applicationId: YOUR_NEW_RELIC_APP_ID ,
apiKey: 'YOUR_NEW_RELIC_USER_API_KEY ',
repoUrl: 'GITHUB_REPOSITORY_URL ',
buildCommit: 'GIT_BUILD_COMMIT_HASH '
}, function (err) { console.log(err || 'Sourcemap upload done')})Node.jsスクリプトによるnpm。公開された地図を一覧表示する ここでは、公開されているすべてのソースマップをリストアップした例を紹介します。
var listSourcemaps = require(‘@newrelic/publish-sourcemap’).listSourcemaps
listSourcemaps({
applicationId: YOUR_NEW_RELIC_APP_ID ,
apiKey: 'YOUR_NEW_RELIC_USER_API_KEY ',
limit: [Max number of results to return || 20]: ,
offset: [Number of results to skip before returning || 0]: ,
}, function (err, res) { console.log(err || res.sourcemaps)})npmをNode.jsのスクリプト経由で削除 ここでは、Node.jsのスクリプトを使ってソースマップファイルを削除する例を紹介します。
var deleteSourcemap = require(‘@newrelic/publish-sourcemap’).deleteSourcemap
deleteSourcemap({
sourcemapId: 'SOURCE_MAP_ID ',
applicationId: YOUR_NEW_RELIC_APP_ID ,
apiKey: 'YOUR_NEW_RELIC_USER_API_KEY ',
}, function (err) { console.log(err || 'Deleted source map')})終わったら、ブラウザで JS errors page
以下では、curlを使ってソースマップを公開、一覧表示、削除する例をご紹介します。
curlを使用しています。マップのアップロード curl経由でAPIを使用し、ブラウザにマップを公開する例です。
curl -H "Api-Key: YOUR_NEW_RELIC_USER_API_KEY " \
-F "sourcemap=@SOURCE_MAP_PATH " \
-F "javascriptUrl=JS_URL " \
-F "releaseId=YOUR_RELEASE_ID " \
-F "releaseName=YOUR_UI_PAGE " \
https://sourcemaps.service.newrelic.com/v2/applications/YOUR_NEW_RELIC_APP_ID /sourcemapscurl -H "Api-Key: YOUR_NEW_RELIC_USER_API_KEY " \
-F "sourcemap=@SOURCE_MAP_PATH " \
-F "javascriptUrl=JS_URL " \
-F "releaseId=YOUR_RELEASE_ID " \
-F "releaseName=YOUR_UI_PAGE " \
-F "repoUrl=GITHUB_REPOSITORY_URL " \
-F "buildCommit=GIT_BUILD_COMMIT_HASH " \
https://sourcemaps.service.newrelic.com/v2/applications/YOUR_NEW_RELIC_APP_ID /sourcemapscurlを使用しています。既存の地図を一覧表示する 以下は、以前にNew Relicにアップロードされたソースマップのリストをcurlで取得する例です。New Relic は、ソースマップのユニークな SOURCEMAP_ID とそのコンポーネントを返します。
curl \
-H "Api-Key: YOUR_NEW_RELIC_USER_API_KEY " \
https://sourcemaps.service.newrelic.com/v2/applications/YOUR_NEW_RELIC_APP_ID /sourcemapscurlです。マップの削除 ソースマップを削除するには
GET エンドポイントを使用して、既存のソースマップをリストアップし、 SOURCEMAP_ID を見つけてください。
curlで以下のコマンドを実行します。
curl -X DELETE \
-H "Api-Key: YOUR_NEW_RELIC_USER_API_KEY " \
https://sourcemaps.service.newrelic.com/v2/applications/YOUR_NEW_RELIC_APP_ID /sourcemaps/SOURCEMAP_ID 終わったら、ブラウザで JS errors page
ビルドシステムからのソースマップの生成に問題がある場合や、ブラウザでのエラーがminifyされたままになっている場合は、 ソースマップのトラブルシューティング のドキュメントを参照してください。