Microsoft Azure Monitor の Application Insights JavaScript SDK 構成

Azure Application Insights JavaScript SDK には、Web アプリケーションの追跡、監視、デバッグのための構成が用意されています。

SDK の構成

これらの構成フィールドは省略可能である、特に明記されていない限り、既定値は false です。

SDK 構成を追加する手順については、「SDK 構成を追加する」を参照してください。

分散トレース

最新のクラウドおよび マイクロサービス アーキテクチャでは、可用性とスループットを向上させながらコストを削減する、シンプルで個別にデプロイ可能なサービスが実現されています。 ただし、システム全体の推論とデバッグが難しくなっています。 分散トレースでは、クラウドおよびマイクロサービス アーキテクチャの呼び出し履歴と同様に動作するパフォーマンス プロファイラーを提供することで、この問題を解決します。

Azure Monitor には、分散トレース データを使用するための 2 つのエクスペリエンスが用意されています。1 つのトランザクション/要求の トランザクション診断 ビューと、システムの対話方法を示す アプリケーション マップ ビューです。

Application Insights では、分散テレメトリの相関関係を使用して、各コンポーネントを個別に監視し、障害やパフォーマンスの低下を担当するコンポーネントを検出できます。 この記事では、Application Insights で使用されるさまざまな言語とプラットフォームでのデータ モデル、コンテキスト伝達手法、プロトコル、相関戦術の実装について説明します。

Application Insights の自動インストルメンテーションまたは SDK を使用して、分散トレースを有効にする。

.NET、.NET Core、Java、Node.js、JavaScript 用の Application Insights エージェントと SDK はすべて、分散トレースをネイティブにサポートします。

適切な Application Insights SDK がインストールされ、構成されると、一般的なフレームワーク、ライブラリ、テクノロジのトレース情報が SDK 依存関係オートコレクタによって自動的に収集されます。 サポートされているテクノロジの完全な一覧は、 Dependency autocollection ドキュメントで入手できます。

TelemetryClient で TrackDependency を呼び出して、任意のテクノロジを手動で追跡することもできます。

テレメトリの相関関係のデータ モデル

Application Insights では、分散テレメトリの相関関係のための データ モデル を定義します。 テレメトリを論理操作に関連付けるために、すべてのテレメトリ項目には operation_Id というコンテキスト フィールドがあります。 分散トレース内のすべてのテレメトリ項目は、この識別子を共有します。 そのため、1 つのレイヤーからテレメトリを失った場合でも、他のコンポーネントから報告されたテレメトリを関連付けることができます。

分散論理操作は、通常、コンポーネントの 1 つによって処理される要求である一連の小規模な操作で構成されます。 要求テレメトリは、 これらの操作を定義します。 すべての要求テレメトリ項目には、一意かつグローバルに識別する独自の id があります。 要求に関連付けられているすべてのテレメトリ項目 (トレースや例外など) は、要求operation_parentIdの値にidを設定する必要があります。

依存関係テレメトリ は、別のコンポーネントへの HTTP 呼び出しなど、すべての送信操作を表します。 また、グローバルに一意の独自の id も定義します。 この依存関係呼び出しによって開始された要求テレメトリは、この id を operation_parentIdとして使用します。

operation_Idでoperation_parentId、request.id、およびdependency.idを使用して、分散論理操作のビューを構築できます。 これらのフィールドは、テレメトリ呼び出しの因果関係の順序も定義します。

マイクロサービス環境では、コンポーネントからのトレースはさまざまなストレージ項目に移動できます。 Application Insights では、すべてのコンポーネントに独自の接続文字列を含めることができます。 Application Insights は、論理操作のテレメトリを取得するために、すべてのストレージ項目からデータを照会します。

ストレージ項目の数が多い場合は、次の場所に関するヒントが必要です。 Application Insights データ モデルでは、この問題を解決するために、 request.source と dependency.targetという 2 つのフィールドが定義されています。 最初のフィールドは、依存関係要求を開始したコンポーネントを識別します。 2 番目のフィールドは、依存関係呼び出しの応答を返したコンポーネントを識別します。

複数の異なるインスタンスからのクエリの詳細については、 Azure Monitor の Log Analytics ワークスペース、アプリケーション、およびリソース全体のデータのクエリを参照してください。

Example

