は、Errors ページ のエラー スタックトレースを縮小解除するために使用される ソース マップ のアップロードをサポートしています。このドキュメントでは、API browserAPI使用してソースマップをアップロードする方法について説明します。
ソースマップAPIを利用するための準備
APIを介してソースマップをブラウザにアップロードするには、次のものが必要です。
エージェントがコード内のエラーをキャプチャするたびに、それが発生したJavaScriptのURLに関連付けられます。これは、HTMLのスクリプトタグのsrc
属性です。この完全なJavaScriptURLは、ソースマップをブラウザに送信するときに必要です。
エラーの JavaScript ファイルの URL は、 browserの JS errors ページにあります。 でこれらのエラーを見つける方法の詳細については、 ブラウザ監視のソースマップをUI 参照してください。
多くの組織では、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 にバージョン情報が自動的に付加されていれば、ブラウザエージェントはコードのエラーを照合するために必要なものをすべて持っていることになります。 ソースマップの生成 に進むことができます。
このdoesn'tが該当し、JS URL にバージョン情報が追加されていない場合は、 API を使用してリリース名と IDを指定してエージェントを支援する必要があります。
New Relic CodeStream を使用して IDE からコードのパフォーマンスを監視することに関心がある場合は、リポジトリ URL が必要です。IDE からのエラーも調査する場合は、ビルド コミット ハッシュを使用することをお勧めしますが、必須ではありません。
IDE に可観測性を導入することによるパフォーマンスの監視について詳しく学習します。
アップロードできるソースマップの総数に制限はありません。ただし、APIはアカウントごとに料金制限があります。
1分間に最大1000枚のソースマップをアップロードできます。
1日あたり最大15,000枚のソースマップをアップロードできます。
APIリクエストごとにアップロードまたは公開できるソースマップは1つだけです。
ソースマップファイルのサイズは最大50MBです。
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モジュールを使ってソースマップをアップロードする例を紹介します。ソースマップは、ローカルファイルまたはリモート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
ここでは、公開されたソースマップのリストアップの例を紹介します。
$list-sourcemaps --applicationId=YOUR_APP_ID --apiKey=YOUR_NEW_RELIC_USER_KEY
Options:
--applicationId Browser application id
--apiKey New Relic user API key
ここでは、ソースマップを削除する例をご紹介します。
$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からパブリッシュする例をご紹介します。
ここでは、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'); });
ここでは、公開されているすべてのソースマップをリストアップした例を紹介します。
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); });
ここでは、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 ページbrowser に移動し、エラー グループを選択して、エラー スタックトレースが縮小されていないかどうかを確認します。
curlによるAPIの利用
以下では、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を介して以前に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
ソースマップを削除するには
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
完了したら、Group errors の タブ に移動し、エラー グループを選択して、エラー スタックトレースが縮小されていないかどうかを確認します。browser
ソースマップのトラブルシューティング
ビルド システムからソース マップを生成する際に問題が発生する場合、またはブラウザーのエラーが縮小されたままの場合は、ソース マップのトラブルシューティングドキュメントを参照してください。