私たちのブラウザ監視 ソース マップ のアップロードをサポートしています。ソース マップは、 Errors [エラー] ページ でエラー スタック トレースの縮小を解除するために使用されます。このドキュメントでは、ブラウザ API を使用してソース マップをアップロードする API の使用方法について説明します。
ソースマップAPIを利用するための準備 APIを介してソースマップをブラウザにアップロードするには、次のものが必要です。
JavaScriptのURLとは何ですか? エージェントがコード内のエラーをキャプチャするたびに、それが発生したJavaScriptのURLに関連付けられます。これは、HTMLのスクリプトタグのsrc
属性です。この完全なJavaScriptURLは、ソースマップをブラウザに送信するときに必要です。
ブラウザのエラーの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 を使用して IDE からコードのパフォーマンスを監視することに関心がある場合は、リポジトリ URL が必要です。IDE からのエラーも調査する場合は、ビルド コミット ハッシュを使用することをお勧めしますが、必須ではありません。
IDE に可観測性を導入することによるパフォーマンスの監視 について詳しく学習します。
ソースマップのアップロードに制限はありますか? アップロードできるソースマップの総数に制限はありません。ただし、APIはアカウントごとに料金制限があります。
1分間に最大1000枚のソースマップをアップロードできます。
1日あたり最大15,000枚のソースマップをアップロードできます。
APIリクエストごとにアップロードまたは公開できるソースマップは1つだけです。
ソースマップファイルのサイズは最大50MBです。
どのアプリケーションIDを使用する必要がありますか? YOUR_NEW_RELIC_APP_ID
とYOUR_APP_ID
はどちらも{ applicationId
の有効な値です。
ソースマップをNew Relicにプッシュ 1 つまたは複数のソースマップができたら、それをブラウザに公開する準備ができています。ソースマップをブラウザに送信するには、以下のいずれかの方法を使用できます。
コマンドラインやクライアントサイドのスクリプトでnpmモジュールを使用する ソース マップをブラウザにアップロードする最も簡単で推奨される方法は、新しい @newrelic/publish-sourcemap
npm モジュール を使用することです。 これは、このタスクを実行するためのコマンド ライン ツールと Javascript API を提供します。その他のドキュメントは npm リポジトリで入手できます。
ここでは、コマンドラインでnpmモジュールを使用する例をご紹介します。
重要 次の例は、米国のアカウント用です。 EUアカウントの場合、エンドポイントはhttps://sourcemaps.service.eu.newrelic.com
です。詳細については、EU地域のデータセンターの概要を 参照してください。
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 key
npmのコマンドライン。削除 ここでは、ソースマップを削除する例をご紹介します。
$ 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 ;
sourcemapPath : 'SOURCE_MAP_FULL_PATH' ,
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 ; ;
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 ;
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によるAPIの利用 以下では、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/sourcemaps
$ 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" \
> -F "repoUrl=GITHUB_REPOSITORY_URL" \
> -F "buildCommit=GIT_BUILD_COMMIT_HASH" \
$ https://sourcemaps.service.newrelic.com/v2/applications/YOUR_NEW_RELIC_APP_ID/sourcemaps
curlを使用しています。既存の地図を一覧表示する 以下は、curlを介して以前にNewRelicにアップロードされたソースマップのリストを取得する方法の例です。 New Relicは、ソースマップの一意のSOURCEMAP_ID
とそのコンポーネントを返します。
> -H "Api-Key: YOUR_NEW_RELIC_USER_API_KEY" \
> https://sourcemaps.service.newrelic.com/v2/applications/YOUR_NEW_RELIC_APP_ID/sourcemaps
curlです。マップの削除 ソースマップを削除するには
GETエンドポイントを使用して、既存のソースマップを一覧表示し、 SOURCEMAP_ID
を見つけます。
curlで以下のコマンドを実行します。
> -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されたままになっている場合は、 ソースマップのトラブルシューティング のドキュメントを参照してください。