例を見てみましょう。 株価と呼ばれるアプリケーションは、Stock と呼ばれる外部 API を使用して、株式の現在の市場価格を示します。 株価アプリケーションには、 GET /Home/Stockを使用してクライアント Web ブラウザーが開く Stock ページというページがあります。 アプリケーションは、HTTP 呼び出し GET /api/stock/valueを使用して Stock API に対してクエリを実行します。

クエリを実行することで、結果のテレメトリを分析できます。

(requests | union dependencies | union pageViews)
| where operation_Id == "STYz"
| project timestamp, itemType, name, id, operation_ParentId, operation_Id

結果では、すべてのテレメトリ項目がルート operation_Idを共有します。 ページから Ajax 呼び出しが行われると、依存関係テレメトリに新しい一意の ID (qJSXU) が割り当てられ、pageView の ID が operation_ParentIdとして使用されます。 その後、サーバー要求は Ajax ID を operation_ParentIdとして使用します。

呼び出し GET /api/stock/value が外部サービスに対して行われる場合は、 dependency.target フィールドを適切に設定できるように、そのサーバーの ID を把握する必要があります。 外部サービスが監視をサポートしていない場合、 target はサービスのホスト名に設定されます。 たとえば stock-prices-api.com です。 ただし、定義済みの HTTP ヘッダーを返すことによってサービス自体が識別される場合、 target には、Application Insights がそのサービスからのテレメトリに対してクエリを実行して分散トレースを構築できるようにするサービス ID が含まれます。

W3C TraceContext を使用した関連付けヘッダー

Application Insights は、次を定義する W3C トレース コンテキストに移行しています。

• traceparent: 呼び出しのグローバルに一意の操作 ID と一意識別子を格納します。
• tracestate: システム固有のトレース コンテキストを実行します。

Application Insights SDK の最新バージョンでは、Trace-Context プロトコルがサポートされていますが、オプトインが必要な場合があります。 (Application Insights SDK でサポートされていた以前の関連付けプロトコルとの下位互換性は維持されます)。

関連付け HTTP プロトコル (Request-Id とも呼ばれます) は非推奨になっています。 このプロトコルは、次の 2 つのヘッダーを定義します。

• Request-Id: 呼び出しのグローバルに一意の ID を伝送します。
• Correlation-Context: 分散トレース プロパティの名前と値のペアのコレクションを保持します。

Application Insights では、関連付け HTTP プロトコルの 拡張機能 も定義されます。 Request-Context名前と値のペアを使用して、直前の呼び出し元または呼び出し先が使用するプロパティのコレクションを伝達します。 Application Insights SDK では、このヘッダーを使用して、 dependency.target フィールドと request.source フィールドを設定します。

W3C トレース コンテキストおよび Application Insights データ モデルは、次のようにマップされます。

詳細については、「 Application Insights テレメトリ データ モデル」を参照してください。

W3C 分散トレースのサポートを有効にする

この機能は JavaScript に対して既定で有効になっており、ホスティング ページ ドメインが要求の送信先ドメインと同じである場合 (たとえば、ホスティング ページが example.com され、Ajax 要求が example.com に送信される場合) にヘッダーが自動的に含まれます。 分散トレース モードを変更するには、 distributedTracingMode 構成フィールドを使用します。 AI_AND_W3Cは、Application Insights によってインストルメント化されたレガシ サービスとの下位互換性のために既定で提供されます。

• npm ベースのセットアップ

  次の構成を追加します。

    distributedTracingMode: DistributedTracingModes.W3C
  

• JavaScript (Web) SDK ローダースクリプトベースのセットアップ

  次の構成を追加します。

      distributedTracingMode: 2 // DistributedTracingModes.W3C
  

XMLHttpRequest または Fetch Ajax 要求がサブドメインを含む別のドメイン ホストに送信される場合、関連付けヘッダーは既定では含まれません。 この機能を有効にするには、 enableCorsCorrelation 構成フィールド を trueに設定します。 enableCorsCorrelationを true に設定すると、すべての XMLHttpRequest 要求と Fetch Ajax 要求に関連付けヘッダーが含まれます。 その結果、呼び出されているサーバー上のアプリケーションが traceparent ヘッダーをサポートしていない場合、ブラウザー/バージョンがサーバーが受け入れるヘッダーに基づいて要求を検証できるかどうかに応じて、要求が失敗する可能性があります。 correlationHeaderExcludedDomains構成フィールドを使用して、コンポーネント間相関ヘッダー挿入からサーバーのドメインを除外できます。 たとえば、 correlationHeaderExcludedDomains: ['*.auth0.com'] を使用して、Auth0 ID プロバイダーに送信された要求から関連付けヘッダーを除外できます。

