logfire-frontend

フロントエンドの可観測性とセッションリプレイを設定する

このアプリケーションでは @pydantic/logfire-browser を使用し、リプレイが要求された場合は @pydantic/logfire-session-replay も使用します。ブラウザープロバイダーを 1 つ設定し、既存の OpenTelemetry プロバイダー、プロキシ、アプリケーションの初期化パターンを維持してください。

ブラウザーアプリケーションを確認する

リポジトリの手順、アプリケーションマニフェスト、ブラウザーのエントリーポイント、ルーター、既存の計装を確認してください。Next.js では、変更する前にクライアントコードとサーバー計装を区別してください。依存関係の制約を守り、キャプチャやサンプリングのオプションを使用する前に、インストール済み SDK の型を確認してください。

ユーザーまたはセットアップの引き継ぎで指定されたオリジン、組織、プロジェクトをそのまま維持してください。ブラウザーのみのセットアップでは、CLI へのログイン、ローカル SDK 認証情報、通常のプロジェクト書き込みトークンは必要ありません。利用可能な場合は既存のネイティブ MCP アクセスを使って確認し、それ以外の場合は Logfire UI を使用してください。

Frontend → Applications でフロントエンドアプリケーションを作成または選択し、生成されたリージョン URL と制限付きフロントエンドトークンを使用してください。通常のプロジェクト書き込みトークン、サーバー環境変数、.logfire 認証情報は、ブラウザーコードには適していません。サービス ID はフロントエンドアプリケーションが管理します。サポートされている公開 API／ツールで管理できない場合は UI を使用し、非公開エンドポイントを捏造しないでください。

要求に合わせてキャプチャを設定する

browser setup を読み、続けて該当する capture profiles のセクションを確認してください。

• フロントエンドの完全な可観測性： ページ、リクエスト、インタラクションのスパンと Web Vitals を自動的に収集します。リプレイは要求された場合にのみ追加してください。
• 自動計装によるエラーとリプレイ： Logfire のエラーレベルイベントまたは OpenTelemetry のエラーステータスに基づいてトレースを保持し、リプレイは独立して有効にします。これにより、条件を満たすトレース内の他のスパンも保持されます。
• 最小限のエラーとリプレイ： 自動スパンと Web Vitals を無効にし、アプリケーションエラーを明示的に報告します。ユーザーがブラウザー計装のオーバーヘッド削減を求めている場合や、収集するシグナルを厳密に制限している場合に使用してください。

既存の承認済みリプレイ率とマスキングを維持してください。トレースサンプリング、リプレイサンプリング、メトリクスのキャプチャはそれぞれ別の判断です。minLevel が自動スパンをフィルタリングする、トレースサンプラーがブラウザーセッション全体を保持する、または処理済みのすべてのアプリケーション障害が自動的にキャプチャされると約束しないでください。

セッションリプレイは Early Access です。対象組織で利用できるか確認し、既存のアプリケーションロールアウトフラグを維持してください。テキストと入力をマスキングし、コンソールキャプチャはオフのままにして、記録前に機密領域をブロックしてください。属性と URL は、表示テキストのマスキングとは別に確認してください。正規化されたルートテンプレートと不透明なユーザー ID は有用な場合にのみ追加してください。氏名とメールアドレスは任意の個人データです。

選択した動作を検証する

verification and troubleshooting を使用して実際のブラウザーアプリケーションを操作し、保持および除外されたシグナルを確認し、正確なプロジェクト内で新しいエラーをクエリし、対応する記録を再生してください。サンプリングプロファイルでは、成功したリクエストとユーザーが重視する種類の障害をテストしてください。HTTP ステータスがエラーの重大度にどのように対応するかを推測せず、実際にエクスポートされたスパンを調べてください。

アプリケーションの通常の型チェック／ビルドと、対象を絞ったテストを実行してください。ブラウザーでの実行、テレメトリの取り込み、リプレイの再生をそれぞれ分けて報告してください。ビルド、フラッシュ、アップロード応答、生成されたリンクが成功しても、3 つすべてが確認できたことにはなりません。検証済みのプロジェクト／アプリケーション、キャプチャポリシー、関連する UI のクリーンなリンクを返してください。アカウントの読み取りやブラウザーでの再生が利用できない場合は、該当部分を未検証とし、不足している証拠を明記してください。

サーバー側の Node.js または Next.js のセットアップについては、application instrumentation を使用してください。