ODCのClient-side tracesを試してみる

2024年8月にリリースされた、ODCの新機能、Client-side tracesをドキュメントを見つつ試しに触ってみる。
この機能は、ODC Portalで見られるTraces¹に、BlockやClient Actionなどクライアント側要素の情報も出力するもの。

ドキュメント

Client-side traces  - ODC Documentation

利用するには

この機能はデフォルトではオフ。ODC Portalで有効にしたいAppのページを開き、Monitoring & Troubleshootingにあるスイッチをオンにする。ドキュメント上曖昧だが、スイッチをオンにした後、Publishが必要かもしれない。

注意点

• Traceは発生順に、サーバーに到達するとは限らない（暫く待つとそれまで見えなかったTraceがODC Portalで見られるようになることがある）
• クライアントで発生したTraceはいくつか貯めてからサーバーに送信するが、このリクエスト数に上限がある（400/分、3500/日/Stage）
• 違うAppのScreenを画面遷移するとパフォーマンスが落ちるかもしれない
• カスタムドメインを使っていると、エンドユーザーがログインできない可能性がある
• 下記の確認結果からもこの機能をオンにしても、対象処理全部がTraceに出るとは限らない
• 何度か試してみると、同じTraceでも出るときと出ない時がある
• 長いときは10分位経たないとODC Portalに反映されない

動作確認

Block

ドキュメントより

Blockについて、Screenへの読み込み・イベントハンドラー・他画面遷移時の廃棄プロセスとOnDestroyハンドラーまでカバーする。

Linked to the Block language element covering the screen's load period and containing event actions. It also includes the block's disposal period and the OnDestroy event action of the block.

出力されたTrace

以下はテスト用に作ったScreenの下に表示されたTrace。
Blockが階層化している場合もそれぞれ出力され、さらにBlock内のイベントハンドラー（例えばMenu Block内のOnRender Action。OnRenderから呼ばれている別のClient Actionも出力されている）も出力されるようだ。

以下は、ツリーから特定のBlockを選んだときに表示される詳細。時間、所属App、要素名、Status、経過時間、所属画面が出ている。スクリーンショット下部のURLは画面のURL。

Client Action

ドキュメントより

配置場所（Screenの下、Logicタブ > Client Actionsの下）を問わずClient Actionを対象とする。

Linked with Client Actions, Client Screen Actions, and System Client Action language elements.

出力されたTrace

画面にButtonを配置してそのイベントハンドラーが出るかもテストしたが、ODC Portal上には出力されなかった。
クライアントで貯めてから、何らかのタイミングで連携されるという仕組みから、クライアントサイドTraceは抜けることもあると想定しておいたほうが良さそう。

以下は、JavaScriptを実行するClient ActionのTraceの例。
情報はBlockと同じ。

Client Exception Handler

ドキュメントより

Client側のOnExceptionも対象になる。

Linked to the OnException action language element.

出力されたTrace

以下の流れでExceptionを処理したときのTrace。例外の右にメモのアイコンがついているTraceは、選択すると画面右下に関連ログが表示される。

1. UI Flowの下にあるOnException内のException Handlerで例外をHandle
2. Handle後のAction FilterでExceptionをRaise
3. Global Exception HandlerでHandle
   

JavaScript

ドキュメントより

言語要素としてのJavaScriptだから、Client Actionに配置するJavaScriptのこと。

Linked to the JavaScript language element.

出力されたTrace

JavaScript要素Traceの詳細。処理に使ったJavaScriptコードなどは出力されないようだ。

Required Scripts

ドキュメントより

Scriptsフォルダにインポートしておいて、ScreenやBlock、あるいはAppのRequired Scriptsプロパティで指定するJavaScriptファイル。

Linked to the RequiredScripts language element.

出力されたTrace

画面直下にある「JunjiWatanabeTest.ClientTracingTest」がRequired Scriptsで読み込んだJavaScriptファイルのTrace。小さい関数1個だけのJavaScriptファイルなので6msで処理が終わっている。

Screen

ドキュメントより

ライフサイクルイベントの、RenderとDestroyが対象の様子。
Renderは最初に画面描画が行われたとき、UIに紐づいた値の更新で再描画が行われたときに発生する。
Destroyは文字通り、画面が不要になったときに破棄されるタイミングで発生する。

Linked to the render (either initial render or a re-render) of a screen or part of it. Screen traces contain the screen's disposal period and the OnDestroy event action of the screen.

出力されたTrace

以下のスクリーンショットを見る限り、ScreenのライフサイクルイベントはデフォルトでTraceに出るわけではなく、イベントハンドラーがある場合だけ出るのかもしれない。

ScreenのTraceは他の種類と異なり、User agentが詳細に表示される。

System Event

ドキュメントより

ApplicationReadyはアプリの初期ロード時のイベント、ApplicationResumeはモバイルアプリケーションのみにあり、バックグラウンドにいたアプリがアクティブに戻る時のイベント。

Linked the ApplicationReady and ApplicationResume system events.

出力されたTrace

Assignだけ置いたOnApplicationReadyではTraceが出力されなかったので、JavaScript要素を配置してみた。OnApplicationReadyもUser agentが出力されるようだ。

1. どの処理にどの程度の時間がかかり、どの順番で呼ばれたか……などがわかる ↩