テレメトリのフィルター処理と前処理

SDK から送信される前に、テレメトリをフィルター処理、変更、または強化するコードを記述できます。 この処理には、HTTP 要求の収集や依存関係の収集など、標準のテレメトリ モジュールから送信されるデータが含まれます。

• フィルター処理 では、 ITelemetryProcessorを実装することで、SDK から送信される前にテレメトリを変更または破棄できます。 たとえば、ロボットからの要求を除外することで、テレメトリの量を減らすことができます。 サンプリングとは異なり、送信または破棄される内容を完全に制御できますが、集計されたログに基づくメトリックに影響します。 項目を破棄する方法によっては、関連する項目間を移動する機能が失われる場合もあります。

• ITelemetryInitializerを実装して、アプリから送信されたテレメトリにプロパティを追加または変更します。 たとえば、計算値やバージョン番号を追加して、ポータルでデータをフィルター処理できます。

• サンプリング により、統計情報に影響を与えずにテレメトリの量が減ります。 関連するデータ ポイントがまとめて保持されるため、問題を診断するときにそれらの間を移動できます。 ポータルでは、サンプリングを補正するために合計カウントが乗算されます。

フィルタリング

この手法を使用すると、テレメトリ ストリームに含まれるもの、またはテレメトリ ストリームから除外される内容を直接制御できます。 フィルター処理を使用して、テレメトリ項目が Application Insights に送信されないようにすることができます。 サンプリングでフィルター処理を使用することも、個別に使用することもできます。

テレメトリをフィルター処理するには、テレメトリ プロセッサを記述し、 TelemetryConfigurationに登録します。 すべてのテレメトリはプロセッサを通過します。 ストリームから削除するか、チェーン内の次のプロセッサに渡すかを選択できます。 HTTP 要求コレクターや依存関係コレクターなどの標準モジュールからのテレメトリと、自分で追跡したテレメトリが含まれます。 たとえば、ロボットからの要求や成功した依存関係呼び出しに関するテレメトリを除外できます。

JavaScript Web アプリケーション

ITelemetryInitializer を使用して、JavaScript Web アプリケーションからのテレメトリをフィルター処理できます。

1. テレメトリ初期化子コールバック関数を作成します。 コールバック関数は、 ITelemetryItem をパラメーターとして受け取ります。これは、処理中のイベントです。 このコールバックから false が返されると、テレメトリ項目が除外されます。

   var filteringFunction = (envelope) => {
     if (envelope.data.someField === 'tobefilteredout') {
       return false;
     }
     return true;
   };
   

2. 次のテレメトリ初期化子のコールバックを追加します。

   appInsights.addTelemetryInitializer(filteringFunction);
   

ITelemetryProcessor と ITelemetryInitializer

テレメトリ プロセッサとテレメトリ初期化子の違いは何ですか?

• 実行できる操作には、いくつかの重複があります。 どちらもテレメトリのプロパティを追加または変更するために使用できますが、その目的には初期化子を使用することをお勧めします。
• テレメトリ初期化子は、テレメトリ プロセッサの前に常に実行されます。
• テレメトリ初期化子は、複数回呼び出される場合があります。 慣例により、既に設定されているプロパティは設定されません。
• テレメトリ プロセッサを使用すると、テレメトリ項目を完全に置き換えたり破棄したりすることができます。
• 登録されているすべてのテレメトリ初期化子は、すべてのテレメトリ項目に対して呼び出されます。 テレメトリ プロセッサの場合、SDK は最初のテレメトリ プロセッサの呼び出しを保証します。 残りのプロセッサが呼び出されるかどうかは、前述のテレメトリ プロセッサによって決定されます。
• テレメトリ初期化子を使用して、より多くのプロパティでテレメトリを強化するか、既存のプロパティをオーバーライドします。 テレメトリ プロセッサを使用してテレメトリを除外します。

プロパティの追加/変更

テレメトリ初期化子を使用して、テレメトリを追加情報で強化したり、標準のテレメトリ モジュールによって設定されたテレメトリ プロパティをオーバーライドしたりします。

たとえば、Web パッケージの Application Insights は、HTTP 要求に関するテレメトリを収集します。 既定では、応答コード > =400 で要求に失敗としてフラグを設定します。 代わりに 400 を成功として扱う場合は、成功プロパティを設定するテレメトリ初期化子を指定できます。

