Skip to content

feat: Grafana FaroによるReal User Monitoringを導入#116

Merged
dero1to merged 4 commits intomainfrom
rum
Jan 31, 2026
Merged

feat: Grafana FaroによるReal User Monitoringを導入#116
dero1to merged 4 commits intomainfrom
rum

Conversation

@TakumaNakagame
Copy link
Contributor

Summary

  • Grafana Faro Web SDKを導入し、Real User Monitoring (RUM)を有効化
  • ページビュー、JavaScriptエラー、Web Vitals、HTTPリクエストトレースをGrafana Cloudに送信

Test plan

  • npm run build が成功すること
  • 開発環境でページ読み込み時にFaroが初期化されることをブラウザコンソールで確認
  • Grafana Cloud側でデータが受信されることを確認

🤖 Generated with Claude Code

- @grafana/faro-web-sdk と @grafana/faro-web-tracing をインストール
- src/lib/faro.ts に初期化ロジックを追加
- _app.tsx で useEffect を使用してクライアントサイドでのみ初期化

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Jan 31, 2026

Deploying emtec-intermission with  Cloudflare Pages  Cloudflare Pages

Latest commit: 1d99614
Status: ✅  Deploy successful!
Preview URL: https://6fa7c4ba.emtec-intermission.pages.dev
Branch Preview URL: https://rum.emtec-intermission.pages.dev

View logs

TakumaNakagame and others added 3 commits January 31, 2026 13:50
- faro.tsにpushPageMeasurement/pushPageEvent関数を追加
- Page1-4でレンダリング時間の計測とページ表示/終了イベントを送信

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- @grafana/faro-webpack-pluginをインストール
- next.config.jsにFaroSourceMapUploaderPluginを追加
- productionBrowserSourceMaps: trueでSource Map生成を有効化
- FARO_API_KEY環境変数でAPIキーを設定

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@dero1to dero1to merged commit 819c71e into main Jan 31, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants