こんにちは！日々のバグとの格闘、本当にお疲れ様です。
プロダクトを開発していて、一番頭を抱える瞬間ってどんな時ですか？
「Sentryのエラーログには『TypeError: Cannot read properties of undefined』とだけ出ている。でも、どの画面で、ユーザーがどんな操作をした時に起きたのかサッパリわからない……。再現テストをしても、エラーが起きない……」
こんな経験、ありませんか？
スタックトレースはエンジニアにとって強力な武器ですが、それだけでは「ユーザーの文脈」までは見えてきません。
そこで今回ご紹介するのが、Sentryの隠し玉（いや、主役級の機能）である「User Feedback（ユーザーフィードバック）」です。
これを使えば、フロントエンドでクラッシュが起きた瞬間、画面上に優しく「何が起きたか教えてくれませんか？」というダイアログを表示し、ユーザーの「生の声」をエラーログに直接紐付けることができるんです。
これをマスターすれば、毎日のエラー調査のストレスが劇的に軽くなりますよ。さあ、一緒に扉を開けていきましょう！
—
1. Sentryの「User Feedback」とは何か？
そもそもSentryの役割は、単なる「エラーの通知係」ではありません。私たちのシステムで何が起きているかを俯瞰する「オブザーバビリティ（可観測性）」の要です。
通常、Sentryは例外をキャッチすると、自動的にブラウザの種類やOS、URLなどを収集します。しかし、「ユーザーがその時どう感じたか」「何をしようとしていたか」という意図まではわかりません。
User Feedback機能は、アプリがクラッシュした（あるいは予期せぬエラーで処理が止まった）タイミングで、画面上にフィードバック入力フォームをポップアップさせます。
- エンジニアのメリット: 「いつ・誰が・どんな操作をして・どう困ったか」が1つの画面で完結するため、再現性の低いバグの優先度付け（トリアージ）が秒速で終わる。
- ユーザーのメリット: 「あ、ちゃんと運営に伝わったな」という安心感が生まれ、サイレント離脱を防げる。
これを使わない手はありませんよね。それでは、実際に手を動かして実装していきましょう！
—
2. 基礎セットアップ：プロジェクトへの導入
今回は、モダンなフロントエンドの代表格である React（またはVite/Next.jsなどのSPA）をベースに解説します。
まずは、SentryのSDKとフィードバック用パッケージをインストールします。
SentryのコアライブラリとReact用パッケージをインストール
npm install –save @sentry/react
初期化とウィジェットの組み込み
Sentryの初期化（`Sentry.init`）を行うファイル（多くは `main.tsx` や `App.tsx`）で、User Feedbackを統合します。
ここで重要なのは、ただSentryを入れるだけでなく、「自動ポップアップ（Widget）」の設定を有効にすることです。
// main.tsx または App.tsx
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
import as Sentry from ‘@sentry/react’;
import App from ‘./App’;
// Sentryの初期設定
Sentry.init({
dsn: “YOUR_DSN_HERE”, // あなたのSentryプロジェクトのDSNに書き換えてください
integrations: [
// React用のルーティング監視などを必要に応じて追加
new Sentry.BrowserTracing(),
// ★ここが主役：User Feedback統合の有効化
Sentry.feedbackIntegration({
// ウィジェットの外観や文言をカスタマイズできます（日本語化も簡単！）
colorScheme: “system”, // “light” or “dark” or “system”
autoInject: true, // エラー時に自動でウィジェットをインジェクションする
triggerLabel: “バグを報告する”,
formTitle: “何かがうまくいかないようです”,
formSubTitle: “エンジニアチームに直接状況を伝えて、迅速な解決にご協力ください。”,
nameLabel: “お名前”,
namePlaceholder: “山田 太郎”,
emailLabel: “メールアドレス”,
emailPlaceholder: “yamada@example.com”,
messageLabel: “何が起きましたか？”,
messagePlaceholder: “ボタンを押した瞬間に画面が真っ白になりました…”,
submitLabel: “送信する”,
successMessage: “ご協力ありがとうございます！すぐに調査いたします。”,
}),
],
// パフォーマンスモニタリングのサンプルレート（本番では0.1〜0.2推奨）
tracesSampleRate: 1.0,
});
ReactDOM.createRoot(document.getElementById(‘root’)!).render(
);
たったこれだけの記述で、フロントエンドで未キャッチのエラーが発生した際、Sentryがそれを検知し、画面上に洗練されたフィードバックモーダルを自動表示してくれます。
—
3. 精度高い「HelloWorld」：意図的にエラーを起こしてテストする
「本当に動くのか？」を自分の目で確かめるために、ボタンを押すとわざとクラッシュするコンポーネントを作りましょう。これが私たちにとっての「Hello World」です。
// BuggyComponent.tsx
import React from ‘react’;
import as Sentry from ‘@sentry/react’;
export const BuggyComponent = () => {
// わざと存在しないプロパティにアクセスしてTypeErrorを引き起こす関数
const handleTriggerError = () => {
const obj: any = null;
obj.doSomethingNonExistent();
};
return (
Sentry User Feedback テスト画面
);
};
動作確認の手順
1. アプリを起動し、上記のボタンをクリックします。
2. 画面がクラッシュ（あるいはエラー境界でキャッチ）します。
3. 画面の隅（または中央）に、先ほど設定したSentryの「バグを報告する」ウィジェットがふわっと現れます。
4. ユーザー目線になって「ボタンを押したらクラッシュしました」と入力し、「送信する」を押してみましょう。
これで、Sentryのダッシュボードに「エラーイベント」と「ユーザーからのコメント」が完璧に結びついた状態でデータが飛んでいきます！
—
4. 【プロの極意】ノイズを削減し、本当に価値のあるフィードバックだけを集めるテクニック
さて、ここからが伝説のオブザーバビリティ・アーキテクトとしての本領発揮です。
この機能、便利だからといって全エラーでウィジェットを出していると、「ネットワークが一時的に切れただけのエラー」や「ユーザー側の入力ミスによるバリデーションエラー」でもポップアップが出てしまい、ユーザーにストレスを与え、管理画面もノイズまみれになります。
ノイズを排除し、「本当に開発者が知るべきクリティカルなバグ」だけにフィードバックを絞るための3つの実践テクニックを授けます。
テクニックA: 軽微なエラーやHTTP 4xx系ではウィジェットを出さない
`beforeSend` フックや、エラーのフィルタリングを活用して、サーバー側の不備（500系エラー）や、クリティカルなJSの例外だけに絞り込みます。
Sentry.init({
dsn: “YOUR_DSN_HERE”,
beforeSend(event, hint) {
const error = hint.originalException;
// 例：特定の既知のエラーや、ユーザー起因のキャンセルなどは無視する
if (error && error.message && error.message.includes(‘ResizeObserver loop limit exceeded’)) {
return null; // Sentryに送信しない
}
return event;
},
integrations: [
Sentry.feedbackIntegration({
// ウィジェット自体の表示条件をコントロール
// ※Sentryの標準機能に加え、カスタムトリガーと組み合わせることも可能
})
]
});
テクニックB: Error Boundaryと組み合わせて「画面全体のクラッシュ」だけに限定する
Reactであれば、画面全体が真っ白になるような致命的なクラッシュ（React Error Boundary）の時だけに、User FeedbackのAPIを手動で呼び出すアプローチが最もクリーンです。
import as Sentry from ‘@sentry/react’;
// Sentryが提供するErrorBoundaryを使うと、フォールバックUI内で簡単にフィードバックを回収できます
export const AppWithErrorBoundary = () => (
予期せぬエラーが発生しました。
ご不便をおかけして申し訳ございません。復旧に向けて対応中です。
{/ 手動でSentryのフィードバックダイアログを開くボタンを配置 /}
)}
>
);
この方法の何が素晴らしいかと言うと、「ユーザーが本当にイライラして『報告する』ボタンを押した瞬間」のイベントにだけ、熱量の高いコメントが紐づくため、ノイズがゼロになる点です。
—
まとめ
今回は、Sentryの「User Feedback」機能を使って、クラッシュレポートとユーザーの生の声をつなぎ合わせる実装手法と、ノイズを削減するプロの知見をご紹介しました。
- ツールの役割: 単なるエラーログの収集を超え、ユーザー体験の文脈をエンジニアに届ける。
- 基礎セットアップ: `feedbackIntegration` を使うだけで、数行のコードで導入完了。
- ノイズ削減: Error Boundaryと手動トリガーを組み合わせることで、本当に優先度の高いバグだけを精査できる。
これを導入したその日から、「なぜこのエラーが起きているのか分からない」という暗闇の中でのデバッグ作業から解放されます。ユーザーの声は、プロダクトを改善する最高の羅針盤です。
ぜひ、あなたのプロジェクトにも取り入れて、開発体験を劇的に快適にしてみてくださいね！