📚

Tail Worker と Stack Trace と Source Map

2024/04/24に公開

前回こちらの記事で Tail Worker についてまとめました。
https://zenn.dev/kameoncloud/articles/a7c8073a2ada65
簡単に言うと、Tail Worker は親 Worker の実行を追跡し例外エラー等が発生した際にスローされたエラーを受け取りログ出力する機能を担います。

2024年4月4日にさらなる追加機能のリリース予告が発表されStack Trace と Source Map により例外エラーが発生した際のデバッグが容易となるとのことです。
https://blog.cloudflare.com/ja-jp/workers-production-safety
その後無事機能がリリースされたので試してみます。

さっそくやってみる

まず
https://zenn.dev/kameoncloud/articles/a7c8073a2ada65
の内容を終わらせておきます。
その後以下のようにProducer と Tail Worker の内容を修正します。

producer - worker.js
export default {
	async fetch(request, env, ctx) {
		return new Response(a);
	},
};
producer - wrangler.toml
name = "tailproducer"
main = "src/worker.js"
compatibility_date = "2024-04-15"

tail_consumers = [{service = "tailworker"}]
upload_source_maps = true
tail - worker.js
export default {
	async tail(events,env,ctx) {
      console.log(events);
	  await fetch("https://kameda.requestcatcher.com/", {
		method: "POST",
		body: JSON.stringify(events),
	  })
	}
  }
tail - wrangler.toml
(変更なし)

修正後は両方ともwrangler publishを実行しデプロイしておきます。
簡単な解説です。
まず、producer - worker.jsですが宣言されてないaをreturnで戻そうとするため当然例外エラーが発生します。その結果がtail workerに投げられます。producer - wrangler.tomlupload_source_maps = trueと定義されておるため、source map 情報が自動で作成されておりこれに基づくエラー原因を推察可能となる情報が tail worker へ投げられます。
tail - worker.jsではproducerを追跡した結果として受け取った情報を

await fetch("https://kameda.requestcatcher.com/"

へ投げます。なお、Cloudflareのdocumentではawaitがサンプルについていませんが、await
無いとほとんどの場合POSTが失敗するので付与しておきます。

投げ先ですが、https://requestcatcher.com/にアクセスします。

kamedaと入力してGet startedボタンを押すとPOSTを受け付けるようになります。なんと素晴らしいサイトでしょうか。感謝です。

この状態でproducer workers にブラウザでアクセスしてください。当然以下のように例外エラーとなります。

このエラーを受け取ったtail workerがhttps://kameda.requestcatcher.com/にエラーの内容をPOSTします。

JSONをパースしてみると以下の情報が含まれています。

      "exceptions":[
         {
            "stack":"    at Object.fetch (worker.js:4:25)",
            "name":"ReferenceError",
            "message":"a is not defined",
            "timestamp":1713940164291
         }

aが宣言されていない可能性が示唆されています。

マネージメントコンソールでの確認

今度はエラーを吐いているproducer worker をマネージメントコンソールで確認してみます。

画面右のEdit Codeをクリックします。


Sendボタンを押してGETリクエストを出してみます。
Previewタブをクリックすると以下のようにエラーの原因を推察可能な情報が出力されています。

先ほどtail workerが受け取ったものと同じ情報です。
また画面下部ConsoleタブではStack Traceの情報が出力されています。

Discussion