Spot は Chrome 拡張機能で、バグ報告を圧倒的に速く、シンプルにします。

Spot を使用すると、ブラウザーから直接バグを簡単に記録し、チームとすぐに共有できます。最終的な成果物は、ユーザー操作、コンソールログとエラー、ネットワークペイロード、ユーザーエージェントデータを含む、そのまま共有できる完成度の高い動画形式のバグレポートです。つまり、バグの報告に必要なものがすべて揃い、チームが同じように素早く修正するために必要なものもすべて手に入ります。

• Spot は、オープンソース版からエンタープライズ版まで、すべての OpenReplay プランに付属しています。
• Spot は Chrome 拡張機能 ですが、Microsoft Edge、Brave、Arc など、Chromium ベースのあらゆるブラウザーでも動作します。

Spot Chrome 拡張機能のインストールは、簡単かつ短時間で完了します。

1. Chrome ウェブストアの Spot 拡張機能ページにアクセスし、Add to Chrome をクリックします。
2. 次回以降すぐに使えるように、Spot を Chrome のツールバーにピン留めします。

Spot を使い始める前に、既存の OpenReplay アカウントにログインするか、新しいアカウントを作成する必要があります。

• OpenReplay クラウド

  Section titled OpenReplay クラウド
  • 新規ユーザー：
    1. Spot をピン留めしたら、ツールバーの Spot アイコンをクリックします。
    2. Create Account を選択します。
    3. OpenReplay の 主なユースケース を選択します。
    • 主なユースケースとして “report bugs via Spot” を選択した場合でも、後から Setup Tracker をクリックすることで、OpenReplay のすべての機能にアクセスできます。
    
  • 既存ユーザー：
    1. ツールバーにピン留めした Spot 拡張機能をクリックします。
    2. Log in を選択し、OpenReplay の認証情報を入力します。
    • 作成した Spot は、左サイドバーの Spot メニューで確認できます。
    

• OpenReplay セルフホスト

  Section titled OpenReplay セルフホスト
  • 新規ユーザーおよび既存ユーザー：
    • OpenReplay インスタンスを、Spot に対応した最新バージョン (v1.20.0) にアップグレードします。
    • アップグレードが完了すると、左サイドバーに Spot メニューが表示されます。Spot は、お使いのインスタンスに安全に保存されます。

ログインが完了したので、Spot でバグを見つけて報告する準備が整いました。

Spot Chrome 拡張機能の主な機能の使い方は次のとおりです。

• 録画の開始： ツールバーの Spot アイコンをクリックし、Record Tab を選択すると、アクティブなタブ内のすべてをキャプチャします。

• マイクの有効化： 必要に応じて、マイクのオプションをオンにすると、録画に音声を含められます。

• 録画の一時停止： 録画パネルの一時停止アイコンを、いつでもクリックできます。

• 録画の再開始： 録画パネルの再開始アイコンをクリックすると、録画をやり直します。

• 録画の停止： 録画パネルの停止アイコンをクリックすると、録画を停止します。

• コメントの追加： 保存する前に、コメントを追加して追加のコンテキストを提供できます。

• Spot の保存： 録画を停止すると、コンソールログやネットワークデータなど、関連するすべての技術的な詳細とともに自動的に保存されます。

  

• 録画の開始： Spot アイコンをクリックし、Record Desktop を選択します。画面全体を録画するか、特定のウィンドウを録画するかを選択します。

Spot は、すべてのバグ録画に DevTools のデータを自動的に含めるため、開発者は完全なコンテキストを得て、効率的に問題をデバッグできます。各録画では、次の情報がキャプチャされます。

• コンソールログ： 録画セッション中のすべてのコンソール出力、警告、エラーメッセージ。
• ネットワークリクエスト： 次を含む、すべてのネットワークアクティビティのログ。
  • リクエストとレスポンスのヘッダーおよびボディ： 各リクエストで送受信されたデータ。
  • ステータスコード： 失敗したリクエストや問題のあるリクエストをすばやく特定できます。
• ユーザーエージェントデータ： ユーザーのブラウザーとデバイスに関する情報。開発者がバグの発生した環境を再現するのに役立ちます。
• ユーザー操作データ： クリックやナビゲーションパスなどのユーザーアクティビティの詳細。開発者が、問題がどのように発生したかを把握できます。

GraphQL エラーに関する注意

GraphQL は通常、レスポンスボディにエラーが含まれている場合（通常は errors フィールド内に格納されます）でも、すべてのレスポンスに対してステータスコード 200 OK を返します。そのため、HTTP ステータスコードだけで問題を見つけるのが難しくなることがあります。

Spot では、GraphQL レスポンスのボディに errors オブジェクトが含まれていることを検出します。そのようなエラーが見つかった場合、リクエストのステータスコードを 200 ではなく 400 としてマークします。この調整により、開発者は問題のある GraphQL リクエストを特定してデバッグしやすくなります。

• 設定へのアクセス： ツールバーの Spot アイコンをクリックし、Settings アイコンを選択します。
• Go to Spot tab after save: これをオンにすると、保存後すぐに Spot の録画に移動します。
• Include DevTools: これをオンにすると、コンソールログ、ネットワーク呼び出し、その他のデバッグ情報が録画に含まれます。

• 招待の送信： Preferences をクリックし、Team に移動して、Add Team Member をクリックします。氏名とメールアドレスを入力して、招待を送信します。
• チームのアクセス： すべてのチームメンバーは、OpenReplay の Spots ビューで Spot の録画を表示できます

Spot は特定のプロジェクトに紐づいていません。

• プライベート共有： Spot の録画は、OpenReplay 上のチーム内で閲覧できるよう、プライベートリンクで共有できます。
• 公開共有： 外部向けに公開リンクを作成できます。OpenReplay アカウントがなくてもアクセスできます。
• ツールとの連携： これらのリンクを Slack、Teams、Jira、Linear などのバグトラッキングツールやコラボレーションツールに含めると、簡単にアクセスでき、チームでの作業もスムーズになります。

Spot の録画を保存しようとしたときに HTTP 520 Unknown Error が発生した場合、通常は、動画ファイルのサイズが Cloudflare の許容サイズの上限を超えていることを示しています。これは、長時間の Spot や、複雑な操作を含む Spot を録画した場合に発生することがあります。

この問題を解決するには、次の手順を実行します。

1. OpenReplay のデプロイ設定ファイル scripts/helmcharts/vars.yaml を開きます
2. proxy-body-size 変数を見つけます（109 行目付近）
3. より大きな録画に対応できるよう、値をデフォルトの 10m から増やします
   • たとえば、36MB 程度のファイルをアップロードする必要がある場合は、少なくとも 40m に設定してください

設定の調整例：

proxy-body-size: 40m  # Increase this value based on your recording size needs

設定を更新したら、変更内容をデプロイに適用して反映させます。

このプラグインのセットアップでお困りですか？Slack に参加して、コミュニティのサポートを受けてください。