Web ページ向けの Application InsightsApplication Insights for web pages

Web ページまたはアプリのパフォーマンスと使用状況について調べます。Find out about the performance and usage of your web page or app. Application Insights をページ スクリプトに追加すると、ページの読み込みと AJAX 呼び出しのタイミング、ブラウザーの例外や AJAX エラーの数と詳細、ユーザー数とセッション数を取得できます。If you add Application Insights to your page script, you get timings of page loads and AJAX calls, counts, and details of browser exceptions and AJAX failures, as well as users and session counts. いずれの情報も、ページ、クライアントの OS とブラウザー バージョン、geo ロケーションなどのディメンションごとにセグメント化することができます。All these can be segmented by page, client OS and browser version, geo location, and other dimensions. エラーの数やページ読み込みの遅延に基づくアラートを設定することもできます。You can set alerts on failure counts or slow page loading. また、JavaScript コードにトレースの呼び出しを挿入することで、Web ページ アプリケーションのさまざまな機能がどのように使用されているかを追跡できます。And by inserting trace calls in your JavaScript code, you can track how the different features of your web page application are used.

短い JavaScript コードを追加するだけで、Application Insights をあらゆる Web ページで使用できます。Application Insights can be used with any web pages - you just add a short piece of JavaScript. Web サービスが Java または ASP.NET の場合は、サーバー側 SDK をクライアント側 JavaScript SDK と共に使用して、アプリのパフォーマンスを総合的に理解することができます。If your web service is Java or ASP.NET, you can use the server-side SDKs in conjunction with the client-side JavaScript SDK to get an end-to-end understanding of your app's performance.

Javascript SDK を追加するAdding the Javascript SDK

  1. まず Application Insights リソースが必要です。First you need an Application Insights resource. リソースとインストルメンテーション キーがまだない場合は、新しいリソースの作成手順に従います。If you don't already have a resource and instrumentation key, follow the create a new resource instructions.
  2. JavaScript テレメトリの送信先となるリソースからインストルメンテーション キーをコピーします。Copy the instrumentation key from the resource where you want your JavaScript telemetry to be sent.
  3. 次の 2 つの方法のいずれかを使用して、Application Insights JavaScript SDK を Web ページまたはアプリに追加します。Add the Application Insights JavaScript SDK to your web page or app via one of the following two options:

重要

Application Insights JavaScript SDK をアプリケーションに追加するには、次のいずれか 1 つの方法のみを使用してください。You only need to use one of the methods below for adding the Application Insights JavaScript SDK to your application. NPM ベースのセットアップを使用する場合は、スニペット ベースのセットアップを使用しないでください。If you use the NPM based setup, don't use the snippet based setup. 逆にスニペット ベースのアプローチを使用するシナリオでも同じことが言えます。NPM ベースのセットアップを使用しないでください。The same goes for the reverse scenario when using the snippet based approach, don't also use the NPM based setup.

NPM ベースのセットアップNPM based setup

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

const appInsights = new ApplicationInsights({ config: {
  instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE'
  /* ...Other Configuration Options... */
} });
appInsights.loadAppInsights();

スニペット ベースのセットアップSnippet based setup

アプリで NPM が使用されない場合は、各ページの上部にこのスニペットを貼り付けることによって、Application Insights で Web ページを直接インストルメント化できます。If your app does not use NPM, you can directly instrument your webpages with Application Insights by pasting this snippet at the top of each your pages. 可能であれば、これを <head> セクションの最初のスクリプトとして指定すると、すべての依存関係に関する潜在的な問題を監視することができます。Preferably, it should be the first script in your <head> section so that it can monitor any potential issues with all of your dependencies. Blazor サーバー アプリを使用している場合は、ファイル _Host.cshtml の先頭の <head> セクションにスニペットを追加します。If you are using Blazor Server App, add the snippet at the top of the file _Host.cshtml in the <head> section.

