はじめに

こんにちは！こちらの記事はレバウェル開発部アドベントカレンダー20日目の記事です。

レバウェル開発部スカウトチームのフロントエンドチームでは最近、主にフロントエンド環境の包括的な監視、分析のために Vercel Observability 系の機能を導入しました。
その際に機能について公式の情報を調べてたので、まとめてみました！

この記事では、Vercel Observability の主な機能の中からいくつか抜粋して、ざっくりと機能、料金体系についてまとめたいと思います。

Vercel Observability の主な機能

以下は一部ですが、このようにたくさんの機能があります。
なかでもこの記事では、弊チームで利用している Web Analytics, Runtime Logs, Speed Insights について簡単に紹介します。

名称	一言説明	対応プラン
Web Analytics	サイトへのアクセス状況を分析	All
Observability	インフラ、アプリに関する様々な情報の可視化	All
Runtime Logs	アプリケーションのログをリアルタイムに確認	All
Speed Insights	Web パフォーマンス指標を計測・可視化	All
Monitoring	カスタムクエリによる詳細なメトリクス分析	Pro, Enterprise
Activity Logs	Vercel アカウント上のイベント履歴	All
Audit Logs（Beta）	メンバー操作の監査ログ	Enterprise
Log Drains	外部システムへのログエクスポート	Pro, Enterprise
OpenTelemetry Collector（Beta）	Vercel上でOpenTelemetryデータを扱う	Pro, Enterprise

主要機能の詳細と活用方法

1. Web Analytics: アクセス状況を分析

Vercel Web Analytics は、Web サイトへのアクセス状況を詳細に分析する機能です。ページビュー、訪問者の地域、使用ブラウザ、リファラーなどなど、様々な情報を取得することができます。また、独自のカスタムイベントを設定することで、特定のアクションを追跡することも可能です。
詳しくはこちら： Vercel Web Analytics

導入方法

# あらかじめ、Vercel ダッシュボード上で機能を Enable にする
yarn add @vercel/analytics

# Analytics コンポーネントをアプリで読み込み
import { Analytics } from '@vercel/analytics/next';
〜〜〜
/* body タグ内などで読み込む */
<Analytics />

価格

Pro プランでは、最初の 25,000 イベントまで無料で、その後は 100,000 イベントごとに $14 の課金が発生します。（「イベント」とはページビューやカスタムイベントのことを指しています。）

機能について

説明の通り、サイトのアクセス情報が可視化されています。アクセスの Referrer や Devices などの情報を割合ごとに見ることができ、特定のパスや国、Devices などをクリックすることで要素をフィルタリングして表示することも可能です。

また個人的には、独自のイベントを仕込むことで任意の情報を送信して蓄積することができる、カスタムイベント機能が汎用性も高そうでいいなと思いました。施策の効果測定や、ユーザーアクションに関連してほしい情報を収集したりできそうです。

（元画像：https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1731432079%2Ffront%2Fdocs%2Fobservability%2Fpanels-dark-mode.png&w=1920&q=75 ）

2. Runtime Logs: デバッグとトラブルシューティングを効率化

Runtime Logs は、アプリケーションのログをリアルタイムで確認できる機能です。ログレベル、対象の環境や日付などでフィルタリングしてログを確認できます。
詳しくはこちら： Runtime Logs

アクセスの仕方

Vercel プロジェクトの Logs タブからアクセス可能です。

（元画像：https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1725542953%2Ffront%2Fdocs%2Fobservability%2Flog-overview-dark.png%3Flightbox&w=1920&q=75 ）

ログ保存期間

Hobby プランは 1 時間、Pro プランは 1 日、Enterprise プランは 3 日間

機能について

「Live mode」を有効にすれば、ログの更新をリアルタイムで追跡することも可能で、検証環境などでの細かいデバッグなどにも活用できそうだなと思いました。

また、ログを選択した際の右パネルでは、リクエストからレスポンス返却までの流れを上から下に追いつつ、各フェーズで Vercel くんがやってくれていること、各プロセスにかかっている時間などを見ることができ面白いです。

3. Speed Insights: パフォーマンスのボトルネックを特定

Speed Insights は、Core Web Vitals などのパフォーマンス指標を計測し、可視化する機能です。

詳しくはこちら： Speed Insights

導入方法

こちらも Web Analytics と同じくパッケージインポートからのコンポーネント読み込みによって有効化できます。

# あらかじめ、Vercel ダッシュボード上で機能を Enable にする
yarn add @vercel/speed-insights

# SpeedInsights コンポーネントをアプリで読み込み
import { Analytics } from '@vercel/analytics/next';
〜〜〜
/* body タグ内などで読み込む */
<SpeedInsights />

価格

基本料金 \$10/月に加え、最初の 10,000 データポイントはプランに含まれています。その後 10,000データポイントごとに \$0.65 の課金が発生します。「データポイント」とは、FCP、LCP などの Core Web Vitals 指標の計測単位で、基本的に 1 ページの読み込みで複数のデータポイントが生成されると思いますので、注意が必要です。

機能について

FCP, FID, などのパフォーマンス指標を特定期間の推移といった形で可視化してくれます。
Desktop / Mobile での切り替えや、ページパスごとに絞り込んでの分析も可能で、問題があるページに絞り込んで調査することも可能な点がいいなと思いました。

前述の Runtime Logs のサイドパネルの情報などと組み合わせてレンダリングプロセスのどのフェーズで時間がかかっているか、など詳細に見ることができるといいかもです。

（元画像：https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1689795055%2Fdocs-assets%2Fstatic%2Fdocs%2Fconcepts%2Fspeed-insights%2Fv2%2Fres-chart-dark.png&w=1920&q=75 ）

さいごに

Vercel Observability は、Web サイトの監視と分析に必要なツールを包括的に提供してくれています。無理に全て利用する必要はなく、自分たちに必要な機能を選んで組み合わせることで、パフォーマンスの最適化、問題の早期発見、ユーザー体験の向上、などなど多岐にわたって活用できそうです！それぞれのプランの特徴と価格を理解した上で、プロジェクトのニーズに合わせて最適な構成を選択できるといいなと思いました！