テレメトリ初期化子を指定すると、Track*() メソッドのいずれかが呼び出されるたびに呼び出されます。 この初期化子には、標準のテレメトリ モジュールによって呼び出される Track() メソッドが含まれています。 慣例により、これらのモジュールは初期化子によって既に設定されたプロパティを設定しません。 テレメトリ初期化子は、テレメトリ プロセッサを呼び出す前に呼び出されるため、初期化子によって実行されるエンリッチメントはプロセッサに表示されます。

JavaScript テレメトリ初期化子

必要に応じて、JavaScript テレメトリ初期化子を挿入します。 Application Insights JavaScript SDK のテレメトリ初期化子の詳細については、「 テレメトリ初期化子」を参照してください。

<script type="text/javascript">
!(function (cfg){function e(){cfg.onInit&&cfg.onInit(n)}var x,w,D,t,E,n,C=window,O=document,b=C.___location,q="script",I="ingestionendpoint",L="disableExceptionTracking",j="ai.device.";"instrumentationKey"[x="toLowerCase"](),w="crossOrigin",D="POST",t="appInsightsSDK",E=cfg.name||"appInsights",(cfg.name||C[t])&&(C[t]=E),n=C[E]||function(g){var f=!1,m=!1,h={initialize:!0,queue:[],sv:"8",version:2,config:g};function v(e,t){var n={},i="Browser";function a(e){e=""+e;return 1===e.length?"0"+e:e}return n[j+"id"]=i[x](),n[j+"type"]=i,n["ai.operation.name"]=b&&b.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(h.sv||h.version),{time:(i=new Date).getUTCFullYear()+"-"+a(1+i.getUTCMonth())+"-"+a(i.getUTCDate())+"T"+a(i.getUTCHours())+":"+a(i.getUTCMinutes())+":"+a(i.getUTCSeconds())+"."+(i.getUTCMilliseconds()/1e3).toFixed(3).slice(2,5)+"Z",iKey:e,name:"Microsoft.ApplicationInsights."+e.replace(/-/g,"")+"."+t,sampleRate:100,tags:n,data:{baseData:{ver:2}},ver:undefined,seq:"1",aiDataContract:undefined}}var n,i,t,a,y=-1,T=0,S=["js.monitor.azure.com","js.cdn.applicationinsights.io","js.cdn.monitor.azure.com","js0.cdn.applicationinsights.io","js0.cdn.monitor.azure.com","js2.cdn.applicationinsights.io","js2.cdn.monitor.azure.com","az416426.vo.msecnd.net"],o=g.url||cfg.src,r=function(){return s(o,null)};function s(d,t){if((n=navigator)&&(~(n=(n.userAgent||"").toLowerCase()).indexOf("msie")||~n.indexOf("trident/"))&&~d.indexOf("ai.3")&&(d=d.replace(/(\/)(ai\.3\.)([^\d]*)$/,function(e,t,n){return t+"ai.2"+n})),!1!==cfg.cr)for(var e=0;e<S.length;e++)if(0<d.indexOf(S[e])){y=e;break}var n,i=function(e){var a,t,n,i,o,r,s,c,u,l;h.queue=[],m||(0<=y&&T+1<S.length?(a=(y+T+1)%S.length,p(d.replace(/^(.*\/\/)([\w\.]*)(\/.*)$/,function(e,t,n,i){return t+S[a]+i})),T+=1):(f=m=!0,s=d,!0!==cfg.dle&&(c=(t=function(){var e,t={},n=g.connectionString;if(n)for(var i=n.split(";"),a=0;a<i.length;a++){var o=i[a].split("=");2===o.length&&(t[o[0][x]()]=o[1])}return t[I]||(e=(n=t.endpointsuffix)?t.___location:null,t[I]="https://"+(e?e+".":"")+"dc."+(n||"services.visualstudio.com")),t}()).instrumentationkey||g.instrumentationKey||"",t=(t=(t=t[I])&&"/"===t.slice(-1)?t.slice(0,-1):t)?t+"/v2/track":g.endpointUrl,t=g.userOverrideEndpointUrl||t,(n=[]).push((i="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",o=s,u=t,(l=(r=v(c,"Exception")).data).baseType="ExceptionData",l.baseData.exceptions=[{typeName:"SDKLoadFailed",message:i.replace(/\./g,"-"),hasFullStack:!1,stack:i+"\nSnippet failed to load ["+o+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(b&&b.pathname||"_unknown_")+"\nEndpoint: "+u,parsedStack:[]}],r)),n.push((l=s,i=t,(u=(o=v(c,"Message")).data).baseType="MessageData",(r=u.baseData).message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+l+")").replace(/\"/g,"")+'"',r.properties={endpoint:i},o)),s=n,c=t,JSON&&((u=C.fetch)&&!cfg.useXhr?u(c,{method:D,body:JSON.stringify(s),mode:"cors"}):XMLHttpRequest&&((l=new XMLHttpRequest).open(D,c),l.setRequestHeader("Content-type","application/json"),l.send(JSON.stringify(s)))))))},a=function(e,t){m||setTimeout(function(){!t&&h.core||i()},500),f=!1},p=function(e){var n=O.createElement(q),e=(n.src=e,t&&(n.integrity=t),n.setAttribute("data-ai-name",E),cfg[w]);return!e&&""!==e||"undefined"==n[w]||(n[w]=e),n.onload=a,n.onerror=i,n.onreadystatechange=function(e,t){"loaded"!==n.readyState&&"complete"!==n.readyState||a(0,t)},cfg.ld&&cfg.ld<0?O.getElementsByTagName("head")[0].appendChild(n):setTimeout(function(){O.getElementsByTagName(q)[0].parentNode.appendChild(n)},cfg.ld||0),n};p(d)}cfg.sri&&(n=o.match(/^((http[s]?:\/\/.*\/)\w+(\.\d+){1,5})\.(([\w]+\.){0,2}js)$/))&&6===n.length?(d="".concat(n[1],".integrity.json"),i="@".concat(n[4]),l=window.fetch,t=function(e){if(!e.ext||!e.ext[i]||!e.ext[i].file)throw Error("Error Loading JSON response");var t=e.ext[i].integrity||null;s(o=n[2]+e.ext[i].file,t)},l&&!cfg.useXhr?l(d,{method:"GET",mode:"cors"}).then(function(e){return e.json()["catch"](function(){return{}})}).then(t)["catch"](r):XMLHttpRequest&&((a=new XMLHttpRequest).open("GET",d),a.onreadystatechange=function(){if(a.readyState===XMLHttpRequest.DONE)if(200===a.status)try{t(JSON.parse(a.responseText))}catch(e){r()}else r()},a.send())):o&&r();try{h.cookie=O.cookie}catch(k){}function e(e){for(;e.length;)!function(t){h[t]=function(){var e=arguments;f||h.queue.push(function(){h[t].apply(h,e)})}}(e.pop())}var c,u,l="track",d="TrackPage",p="TrackEvent",l=(e([l+"Event",l+"PageView",l+"Exception",l+"Trace",l+"DependencyData",l+"Metric",l+"PageViewPerformance","start"+d,"stop"+d,"start"+p,"stop"+p,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),h.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4},(g.extensionConfig||{}).ApplicationInsightsAnalytics||{});return!0!==g[L]&&!0!==l[L]&&(e(["_"+(c="onerror")]),u=C[c],C[c]=function(e,t,n,i,a){var o=u&&u(e,t,n,i,a);return!0!==o&&h["_"+c]({message:e,url:t,lineNumber:n,columnNumber:i,error:a,evt:C.event}),o},g.autoExceptionInstrumented=!0),h}(cfg.cfg),(C[E]=n).queue&&0===n.queue.length?(n.queue.push(e),n.trackPageView({})):e();})({
src: "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js",
crossOrigin: "anonymous", // When supplied this will add the provided value as the cross origin attribute on the script tag
onInit: function (sdk) {
    sdk.addTelemetryInitializer(function (envelope) {
    envelope.data = envelope.data || {};
    envelope.data.someField = 'This item passed through my telemetry initializer';
    });
}, // Once the application insights instance has loaded and initialized this method will be called
// sri: false, // Custom optional value to specify whether fetching the snippet from integrity file and do integrity check
cfg: { // Application Insights Configuration
    connectionString: "YOUR_CONNECTION_STRING"
}});
</script>

import { ApplicationInsights } from '@microsoft/applicationinsights-web'

const appInsights = new ApplicationInsights({ config: {
  connectionString: 'YOUR_CONNECTION_STRING'
  /* ...Other Configuration Options... */
} });
appInsights.loadAppInsights();
// To insert a telemetry initializer, uncomment the following code.
/** var telemetryInitializer = (envelope) => { envelope.data = envelope.data || {}; envelope.data.someField = 'This item passed through my telemetry initializer'; 
 };
appInsights.addTelemetryInitializer(telemetryInitializer); **/ 
appInsights.trackPageView();

テレメトリ項目で使用できる非カスタム プロパティの概要については、「 Application Insights Export Data Model」を参照してください。

必要な数の初期化子を追加できます。 これらは、追加された順序で呼び出されます。

ApplicationInsights.config のトラブルシューティング

• 完全修飾型名とアセンブリ名が正しいことを確認します。
• applicationinsights.config ファイルが出力ディレクトリにあり、最近の変更が含まれていることを確認します。

クラウド ロール名とクラウド ロール インスタンスを追加する

テレメトリ初期化子を使用して、 ai.cloud.role タグと ai.cloud.roleInstance タグを設定します。 これらのタグは、Azure Monitor の アプリケーション マップ でのコンポーネントの表示方法を定義します。

appInsights.queue.push(() => {
appInsights.addTelemetryInitializer((envelope) => {
  envelope.tags["ai.cloud.role"] = "your role name";
  envelope.tags["ai.cloud.roleInstance"] = "your role instance";
});
});

Cookie の管理

バージョン 2.6.0 以降、Azure Application Insights JavaScript SDK では、初期化後に無効化および再有効化できるインスタンスベースの Cookie 管理が提供されています。

disableCookiesUsage または cookieCfg.enabled 構成を使用して初期化中に Cookie を無効にした場合は、setEnabledの 関数を使用して Cookie を再度有効にすることができます。

インスタンス ベースの Cookie 管理では、以前の CoreUtils グローバル関数である disableCookies()、setCookie()、getCookie()、deleteCookie() が置き換えられます。

バージョン 2.6.0 で導入されたツリー シェイクの機能強化を利用するために、グローバル関数を使用しないようにすることをお勧めします。

Cookie の構成

ICookieMgrConfig は、2.6.0 で追加されたインスタンスベースの Cookie 管理用の Cookie 構成です。 用意されているオプションを使用して、SDK による Cookie の使用を有効または無効にすることができます。 カスタムの Cookie ドメインとパスを設定し、Cookie のフェッチ、設定、削除のための関数をカスタマイズすることもできます。

ICookieMgrConfig のオプションの定義を、次の表に示します。

ソース マップ

ソース マップのサポートは、例外テレメトリのミニファイ処理された呼び出し履歴をアンミニファイ処理する機能を使用して、ミニファイ処理された JavaScript コードをデバッグするのに役立ちます。

Blob Storage アカウントにリンクする

Application Insights では、Azure Storage アカウントの BLOB コンテナーに対するソース マップのアップロードがサポートされています。 ソース マップを使用して、[エンド ツー エンド トランザクションの詳細] ページで見つかった呼び出し履歴をアンミニファイ処理することができます。 また、ソース マップを使用して、JavaScript SDK または Node.js SDK によって送信されたすべての例外をアンミニファイ処理することもできます。

新しいストレージ アカウントと BLOB コンテナーを作成する

ストレージ アカウントまたは BLOB コンテナーが既にある場合は、このステップを省略できます。

1. 新しいストレージ アカウントを作成します。

2. ストレージ アカウント内に BLOB コンテナーを作成します。 ソース マップに公的にアクセスできないようにするには、[Public access level](パブリック アクセス レベル) を [非公開] に設定します。

   

ソース マップを BLOB コンテナーにプッシュする

構成済みの BLOB コンテナーにソース マップを自動的にアップロードするように構成することで、継続的デプロイ パイプラインをストレージ アカウントと統合します。

Azure Blob Storage コンテナーのフォルダー構造がソース マップのコンパイルおよびデプロイ時のフォルダー構造と同じであれば、ソース マップを Azure Blob Storage コンテナーにアップロードできます。 一般的なユース ケースは、1.2.3/static/js/main.js のように、デプロイ フォルダーにそのバージョンでプレフィックスを付けることです。 sourcemaps という名前の Azure BLOB コンテナーを使用してアンミニファイ処理すると、パイプラインでは sourcemaps/1.2.3/static/js/main.js.map にあるソース マップのフェッチが試行されます。

Azure Pipelines 経由でソース マップをアップロードする (推奨)

Azure Pipelines を使用してアプリケーションの継続的なビルドとデプロイを行っている場合は、Azure ファイル コピー タスクをパイプラインに追加して、ソース マップを自動的にアップロードします。

ソース マップのストレージ アカウントで Application Insights リソースを構成する

ソース マップのストレージ アカウントを使用して Application Insights リソースを構成するには、2 つのオプションがあります。

エンドツーエンド トランザクションの詳細タブ

[エンド ツー エンド トランザクションの詳細] タブで、[アンミニファイ処理] を選択します。 構成されていない場合は、リソースを構成します。

1. Azure portal で、ミニファイ処理された例外の詳細が表示されます。
2. [Unminify]\(アンミニファイ処理する\) を選択します。
3. リソースが構成されていない場合は、構成します。

[プロパティ] タブ

Application Insights リソースにリンクされているストレージ アカウントまたは BLOB コンテナーを構成または変更するには、次の手順を実施します。

1. Application Insights リソースの [プロパティ] タブに移動します。

2. [Change source map Blob Container](ソース マップ BLOB コンテナーの変更) を選択します。

3. ソース マップ コンテナーとして別の BLOB コンテナーを選択します。

4. [ 適用] を選択します。

   

アンミニファイ処理された呼び出し履歴を表示する

アンミニファイ処理された呼び出し履歴を表示するには、Azure portal で例外テレメトリ項目を選択し、呼び出し履歴に一致するソース マップを見つけて、ソース マップを Azure portal の呼び出し履歴にドラッグ アンド ドロップします。 ソース マップの名前は、スタック フレームのソース ファイルと同じで、map 拡張子が付いている必要があります。

JavaScript アプリケーションのソース マップのサポートに関連する問題が発生した場合は、「JavaScript アプリケーション のソース マップのサポートに関するトラブルシューティング」を参照してください。

ツリー シェイク

ツリー シェイクにより、最終的な JavaScript バンドルから未使用のコードが削除されます。

ツリー シェイクを利用するには、SDK の必要なコンポーネントのみをコードにインポートします。 そうすることで、未使用のコードは最終的なバンドルに含まれなくなり、サイズが小さくなり、パフォーマンスが向上します。

ツリー シェイク機能強化と推奨事項

バージョン 2.6.0 では、ツリーシェイク アルゴリズムのサポートを向上させるために、以下の静的ヘルパー クラスの内部使用を非推奨にし、削除しました。 これにより、npm パッケージで未使用のコードを安全に削除できます。

• CoreUtils
• EventHelper
• Util
• UrlHelper
• DateTimeUtils
• ConnectionStringParser

関数はモジュールから最上位レベルのルートとしてエクスポートされるようになり、コードのリファクタリングが容易になり、ツリー シェイクが改善されました。

静的クラスは、新しいエクスポートされた関数を参照する const オブジェクトに変更され、参照をさらにリファクタリングするために今後の変更が計画されています。

ツリー シェイクで非推奨の関数とその置き換え

このセクションは、非推奨の関数を使用していて、パッケージ サイズを最適化したい場合にのみ適用されます。 サイズを削減し、Internet Explorer のすべてのバージョンをサポートするには、置換関数を使用することをお勧めします。

サービスの通知

サービス通知は SDK に組み込まれている機能であり、Application Insights へのテレメトリ フローが中断されないようにするための実用的な推奨事項を提供します。 Application Insights 内で、通知を例外メッセージとして表示できます。 Microsoft では、お客様の SDK 設定に基づいて通知がお客様に関連していることを確認し、推奨事項の緊急性に基づいて詳細度を調整します。 サービス通知はオンのままにしておくことをお勧めしますが、featureOptIn 構成を使用してオプトアウトすることができます。

現在、アクティブな通知は送信されません。

サービス通知は、通知を制御および更新するためにパブリック JSON ファイルを定期的にポーリングする JavaScript SDK で管理されます。 JavaScript SDK によるポーリングを無効にするには、featureOptIn モードを無効にします。

トラブルシューティング

専用のトラブルシューティングに関する記事をご覧ください。

次のステップ

• よく寄せられる質問 (FAQ) を確認するには、 JavaScript SDK の構成に関する FAQ を参照してください。
• 利用状況を追跡する
• Azure ファイル コピー タスク
• JavaScript SDK の Azure Monitor データ型のリファレンス と SDK コード 。