パフォーマンスの測定

MSAL.js の認証フローのパフォーマンスを測定するアプリケーションは、手動で行ったり、ライブラリ自体によって実行されるパフォーマンス測定を使用したりできます。 パフォーマンス測定を使用するには、 テレメトリ構成オプション でパフォーマンス クライアントを設定し、パフォーマンス コールバックを追加する必要があります。

テレメトリ パフォーマンス クライアントを設定する

import { PublicClientApplication, BrowserPerformanceClient } from "@azure/msal-browser";

const msalConfig = {
    auth: {
        ...
    },
    cache: {
        ...
    },
    system: {
        ...
    }
}

const msalInstance = new PublicClientApplication({
    ...msalConfig,
    telemetry: {
        client: new BrowserPerformanceClient(msalConfig)
    }
});
msalInstance.initialize();

パフォーマンス コールバックを追加する

アプリケーションは、ライブラリによって取得されたパフォーマンス測定を受信するコールバックを登録できます。 これらの測定には、最上位レベルの API のエンド ツー エンドの測定値と、重要な内部 API の測定値が含まれます。

MSFT ファースト パーティ アプリケーションの場合の注意: このテレメトリをキャプチャするために既にインストルメント化されている @azure/msal-browser の内部ビルドを公開します。 詳細については、お問い合わせください。

例

const msalInstance = new PublicClientApplication(config);

msalInstance.addPerformanceCallback((events: PerformanceEvent[]) => {
    events.forEach(event => {
        console.log(event);
    });
});

イベントの例:

const event: PerformanceEvent = {
    correlationId: "aaaa0000-bb11-2222-33cc-444444dddddd",
	durationMs: 1873,
	endPageVisibility: "hidden",
	fromCache: false,
	name: "acquireTokenSilent",
	startPageVisibility: "visible",
	startTimeMs: 1636414041888,
	success: true,
    silentCacheClientAcquireTokenDurationMs: 0,
    silentRefreshClientAcquireTokenDurationMs: 150,
    silentIframeClientAcquireTokenDurationMs: 0
    cryptoOptsGetPublicKeyThumbprintDurationMs: 200,
    cryptoOptsSignJwtDurationMs: 8,
    clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
    authority: "https://login.microsoftonline.com/common",
    libraryName: "@azure/msal-browser-1p",
    libraryVersion: "5.0.0",
    appName: "my-application",
    appVersion: "1.0.0"
}

PerformanceEventsオブジェクトの詳細については、こちらをご覧ください。 注目すべきプロパティの一覧を次に示します。

removePerformanceCallback

addPerformanceCallback API はコールバック ID を返します。コールバック ID は、アプリケーションがPublicClientApplication.removePerformanceCallbackに渡して、パフォーマンス イベントの受信からそのコールバックの登録を解除できます。 コールバックが正常に削除されたかどうかを示すブール値が返されます。

例

const msalInstance = new PublicClientApplication(config);

const callbackId: string = msalInstance.addPerformanceCallback((events: PerformanceEvent[]) => {
    events.forEach(event => {
        console.log(event);
    });
});

const removed: boolean = msalInstance.removePerformanceCallback(callbackId);

ブラウザーのパフォーマンスの測定

ブラウザーのパフォーマンス測定は、パフォーマンスのオーバーヘッドが大きいため、既定では無効になっています。 ブラウザーのパフォーマンス タイムラインに報告されるパフォーマンス測定を有効にするアプリケーションでは、次のことが必要です。

1. ブラウザー開発者ツールを開く
   • Edge、Chrome、Firefox のブラウザー: F12 キーを押します
   • Safari: Safari の環境設定 (Safari Menu>Preferences) に移動し、 Advanced Tab を選択して Show features for web developersを有効にします。 そのメニューが有効になると、開発者コンソールが表示されます。 Develop>Show Javascript Console
2. Session Storageに移動します。
   • Edge
   • クロム
   • Firefox
   • SafariでStorageタブに移動し、Session Storageを展開します
3. ターゲット ドメインの選択
4. msal.browser.performance.enabledキーをSession Storageに追加し、その値を 1 に設定し、ページを更新して、ブラウザーのパフォーマンス タイムラインを確認します。