GitHub issue の作成
報告者の説明、カテゴリ、ページ URL、ブラウザ詳細、ビューポートサイズ、オペレーティングシステム、任意のスクリーンショットや注釈を添えて、ユーザーのフィードバックを GitHub Issues に変換します。
BugDrop
BugDropは、ユーザー報告からGitHub Issuesを作成できるオープンソースのサイトフィードバックウィジェットです。スクリーンショット、注釈、ブラウザ情報、プライバシー保護つきのフィードバックを1つのscriptタグで収集します。
概要
BugDrop は、ユーザー報告を GitHub Issues に送信するオープンソースのサイトフィードバックウィジェットです。開発作業ですでに使っている同じリポジトリに、フィードバック、バグ報告、視覚的な状況を集約したいチーム向けに設計されています。
この製品は、フローティングのフィードバックボタン、スクリーンショット取得、注釈、ブラウザ情報を組み合わせ、GitHub App と 1 つの script タグを使うセットアップフローを備えています。インストールドキュメントでは、npm パッケージ、ビルド設定、バックエンド設定は不要で、データ属性とプライバシーマスキングオプションでウィジェットをカスタマイズできると説明されています。
主な機能
スクリーンショット取得と注釈
ユーザーが送信前にスクリーンショットを取得して問題箇所をマーキングできるため、開発者はテキストのみではない視覚的な状況を受け取れます。
スクリーンショットのプライバシー制御
送信前に機密領域を秘匿化し、`data-bugdrop-mask` で指定した要素をマスクします。パスワードとクレジットカード欄は自動的に保護されます。
軽量な導入
GitHub App と 1 つの script タグで導入でき、npm パッケージ、ビルド手順、バックエンド設定は不要です。
ウィジェット設定
theme、position、color、welcome text などの script 属性でウィジェットの見た目と動作をカスタマイズできます。
幅広いサイト対応
本番サイト、ドキュメントサイト、社内ツール、ステージング環境、Next.js、Vue、Nuxt、Svelte、SvelteKit などのフレームワークベースのアプリに追加できます。
主なユースケース
GitHub ネイティブのバグトリアージ
ユーザーからのバグ報告を、別のダッシュボードに送らずに収集できます。レポートは GitHub に届くため、エンジニアリングはすでに作業している同じ場所で課題をトリアージし、担当者を割り当て、クローズできます。
視覚的なバグ報告
報告者はスクリーンショットと注釈を使って、ページの壊れている状態をそのまま記録できます。これは、レイアウトの重なり、切り取られたコンテンツ、レンダリングの問題、その他の視覚的な回帰に有用です。
プライバシーに配慮したフィードバック収集
顧客データや非公開 UI を持つサイトでも、手動の秘匿化と、送信前に開発者がマークしたマスク対象要素を使うことで、視覚的なフィードバックを利用できます。
サイトをまたいだ導入
このウィジェットは、ドキュメント、マーケティングサイト、社内ツール、ステージングサイト、フレームワークアプリに追加できるため、複数の製品で同じフィードバックフローが必要な場合に適しています。
ステージングと QA レビュー
本番環境やステージング環境でのテスト時に、ウィジェットが表示され、フィードバックを収集し、対象リポジトリに issue を作成することを、より広く展開する前に確認できます。
Pros and Cons
Pros
- GitHub Issues に直接作成されるため、チームは既存のトリアージワークフローの中でフィードバックを管理できます。
- スクリーンショット、注釈、ブラウザ情報を取得して、報告内容をより実用的にします。
- 1 つの script タグと GitHub App のインストールで利用でき、npm パッケージやバックエンドは不要です。
- 機密性の高いページ内容に対するプライバシーマスキングをサポートし、スクリーンショットで非表示にする要素を開発者が指定できます。
- ランディングページの文言とサイトフッターの記載によると、自己ホストが可能です。
Cons
- スクリーンショットは専用のリポジトリブランチに保存されるため、ブランチ保護や CI ルールを使っているチームは `bugdrop-screenshots` を考慮する必要があります。
- ソースで示されている公開価格ページは現在 404 を返しており、提供された証拠からは料金の詳細を確認できません。
- ソースには、完全な API の範囲や利用可能な設定オプションがすべては記載されていません。
FAQ
BugDrop はどのようにインストールしますか？
BugDrop は、Issues を受け取りたいリポジトリに GitHub App を追加し、その後サイトに 1 つの script タグを設置してインストールします。スクリプトは同期的に読み込む必要があり、ウィジェットはプレーンな HTML やフレームワークのレイアウトにも追加できます。
BugDrop のレポートには何が含まれますか？
ソースでは、BugDrop が整形された GitHub Issues を作成し、報告者の説明、ラベル、ページ URL、ブラウザ情報、ビューポートサイズ、オペレーティングシステム、さらに任意のスクリーンショットや注釈を含めることが示されています。
BugDrop はどの GitHub 権限を必要としますか？
はい。インストールドキュメントによると、このアプリはレポート作成のために Issues への read と write のアクセスを要求し、スクリーンショット保存のために Contents への read と write のアクセスを要求します。また、コード、pull requests、actions、その他のリポジトリデータへのアクセスは要求しないと記載されています。
BugDrop はスクリーンショット内の機密情報をどのように扱いますか？
BugDrop は、送信前の手動での秘匿化と、`data-bugdrop-mask` 属性による開発者設定のマスキングをサポートしています。パスワード入力欄とクレジットカードのオートコンプリート欄は自動的にマスクされます。
スクリーンショットはどこに保存されますか？
ドキュメントによると、スクリーンショットはリポジトリ内の専用の `bugdrop-screenshots` ブランチに保存され、ブランチ保護では GitHub App がそのブランチへ push できるようにする必要がある場合があります。
Quick Facts
- カテゴリ
- 開発者向けツール
- 主なワークフロー
- Webサイトのフィードバックを GitHub Issues へ
- インストール
- GitHub App と 1 つの script タグ
- オープンソース
- MIT ライセンス
- ホスト / プラットフォーム
- Cloudflare Workers
- ソースサイト
- bugdrop.dev
BugDropの代替品
SonOf
SonOfは、リポジトリとPMツールに接続し、コードベースと周辺の製品コンテキストを監査して、承認済みの作業をシニアエンジニアのレビュー付きで公開済みチケットに変えます。
ByteAsk
ByteAskは、C/C++向けのターミナル起点AIコーディングエージェント。リポジトリを編集し、コンパイラやデバッガ、サニタイザ、テストで変更を検証してから差分を表示。無料枠あり。
CreateOS Sandbox
CreateOS Sandboxは、FirecrackerマイクロVM上でコードやエージェントのワークロードを実行できる分離型コンピュート環境です。SDK、CLI、MCPで制御可能。
Biji
Bijiは、革新的なツールと機能を通じて生産性を向上させるために設計された多目的プラットフォームです。
hob
hobは、エージェントのセッション、ターミナル、履歴、後続作業を、既存のツールやプロバイダーに合わせて整理できる独立したコーディングエージェント向けワークスペース。ローカルでの制御を重視する開発者に最適。
Ably Chat
Ably Chatは、カスタムのリアルタイムチャットアプリを構築できるチャットAPIプラットフォームです。ルーム単位のメッセージ、入力中表示、プレゼンス、リアクション、メッセージ更新に対応し、利用量ベースの料金も選べます。