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

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

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

# ドキュメント
[Client-side traces  - ODC Documentation](https://success.outsystems.com/documentation/outsystems_developer_cloud/monitoring_and_troubleshooting_apps/client_side_traces/)

# 利用するには
この機能はデフォルトではオフ。ODC Portalで有効にしたいAppのページを開き、Monitoring & Troubleshootingにあるスイッチをオンにする。ドキュメント上曖昧だが、スイッチをオンにした後、Publishが必要かもしれない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/9cb428b3-bcb4-92ad-810b-3fea606f01ec.png)

# 注意点
- 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も出力されている）も出力されるようだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/fdd407dd-18e9-af40-5ff7-49795360fafa.png)

以下は、ツリーから特定のBlockを選んだときに表示される詳細。時間、所属App、要素名、Status、経過時間、所属画面が出ている。スクリーンショット下部のURLは画面のURL。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/59f1e4ad-1101-4ef2-9602-2e30a1c084d0.png)

## 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と同じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/af468c34-7114-0970-2d3e-ee9fa1564b17.png)

## Client Exception Handler
### ドキュメントより
Client側のOnExceptionも対象になる。
> Linked to the OnException action language element.

### 出力されたTrace
以下の流れでExceptionを処理したときのTrace。例外の右にメモのアイコンがついているTraceは、選択すると画面右下に関連ログが表示される。
1. UI Flowの下にあるOnException内のException Handlerで例外をHandle
1. Handle後のAction FilterでExceptionをRaise
1. Global Exception HandlerでHandle
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/b97a58bb-1152-af18-71ae-a9bc06535576.png)

## JavaScript
### ドキュメントより
言語要素としてのJavaScriptだから、Client Actionに配置するJavaScriptのこと。
> Linked to the JavaScript language element.

### 出力されたTrace
JavaScript要素Traceの詳細。処理に使ったJavaScriptコードなどは出力されないようだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/9058d1d0-5fab-1b38-b31c-897aca2c04bf.png)

## 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で処理が終わっている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/8a67c507-f103-0de2-1a0e-fa12dabbe502.png)

## 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に出るわけではなく、イベントハンドラーがある場合だけ出るのかもしれない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/ab0154c9-fcb3-e79e-b13a-bd90585c1f49.png)

ScreenのTraceは他の種類と異なり、User agentが詳細に表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/cbb18fd0-2006-f203-db85-0879afad72df.png)

## System Event
### ドキュメントより
ApplicationReadyはアプリの初期ロード時のイベント、ApplicationResumeはモバイルアプリケーションのみにあり、バックグラウンドにいたアプリがアクティブに戻る時のイベント。
> Linked the ApplicationReady and ApplicationResume system events.

### 出力されたTrace
Assignだけ置いたOnApplicationReadyではTraceが出力されなかったので、JavaScript要素を配置してみた。OnApplicationReadyもUser agentが出力されるようだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/4c9cc334-9678-6984-9553-7c34e20b61c2.png)