<script type="text/javascript">
var sdkInstance="appInsightsSDK";window[sdkInstance]="appInsights";var aiName=window[sdkInstance],aisdk=window[aiName]||function(e){function n(e){t[e]=function(){var n=arguments;t.queue.push(function(){t[e].apply(t,n)})}}var t={config:e};t.initialize=!0;var i=document,a=window;setTimeout(function(){var n=i.createElement("script");n.src=e.url||"https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js",i.getElementsByTagName("script")[0].parentNode.appendChild(n)});try{t.cookie=i.cookie}catch(e){}t.queue=[],t.version=2;for(var r=["Event","PageView","Exception","Trace","DependencyData","Metric","PageViewPerformance"];r.length;)n("track"+r.pop());n("startTrackPage"),n("stopTrackPage");var s="Track"+r[0];if(n("start"+s),n("stop"+s),n("setAuthenticatedUserContext"),n("clearAuthenticatedUserContext"),n("flush"),!(!0===e.disableExceptionTracking||e.extensionConfig&&e.extensionConfig.ApplicationInsightsAnalytics&&!0===e.extensionConfig.ApplicationInsightsAnalytics.disableExceptionTracking)){n("_"+(r="onerror"));var o=a[r];a[r]=function(e,n,i,a,s){var c=o&&o(e,n,i,a,s);return!0!==c&&t["_"+r]({message:e,url:n,lineNumber:i,columnNumber:a,error:s}),c},e.autoExceptionInstrumented=!0}return t}(
{
  instrumentationKey:"INSTRUMENTATION_KEY"
}
);window[aiName]=aisdk,aisdk.queue&&0===aisdk.queue.length&&aisdk.trackPageView({});
</script>

テレメトリを Azure portal に送信するSending telemetry to the Azure portal

既定では Application Insights JavaScript SDK は、アプリケーションの正常性や基になるユーザー エクスペリエンスを判別するのに役立つ多くのテレメトリ項目を自動収集します。By default the Application Insights JavaScript SDK autocollects a number of telemetry items that are helpful in determining the health of your application and the underlying user experience. チェックの内容は次のとおりですThese include:

  • アプリでのキャッチされない例外 (以下の情報が含まれる)Uncaught exceptions in your app, including information on
    • スタック トレースStack trace
    • 例外の詳細とエラーに付随するメッセージException details and message accompanying the error
    • エラーの行番号と列番号Line & column number of error
    • エラーが発生した URLURL where error was raised
  • アプリの XHR および Fetch (フェッチ コレクションは既定では無効) 要求によって実行されるネットワーク依存関係要求 (以下の情報が含まれる)Network Dependency Requests made by your app XHR and Fetch (fetch collection is disabled by default) requests, include information on
    • 依存関係ソースの URLUrl of dependency source
    • 依存関係の要求に使用されたコマンドとメソッドCommand & Method used to request the dependency
    • 要求の期間Duration of the request
    • 要求の結果コードと成功状態Result code and success status of the request
    • 要求を行うユーザーの ID (存在する場合)ID (if any) of user making the request
    • 要求が行われた相関関係コンテキスト (存在する場合)Correlation context (if any) where request is made
  • ユーザー情報 (場所、ネットワーク、IP など)User information (for example, Location, network, IP)
  • デバイス情報 (ブラウザー、OS、バージョン、言語、解像度、モデルなど)Device information (for example, Browser, OS, version, language, resolution, model)
  • セッション情報Session information

テレメトリ初期化子Telemetry initializers

テレメトリ初期化子は、収集されたテレメトリの内容を変更してからユーザーのブラウザーに送信するために使用されます。Telemetry initializers are used to modify the contents of collected telemetry before being sent from the user's browser. また、false を返すことで、特定のテレメトリの送信を防ぐためにも使用されます。They can also be used to prevent certain telemetry from being sent, by returning false. 複数のテレメトリ初期化子を Application Insights インスタンスに追加することができ、それらは追加した順序で実行されます。Multiple telemetry initializers can be added to your Application Insights instance, and they are executed in order of adding them.

