Google Developers Japan

クリック イベントの自動トレース

ブラウザの click イベントは、DOM 要素（例: ボタン）がクリックされ、クリック対象の要素が無効になっていない限り、すべてトレースされます。ユーザーが要素をクリックすると、新しい Zone が作成され、操作にかかる合計時間が計測されます。

このルートスパンに名前を付けるため、デベロッパーが要素に data-ocweb-id 属性を追加して操作の名前をカスタマイズできるようにしています。次の例では、‘Save edit user info’ という名前になります。

<button type="submit" data-ocweb-id="Save edit user info">       Save changes </button>

これにより、特定の要素に関連するトレースを区別しやすくなり、似たような操作があっても明確に区別できるようになります。この属性を追加しない場合、OC Web は DOM 要素の ID、タグ名、操作に関連するイベント名を組み合わせたものを使います。たとえば、次のボタンをクリックすると、

<button id="save_changes"> Save changes </button>

“button#save_changes click” という名前のスパンが生成されます。

ルート遷移の自動トレース

OC Web は、History API にモンキーパッチを適用することで、ページ セクション間のルート遷移をトレースします。OC Web は、‘Navigation /path/to/page’ というパターンを使ってこの操作に名前を付けます。次のスクリーンショットは、ユーザー操作サンプルから Stackdriver にエクスポートしたトレースです。ここには 1 つの Navigation トレースが含まれており、ルート遷移が完了する前にいくつかのネットワーク呼び出しが行われています。

カスタム スパンの作成

OC Web では、ユーザーの操作に関連するタスクやコードのカスタムスパンを使ってウェブ アプリケーションのインストルメンテーションを行うことができます。次に示すのは、その方法を例示したコード スニペットです。

import { tracing } from '@opencensus/web-instrumentation-zone';

function handleClick() {

  // 現在の操作のルートスパンの子スパンを開始

  // これはボタンが実行するコードで実行する必要がある

  const childSpan = tracing.tracer.startChildSpan({

    name: 'name of your child span'

  });

  // 何らかのオペレーションを実行...

  // オペレーション終了時に子スパンを終了

  childSpan.end();

}

詳細については、OC Web のドキュメントをご覧ください。

HTTP リクエストの自動スパンとブラウザのパフォーマンス データ

OC Web は、ユーザーの操作によって生成される HTTP リクエストを自動的にインターセプトしてスパンを生成します。さらに、OC Web はインターセプトしたそれぞれの HTTP リクエストに W3C Trace Context 形式の Trace Context ヘッダーを追加します。この処理は、同じオリジンのリクエストまたは提供された正規表現に一致するリクエストに対してのみ行われます。

サーバーで OpenCensus によるインストルメンテーションも行っている場合、バックエンド サービス全体でこれらのリクエストのトレースが継続されます。そのため、問題がフロントエンドにあるのかサーバーサイドにあるのかを知ることができます。

OC Web には、domainLookupStart や responseEnd などのアノテーションを作成し、CORS プリフライト リクエストのスパンを生成するための Performance API データも含まれています。

次のスクリーンショットは、ユーザー操作のサンプルとして Stackdriver にエクスポートしたトレースを示しています。アノテーションが付加されたスパンが自動生成されているネットワーク呼び出しがいくつか（例: ‘Sent./sleep’）あることがわかります。また、サーバーサイドのスパン（例: ‘/sleep’、‘ocweb.handlerequest’）や、CORS プリフライトに関連するスパンも存在します。

ユーザー操作と最初のページ読み込みのトレースとの関連付け

OC Web は、属性およびスパンリンクとして、ユーザーの操作に最初のページ読み込み時のトレース ID を付加します。これにより、1 つの属性に対するクエリでトレースを検索することで、最初の読み込みのトレースとその操作に関連するトレースを探せるようになります。また、あるページを読み込んだ後のアプリケーション内でのユーザーのナビゲーション全体を理解することも可能です。

次のスクリーンショットは、initial_load_trace_id 属性を使った検索を示しています。これには、最初にページを読み込んだ後のすべてのユーザー操作のトレースが含まれています。

実現する

OC Web を使えば、数行のインストルメンテーションを記述するだけで、ウェブ アプリケーションの分散トレースをエクスポートできます。ぜひ、最初の読み込みとユーザー操作のサンプルを試してみてください。ソースコードに手を入れてみたり、Gitter からフィードバックを送ったり、プル リクエストで貢献したりすることも大歓迎です！

投稿者: Cristian González – OpenCensus チーム – 2019 年夏季 Google ソフトウェア エンジニアリング インターン、コロンビア国立大学コンピュータおよびシステム エンジニアリング学部生

OC Web の最初の作成者であり、今回の開発のサポートをしてくれた Dave Raffensperger 氏に格別の感謝を捧げます。

Reviewed by Yoshifumi Yamaguchi - Developer Relations Team