Article by: Lukas Stracke
Svelte チームは先日、 SvelteKit の完全なオブザーバビリティとトレーシングのサポートを追加したことを発表しました！
これは SvelteKit と Sentry のユーザーにとって朗報です。なぜなら、Sentryはすでにこの新機能と互換性があるからです。
さらに、このニュースは JavaScript エコシステム全体にとっても大きな意味を持ちます。SvelteKit は、ESM ベースのメタフレームワークとして初めて、インストゥルメンテーションとトレーシングを標準でサポートしたのです。
ここからは、なぜこれが重要な一歩なのか、そしてSvelteKitがどのようにして他のESMフレームワークのお手本となったのかを見ていきましょう。
何が起こったのか
SvelteKit バージョン2.31.0 以降では、サーバーサイドインストルメンテーションと SvelteKit が生成するスパンを有効化できるようになり、サーバーサイドのトレースを大幅に強化できるようになりました。これは、SvelteKit アプリケーションにオブザーバビリティを追加したい人にとって大変朗報です。
理由は以下のとおりです。
まず、SvelteKit では instrumentation.server.js という専用ファイルを用いたテレメトリのインストゥルメンテーションがサポートされました。このファイルはサーバーサイドのインストゥルメンテーションを初期化します。ビルドの最終成果物に組み込まれ、OpenTelemetry のような自動インストゥルメンテーションが、サーバーサイドリクエスト処理の全体を確実に捕捉できるタイミングで評価されるようになっています。
さらに Svelte チームはそこで止まりませんでした。SvelteKit はリクエストハンドラー、load 関数、フォームアクション、さらにはリモート関数に対しても専用のスパンを発行するようになりました。これにより、アプリケーションのリクエストライフサイクルのどの部分が最も時間を消費しているのか、あるいはアプリケーション内の異なるパフォーマンス特性を理解することが、はるかに容易になりました。
そして極めつけに、Sentry の SvelteKit SDK はバージョン 10.8.0 以降で、この SvelteKit の公式インストゥルメンテーションとトレーシング機能に完全対応しています！
SvelteKit のオブザーバビリティを Sentry で使う方法
まだ Sentry を使ったことがない場合は、まず SvelteKit のドキュメント をご覧ください。すでに最新の情報に更新されており、SvelteKit のオブザーバビリティに対応したセットアップ方法が掲載されています。最も簡単なのはインストールウィザードを使う方法で、もちろん新しい設定も自動で適用されます。
すでに SvelteKit アプリケーションで Sentry を利用している場合でも、移行はシンプルな2ステップで完了します。
1. svelte.config.js でサーバーサイドのインストゥルメンテーションとトレーシングを有効化する。
2. Sentry.init の呼び出しを、src/hooks.server.js から src/instrumentation.server.js に移動する。
Sentry のリクエストハンドラーとエラーハンドラーは、src/hooks.server.js に残しておく必要があります。
これで完了です！
以下は、Sentry でトレースがどのように表示されるかの簡単なプレビューです。SvelteKit のスパンはすべて、いまやフレームワークから直接生成されます。
instrumentation.server.js が正しく配置されているおかげで、データベースの自動インストゥルメンテーションもそのまま動作します。
SvelteKit はオブザーバビリティの水準を引き上げた
今回の SvelteKit の新機能は、Svelte（そして Sentry）にとって素晴らしいニュースであることは間違いありません。しかし、さらに重要なのは、Svelte チームが JavaScript エコシステムにおけるひとつのマイルストーンを達成したという点です。SvelteKit は、オブザーバビリティと自動インストゥルメンテーションを完全にサポートする初の ESM ベースのメタフレームワークとなったのです。
他のフレームワークでは、ユーザーが完全な自動インストゥルメンテーションを有効にするためには、ビルドコマンドに –import フラグを追加する必要があり（しかも常に可能とは限らない）、手間がかかります。これに対し、SvelteKit ではその処理がフレームワーク側で面倒を見てくれます。instrumentation.server.(js|ts) は、今では src ディレクトリに配置するだけのファイルとなり、完全な型安全性とビルド時サポートを備えています。
私たちは、ESM オブザーバビリティ分野においてリーダー的存在となった Svelte チームに拍手を送ります！
特にこの機能を実装し、私たちの PR レビューやフィードバック、提案を取り入れてくれた Elliot Johnson に特別な感謝を伝えたいと思います。
もしESM エコシステムにおけるオブザーバビリティの数多くの課題に関心があるようでしたら、是非こちらのトークをご覧ください（ありがたいことに SvelteKit ではもう当てはまらない課題です）。または、フレームワークやライブラリの開発者、さらにはホスティングプラットフォーム向けに推奨事項をまとめた ESM オブザーバビリティガイド をチェックしてみてください。
そして、もしあなたのライブラリ、フレームワーク、ホスティングプラットフォームでオブザーバビリティをサポートしたいとお考えでしたら、是非お気軽にご相談ください。
Original Page: SvelteKit observability just got 10x better, and we’re here for it
IchizokuはSentryと提携し、日本でSentry製品の導入支援、テクニカルサポート、ベストプラクティスの共有を行なっています。Ichizokuが提供するSentryの日本語サイトについてはこちらをご覧ください。またご導入についての相談はこちらのフォームからお気軽にお問い合わせください。