addTelemetryInitializer に対する入力引数は、ITelemetryItem を引数として受け取り、boolean または void を返すコールバックです。The input argument to addTelemetryInitializer is a callback that takes a ITelemetryItem as an argument and returns a boolean or void. false を返す場合、テレメトリ項目は送信されません。それ以外の場合は次のテレメトリ初期化子 (ある場合) に進むか、テレメトリ コレクション エンドポイントに送信されます。If returning false, the telemetry item is not sent, else it proceeds to the next telemetry initializer, if any, or is sent to the telemetry collection endpoint.

テレメトリ初期化子の使用例を次に示します。An example of using telemetry initializers:

var telemetryInitializer = (envelope) => {
  envelope.data.someField = 'This item passed through my telemetry initializer';
};
appInsights.addTelemetryInitializer(telemetryInitializer);
appInsights.trackTrace({message: 'This message will use a telemetry initializer'});

appInsights.addTelemetryInitializer(() => false); // Nothing is sent after this is executed
appInsights.trackTrace({message: 'this message will not be sent'}); // Not sent

構成Configuration

ほとんどの構成フィールドは、既定値を false にできるように指定されています。Most configuration fields are named such that they can be defaulted to false. instrumentationKey以外のすべてのフィールドは省略可能です。All fields are optional except for instrumentationKey.

名前Name DefaultDefault 説明Description
instrumentationKeyinstrumentationKey nullnull 必須Required
Azure portal で入手したインストルメンテーション キーInstrumentation key that you obtained from the Azure portal.
accountIdaccountId nullnull 省略可能なアカウント ID (アプリによってユーザーがアカウントにグループ化される場合)。An optional account ID, if your app groups users into accounts. スペース、コンマ、セミコロン、等号、または縦棒は使用できません。No spaces, commas, semicolons, equals, or vertical bars
sessionRenewalMssessionRenewalMs 18000001800000 この時間 (ミリ秒単位) にわたってユーザーが非アクティブである場合に、セッションがログに記録されます。A session is logged if the user is inactive for this amount of time in milliseconds. 既定値は 30 分です。Default is 30 minutes
sessionExpirationMssessionExpirationMs 8640000086400000 セッションがこの時間 (ミリ秒単位) にわたって継続する場合に、セッションがログに記録されます。A session is logged if it has continued for this amount of time in milliseconds. 既定値は 24 時間です。Default is 24 hours
maxBatchSizeInBytesmaxBatchSizeInBytes 1000010000 テレメトリ バッチの最大サイズ。Max size of telemetry batch. バッチがこの制限を超えると、すぐに送信され、新しいバッチが開始されます。If a batch exceeds this limit, it is immediately sent and a new batch is started
maxBatchIntervalmaxBatchInterval 1500015000 送信前にテレメトリをバッチ処理する時間 (ミリ秒)How long to batch telemetry for before sending (milliseconds)
disableExceptionTrackingdisableExceptionTracking falsefalse true の場合、例外は自動収集されません。If true, exceptions are no autocollected. 既定値は false です。Default is false.
disableTelemetrydisableTelemetry falsefalse true の場合、テレメトリは収集または送信されません。If true, telemetry is not collected or sent. 既定値は false です。Default is false.
enableDebugenableDebug falsefalse true の場合、SDK ログ設定に関わらず、内部デバッグ データはログに記録される代わりに例外としてスローされます。If true, internal debugging data is thrown as an exception instead of being logged, regardless of SDK logging settings. 既定値は false です。Default is false.
注: この設定を有効にすると、内部エラーが発生するたびにテレメトリが削除されます。Note: Enabling this setting will result in dropped telemetry whenever an internal error occurs. これは、SDK の構成または使用に関する問題をすばやく特定するのに役立ちます。This can be useful for quickly identifying issues with your configuration or usage of the SDK. デバッグ時にテレメトリが削除されないようにするには、enableDebug の代わりに consoleLoggingLevel または telemetryLoggingLevel の使用を検討してください。If you do not want to lose telemetry while debugging, consider using consoleLoggingLevel or telemetryLoggingLevel instead of enableDebug.
loggingLevelConsoleloggingLevelConsole 00 内部 Application Insights エラーをコンソールに記録します。Logs internal Application Insights errors to console.
0: オフ0: off,
1:重大なエラーのみ1: Critical errors only,
2.すべて (エラーおよび警告)2: Everything (errors & warnings)
loggingLevelTelemetryloggingLevelTelemetry 11 内部 Application Insights エラーをテレメトリとして送信します。Sends internal Application Insights errors as telemetry.
0: オフ0: off,
1:重大なエラーのみ1: Critical errors only,
2.すべて (エラーおよび警告)2: Everything (errors & warnings)
diagnosticLogIntervaldiagnosticLogInterval 1000010000 内部ログ キューの (内部) ポーリング間隔 (ミリ秒)(internal) Polling interval (in ms) for internal logging queue
samplingPercentagesamplingPercentage 100100 送信されるイベントの割合。Percentage of events that will be sent. 既定値は 100 で、すべてのイベントが送信されます。Default is 100, meaning all events are sent. 大規模なアプリケーションでデータ上限を維持する場合は、これを設定します。Set this if you wish to preserve your data cap for large-scale applications.
autoTrackPageVisitTimeautoTrackPageVisitTime falsefalse true の場合、ページビューに関して、前にインストルメント化されたページのビュー時間が追跡されてテレメトリとして送信されます。また、現在のページビューについて新しいタイマーが開始されます。If true, on a pageview, the previous instrumented page's view time is tracked and sent as telemetry and a new timer is started for the current pageview. 既定値は false です。Default is false.
disableAjaxTrackingdisableAjaxTracking falsefalse true の場合、Ajax 呼び出しは自動収集されません。If true, Ajax calls are not autocollected. 既定値は false です。Default is false.
disableFetchTrackingdisableFetchTracking truetrue true の場合、フェッチ要求は自動収集されません。If true, Fetch requests are not autocollected. 既定値は true です。Default is true
overridePageViewDurationoverridePageViewDuration falsefalse true の場合、trackPageView の既定の動作が変わり、trackPageView の呼び出し時にページビュー期間の終了を記録します。If true, default behavior of trackPageView is changed to record end of page view duration interval when trackPageView is called. false の場合に、trackPageView にカスタム期間が指定されていないと、Navigation Timing API を使用してページ ビューのパフォーマンスが計算されます。If false and no custom duration is provided to trackPageView, the page view performance is calculated using the navigation timing API. 既定値は false です。Default is false.
maxAjaxCallsPerViewmaxAjaxCallsPerView 500500 既定値: 500 - ページ ビュー 1 回あたりの Ajax 呼び出し数を監視し制御します。Default 500 - controls how many Ajax calls will be monitored per page view. -1 に設定すると、ページで発行されたすべて (無制限) の Ajax 呼び出しを監視します。Set to -1 to monitor all (unlimited) Ajax calls on the page.
disableDataLossAnalysisdisableDataLossAnalysis truetrue false の場合、まだ送信されていない項目について、内部テレメトリ センダー バッファーがスタートアップ時にチェックされます。If false, internal telemetry sender buffers will be checked at startup for items not yet sent.
disableCorrelationHeadersdisableCorrelationHeaders falsefalse false の場合、SDK によって 2 つのヘッダー (Request-Id と Request-Context) がすべての依存関係要求に追加され、サーバー側の対応する要求と関連付けられます。If false, the SDK will add two headers ('Request-Id' and 'Request-Context') to all dependency requests to correlate them with corresponding requests on the server side. 既定値は false です。Default is false.
correlationHeaderExcludedDomainscorrelationHeaderExcludedDomains 特定のドメインの関連付けヘッダーを無効にします。Disable correlation headers for specific domains
correlationHeaderDomainscorrelationHeaderDomains 特定のドメインの関連付けヘッダーを有効にします。Enable correlation headers for specific domains
disableFlushOnBeforeUnloaddisableFlushOnBeforeUnload falsefalse 既定値は false です。Default false. true の場合、onBeforeUnload イベントによってトリガーされても、flush メソッドは呼び出されません。If true, flush method will not be called when onBeforeUnload event triggers
enableSessionStorageBufferenableSessionStorageBuffer truetrue 既定値は true です。Default true. true の場合、未送信のすべてのテレメトリを含むバッファーがセッション ストレージに格納されます。If true, the buffer with all unsent telemetry is stored in session storage. バッファーはページの読み込み時に復元されます。The buffer is restored on page load
isCookieUseDisabledisCookieUseDisabled falsefalse 既定値は false です。Default false. true の場合、SDK によって cookie に対するデータの格納や読み取りは行われません。If true, the SDK will not store or read any data from cookies.
cookieDomaincookieDomain nullnull カスタム Cookie ドメイン。Custom cookie domain. これは、サブドメイン間で Application Insights Cookie を共有する場合に便利です。This is helpful if you want to share Application Insights cookies across subdomains.
isRetryDisabledisRetryDisabled falsefalse 既定値は false です。Default false. false の場合、206 (部分的な成功)、408 (タイムアウト)、429 (要求が多すぎる)、500 (内部サーバー エラー)、503 (サービス利用不可)、および 0 (オフライン、検出された場合のみ) で再試行します。If false, retry on 206 (partial success), 408 (timeout), 429 (too many requests), 500 (internal server error), 503 (service unavailable), and 0 (offline, only if detected)
isStorageUseDisabledisStorageUseDisabled falsefalse true の場合、SDK によってローカルおよびセッション ストレージに対するデータの格納や読み取りは行われません。If true, the SDK will not store or read any data from local and session storage. 既定値は false です。Default is false.
isBeaconApiDisabledisBeaconApiDisabled truetrue false の場合、SDK が Beacon API を使用してすべてのテレメトリが送信されます。If false, the SDK will send all telemetry using the Beacon API
onunloadDisableBeacononunloadDisableBeacon falsefalse 既定値は false です。Default false. タブが閉じられると、SDK により Beacon API を使用してすべてのテレメトリが送信されます。when tab is closed, the SDK will send all remaining telemetry using the Beacon API
sdkExtensionsdkExtension nullnull sdk 拡張機能の名前を設定します。Sets the sdk extension name. 英字のみを使用できます。Only alphabetic characters are allowed. 拡張機能名はプレフィックスとして ai.internal.sdkVersion タグに付けられます (ext_javascript:2.0.0 など)。The extension name is added as a prefix to the 'ai.internal.sdkVersion' tag (for example, 'ext_javascript:2.0.0'). 既定値は Null です。Default is null.
isBrowserLinkTrackingEnabledisBrowserLinkTrackingEnabled falsefalse 既定値は false です。Default is false. true の場合、SDK によってすべてのブラウザー リンク要求が追跡されます。If true, the SDK will track all Browser Link requests.
appIdappId nullnull appId は、サーバー側の要求によってクライアント側で発生する AJAX 依存関係の相関関係のために使用されます。AppId is used for the correlation between AJAX dependencies happening on the client-side with the server-side requests. Beacon API が有効になっているとき、これを自動的に使用することはできませんが、構成で手動で設定できます。When Beacon API is enabled, it cannot be used automatically, but can be set manually in the configuration. 既定値は null です。Default is null
enableCorsCorrelationenableCorsCorrelation falsefalse truee の場合、SDK によって 2 つのヘッダー (Request-Id と Request-Context) がすべての CORS 要求に追加され、送信される AJAX 依存関係がサーバー側の対応する要求と関連付けられます。If true, the SDK will add two headers ('Request-Id' and 'Request-Context') to all CORS requests to correlate outgoing AJAX dependencies with corresponding requests on the server side. 既定値は false です。Default is false
namePrefixnamePrefix undefinedundefined localStorage および Cookie 名の接尾語として使用される省略可能な値。An optional value that will be used as name postfix for localStorage and cookie name.
enableAutoRouteTrackingenableAutoRouteTracking falsefalse シングル ページ アプリケーション (SPA) でのルート変更を自動的に追跡します。Automatically track route changes in Single Page Applications (SPA). true の場合、ルートの変更ごとに Application Insights に新しいページビューが送信されます。If true, each route change will send a new Pageview to Application Insights. ハッシュ ルート変更 (example.com/foo#bar) も新しいページ ビューとして記録されます。Hash route changes (example.com/foo#bar) are also recorded as new page views.
enableRequestHeaderTrackingenableRequestHeaderTracking falsefalse true の場合、AJAX と Fetch の要求ヘッダーが追跡されます。既定値は false です。If true, AJAX & Fetch request headers is tracked, default is false.
enableResponseHeaderTrackingenableResponseHeaderTracking falsefalse true の場合、AJAX と Fetch の要求の応答ヘッダーが追跡されます。既定値は false です。If true, AJAX & Fetch request's response headers is tracked, default is false.
distributedTracingModedistributedTracingMode DistributedTracingModes.AI 分散トレース モードを設定します。Sets the distributed tracing mode. AI_AND_W3C モードまたは W3C モードが設定されている場合、W3C トレース コンテキスト ヘッダー (traceparent/traceparent) が生成され、送信されるすべての要求に組み込まれます。If AI_AND_W3C mode or W3C mode is set, W3C trace context headers (traceparent/tracestate) will be generated and included in all outgoing requests. AI_AND_W3C は、従来の Application Insights のインストルメント化されたサービスとの下位互換性を保つために用意されています。AI_AND_W3C is provided for back-compatibility with any legacy Application Insights instrumented services.

シングル ページ アプリケーションSingle Page Applications

既定では、この SDK では、シングル ページ アプリケーションで発生する状態ベースのルート変更は処理されませんBy default, this SDK will not handle state-based route changing that occurs in single page applications. シングル ページ アプリケーションの自動ルート変更追跡を有効にするには、enableAutoRouteTracking: true をセットアップ構成に追加します。To enable automatic route change tracking for your single page application, you can add enableAutoRouteTracking: true to your setup configuration.

現在、この SDK で初期化できる個別の React プラグインが提供されています。Currently, we offer a separate React plugin which you can initialize with this SDK. これによって、ルート変更追跡が実現し、他の React 固有テレメトリの収集も行われます。It will also accomplish route change tracking for you, as well as collect other React specific telemetry.

React の拡張機能React extensions

ExtensionsExtensions
ReactReact
React NativeReact Native

ブラウザー/クライアント側データの参照Explore browser/client-side data

ブラウザー/クライアント側データを表示するには、 [メトリック] に移動して、興味がある個別のメトリックを追加します。Browser/client-side data can be viewed by going to Metrics and adding individual metrics you are interested in:

また、JavaScript SDK のデータもポータルのブラウザー エクスペリエンスを使用して表示できます。You can also view your data from the JavaScript SDK via the Browser experience in the portal.

[ブラウザー] を選択してから、 [エラー] または [パフォーマンス] を選択します。Select Browser and then choose Failures or Performance.

パフォーマンスPerformance

依存関係Dependencies

AnalyticsAnalytics

JavaScript SDK によって収集されたテレメトリに対してクエリを実行するには、 [ログに表示 (Analytics)] ボタンを選択します。To query your telemetry collected by the JavaScript SDK, select the View in Logs (Analytics) button. client_Type == "Browser"where ステートメントを追加すると、JavaScript SDK のデータのみが表示され、他の SDK によって収集されるサーバー側のテレメトリがすべて除外されます。By adding a where statement of client_Type == "Browser", you will only see data from the JavaScript SDK and any server-side telemetry collected by other SDKs will be excluded.

// average pageView duration by name
let timeGrain=5m;
let dataset=pageViews
// additional filters can be applied here
| where timestamp > ago(1d)
| where client_Type == "Browser" ;
// calculate average pageView duration for all pageViews
dataset
| summarize avg(duration) by bin(timestamp, timeGrain)
| extend pageView='Overall'
// render result in a chart
| render timechart

ソース マップのサポートSource Map Support

例外テレメトリのミニファイされたコール スタックは、Azure portal でアンミニファイすることができます。The minified callstack of your exception telemetry can be unminified in the Azure portal. [例外の詳細] パネルの既存の統合はすべて、新たにアンミニファイされるコール スタックに対して動作します。All existing integrations on the Exception Details panel will work with the newly unminified callstack. アンミニファイするためのソース マップのドラッグ アンド ドロップでは、既存および将来のすべての JS SDK (+Node.JS) がサポートされるため、SDK バージョンをアップグレードする必要はありません。Drag and drop source map unminifying supports all existing and future JS SDKs (+Node.JS), so you do not need to upgrade your SDK version. アンミニファイされたコール スタックを表示するには、次の手順に従います。To view your unminified callstack,

  1. Azure portal で例外テレメトリ項目を選択し、[エンド ツー エンド トランザクションの詳細] を表示します。Select an Exception Telemetry item in the Azure portal to view its "End-to-end transaction details"
  2. このコール スタックにどのソース マップが対応しているかを識別します。Identify which source maps correspond to this call stack. ソース マップは、スタック フレームのソース ファイルと同じ名前であることが必要です。接尾辞は .map です。The source map must match a stack frame's source file, but suffixed with .map
  3. ソース マップを Azure portal のコール スタックにドラッグ アンド ドロップします。Drag and drop the source maps onto the call stack in the Azure portal

Application Insights Web BasicApplication Insights Web Basic

軽量エクスペリエンスのためには、代わりに Application Insights の基本バージョンをインストールすることもできます。For a lightweight experience, you can instead install the basic version of Application Insights

npm i --save @microsoft/applicationinsights-web-basic

このバージョンは最小限の機能を備え、必要に応じて発展させるかどうかはユーザー次第です。This version comes with the bare minimum number of features and functionalities and relies on you to build it up as you see fit. たとえば、自動収集 (キャッチされていない例外、AJAX など) は行われません。For example, it performs no autocollection (uncaught exceptions, AJAX, etc.). trackTracetrackException など特定の種類のテレメトリを送信するための API はこのバージョンには含まれないため、独自にラッパーを用意する必要があります。The APIs to send certain telemetry types, like trackTrace, trackException, etc., are not included in this version, so you will need to provide your own wrapper. 使用できる唯一の API は track です。The only API that is available is track. サンプルについては、こちらを参照してください。A sample is located here.

Examples

実行できる例については、Application Insights Javascript SDK サンプルを参照してください。For runnable examples, see Application Insights Javascript SDK Samples

以前のバージョンの Application Insights からアップグレードするUpgrading from the old Version of Application Insights

SDK V2 バージョンでの破壊的変更:Breaking changes in the SDK V2 version:

  • API 署名の向上のため、trackPageView や trackException など一部の API 呼び出しが更新されています。To allow for better API signatures, some of the API calls such as trackPageView, trackException have been updated. IE8 以前のバージョンのブラウザーでの実行はサポートされません。Running in IE8 or lower versions of the browser is not supported.
  • データ スキーマの更新により、テレメトリ エンベロープのフィールド名と構造が変更されています。Telemetry envelope has field name and structure changes due to data schema updates.
  • context.operationcontext.telemetryTrace に移動されました。Moved context.operation to context.telemetryTrace. 一部のフィールドも変更されました (operation.id --> telemetryTrace.traceID)。Some fields were also changed (operation.id --> telemetryTrace.traceID)
    • 現在のページビュー ID (SPA アプリなど) を手動で更新する場合、appInsights.properties.context.telemetryTrace.traceID = Util.newId() を使用して実行できます。If you want to manually refresh the current pageview ID (for example, in SPA apps) this can be done with appInsights.properties.context.telemetryTrace.traceID = Util.newId()

現在の Application Insights PRODUCTION SDK (1.0.20) を使用しており、新しい SDK がランタイムで動作するかどうかを確認する場合は、現在の SDK 読み込みシナリオに応じて URL を更新します。If you're using the current application insights PRODUCTION SDK (1.0.20) and want to see if the new SDK works in runtime, update the URL depending on your current SDK loading scenario.

  • CDN を使用したダウンロードのシナリオ:現在使用しているコード スニペットが次の URL を指すように更新します。Download via CDN scenario: Update the code snippet that you currently use to point to the following URL:

    "https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js"
    
  • NPM のシナリオ:downloadAndSetup を呼び出して、完全な ApplicationInsights スクリプトを CDN からダウンロードし、インストルメンテーション キーを使用して初期化します。NPM scenario: Call downloadAndSetup to download the full ApplicationInsights script from CDN and initialize it with instrumentation key:

    appInsights.downloadAndSetup({
       instrumentationKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx",
       url: "https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js"
       });
    

内部環境でテストして、監視テレメトリが想定どおりに動作していることを確認します。Test in internal environment to verify monitoring telemetry is working as expected. すべて動作している場合は、API 署名を SDK V2 バージョンに適切に更新し、実稼働環境にデプロイします。If all works, update your API signatures appropriately to SDK V2 version and deploy in your production environments.

SDK のパフォーマンス/オーバーヘッドSDK performance/overhead

Application Insights は、ちょうど 25 KB に GZip され、初期化には最長で 15 ミリ秒しかかからないため、Web サイトの読み込み時間にはほとんど影響ありません。At just 25 KB gzipped, and taking only ~15 ms to initialize, Application Insights adds a negligible amount of loadtime to your website. スニペットを使用すると、ライブラリの最小コンポーネントがすばやく読み込まれます。By using the snippet, minimal components of the library are quickly loaded. その間に、スクリプト全体がバックグラウンドでダウンロードされます。In the meantime, the full script is downloaded in the background.

スクリプトが CDN からダウンロードされている間に、ページのすべての追跡がキューに登録されます。While the script is downloading from the CDN, all tracking of your page is queued. ダウンロードしたスクリプトの初期化が非同期で完了すると、キューに登録されたすべてのイベントが追跡されます。Once the downloaded script finishes asynchronously initializing, all events that were queued are tracked. この結果、ページのライフ サイクル全体でテレメトリが失われることはありません。As a result, you will not lose any telemetry during the entire life cycle of your page. このセットアップ プロセスでは、ユーザーには見えないシームレスな分析システムを使用してページが提供されます。This setup process provides your page with a seamless analytics system, invisible to your users.

概要:Summary:

  • 25 KB: GZip 圧縮25 KB gzipped
  • 15 ms: 全体の初期化時間15 ms overall initialization time
  • ゼロ: ページのライフ サイクルで失われる追跡Zero tracking missed during life cycle of page

ブラウザーのサポートBrowser support

Chrome Firefox IE Opera Safari
最新 ✔Latest ✔ 最新 ✔Latest ✔ 9+ ✔9+ ✔ 最新 ✔Latest ✔ 最新 ✔Latest ✔

オープンソース SDKOpen-source SDK

Application Insights JavaScript SDK はオープンソースです。ソース コードを表示したり、プロジェクトに参加したりするには、GitHub の公式リポジトリにアクセスしてください。The Application Insights JavaScript SDK is open-source to view the source code or to contribute to the project visit the official GitHub repository.

次のステップNext steps