Spot ist eine Chrome-Erweiterung, die das Melden von Bugs blitzschnell und einfach macht.

Mit Spot können Sie Bugs ganz einfach direkt in Ihrem Browser aufzeichnen und sofort mit Ihrem Team teilen. Das Ergebnis ist ein vollständiger, sofort teilbarer Bug-Report im Videoformat, der Benutzeraktionen, Konsolenprotokolle und Fehler, Netzwerk-Payloads und User-Agent-Daten enthält. Kurz gesagt: Sie haben alles, um einen Bug schneller als je zuvor zu melden – und Ihr Team hat alles, um ihn ebenso schnell zu beheben.

• Spot ist in jedem OpenReplay-Tarif enthalten – vom Open-Source- bis zum Enterprise-Angebot.
• Spot ist eine Chrome-Erweiterung, die auch in jedem Chromium-basierten Browser funktioniert, darunter Microsoft Edge, Brave und Arc.

Die Installation der Spot-Chrome-Erweiterung ist schnell und einfach:

1. Öffnen Sie die Spot-Erweiterungsseite im Chrome Web Store und klicken Sie auf „Add to Chrome“.
2. Pinnen Sie Spot an Ihre Chrome-Symbolleiste, um später schnell darauf zugreifen zu können.

Bevor Sie Spot verwenden können, müssen Sie sich entweder bei Ihrem bestehenden OpenReplay-Konto anmelden oder ein neues erstellen:

• OpenReplay Cloud

  Section titled OpenReplay Cloud
  • Neue Benutzer:
    1. Klicken Sie nach dem Anpinnen von Spot in Ihrer Symbolleiste auf das Spot-Symbol.
    2. Wählen Sie Create Account.
    3. Wählen Sie Ihren primary use-case für OpenReplay.
    • Wenn Sie als primären Anwendungsfall „report bugs via Spot“ auswählen, können Sie später über Setup Tracker auf den vollen Funktionsumfang von OpenReplay zugreifen.
    
  • Bestehende Benutzer:
    1. Klicken Sie in Ihrer Symbolleiste auf die angepinnte Spot-Erweiterung.
    2. Wählen Sie Log in und geben Sie Ihre OpenReplay-Zugangsdaten ein.
    • Ihre Spots finden Sie im Menü „Spot“ in der linken Seitenleiste.
    

• OpenReplay Self-Hosting

  Section titled OpenReplay Self-Hosting
  • Neue und bestehende Benutzer:
    • Aktualisieren Sie Ihre OpenReplay-Instanz auf die neueste Version (v1.20.0), die Spot unterstützt.
    • Nach dem Update erscheint das Spot-Menü in der linken Seitenleiste. Ihre Spots werden sicher auf Ihrer Instanz gespeichert.

Da Sie nun angemeldet sind, können Sie mit Spot loslegen und Bugs aufspüren und melden.

So nutzen Sie die wichtigsten Funktionen der Spot-Chrome-Erweiterung:

• Aufzeichnung starten: Klicken Sie in Ihrer Symbolleiste auf das Spot-Symbol und wählen Sie Record Tab, um alles im aktiven Tab aufzuzeichnen.

• Mikrofon aktivieren: Schalten Sie bei Bedarf die Mikrofonoption ein, um Audio in Ihre Aufzeichnung einzubeziehen.

• Aufzeichnung pausieren: Klicken Sie jederzeit im Aufzeichnungsfenster auf das Pausensymbol.

• Aufzeichnung neu starten: Klicken Sie im Aufzeichnungsfenster auf das Symbol „Neustart“, um die Aufzeichnung neu zu starten.

• Aufzeichnung beenden: Klicken Sie im Aufzeichnungsfenster auf das Stopp-Symbol, um die Aufzeichnung zu beenden.

• Kommentare hinzufügen: Vor dem Speichern können Sie Kommentare hinzufügen, um zusätzlichen Kontext zu liefern.

• Spot speichern: Nach dem Beenden der Aufzeichnung wird sie automatisch mit allen relevanten technischen Details wie Konsolenprotokollen und Netzwerkdaten gespeichert.

  

• Aufzeichnung starten: Klicken Sie auf das Spot-Symbol und wählen Sie Record Desktop. Sie können wählen, ob Sie Ihren gesamten Bildschirm oder ein bestimmtes Fenster aufzeichnen.

Spot nimmt in jede Bug-Aufzeichnung automatisch DevTools-Daten auf und gibt Ihren Entwicklern so den vollständigen Kontext, um Probleme effizient zu debuggen. Jede Aufzeichnung erfasst Folgendes:

• Konsolenprotokolle: Alle Konsolenausgaben, Warnungen und Fehlermeldungen während der Aufzeichnung.
• Netzwerkanfragen: Protokolle der gesamten Netzwerkaktivität, einschließlich:
  • Header und Bodys von Anfragen und Antworten: Die in jeder Anfrage gesendeten und empfangenen Daten.
  • Statuscodes: Erkennen Sie fehlgeschlagene oder problematische Anfragen auf einen Blick.
• User-Agent-Daten: Informationen über den Browser und das Gerät des Benutzers, damit Entwickler die Umgebung nachstellen können, in der der Bug aufgetreten ist.
• Daten zu Benutzerinteraktionen: Details zur Benutzeraktivität, etwa Klicks und Navigationspfade, anhand derer Entwickler nachvollziehen können, wie das Problem aufgetreten ist.

Hinweis zu GraphQL-Fehlern

GraphQL gibt in der Regel für alle Antworten den Statuscode 200 OK zurück – selbst dann, wenn der Antwort-Body Fehler enthält (meist in einem Feld namens errors). Dadurch ist es schwierig, Probleme allein anhand des HTTP-Statuscodes zu erkennen.

In Spot erkennen wir, wenn eine GraphQL-Antwort ein errors-Objekt im Body enthält. Wird ein solcher Fehler gefunden, markieren wir die Anfrage mit dem Statuscode 400 statt 200. Diese Anpassung erleichtert es Entwicklern, problematische GraphQL-Anfragen zu erkennen und zu debuggen.

• Einstellungen aufrufen: Klicken Sie in Ihrer Symbolleiste auf das Spot-Symbol und wählen Sie das Symbol Settings.
• Go to Spot tab after save: Aktivieren Sie diese Option, um nach dem Speichern direkt zur Spot-Aufzeichnung weitergeleitet zu werden.
• Include DevTools: Aktivieren Sie diese Option, um Konsolenprotokolle, Netzwerkaufrufe und andere Debugging-Informationen in Ihre Aufzeichnung aufzunehmen.

• Einladungen senden: Klicken Sie auf Preferences, öffnen Sie Team und klicken Sie auf Add Team Member. Geben Sie den vollständigen Namen und die E-Mail-Adresse ein und senden Sie dann die Einladung.
• Teamzugriff: Alle Teammitglieder können Spot-Aufzeichnungen in der Ansicht Spots in OpenReplay ansehen

Spots sind nicht an ein bestimmtes Projekt gebunden.

• Privates Teilen: Spot-Aufzeichnungen können über private Links für die interne Ansicht innerhalb Ihres Teams in OpenReplay geteilt werden.
• Öffentliches Teilen: Sie können öffentliche Links für externe Betrachter erstellen, die auch ohne OpenReplay-Konto zugänglich sind.
• Integration mit Tools: Fügen Sie diese Links in Bug-Tracking- oder Collaboration-Tools wie Slack, Teams, Jira oder Linear ein, um einfach darauf zuzugreifen und zusammenzuarbeiten.

Wenn beim Speichern von Spot-Aufzeichnungen ein HTTP-520-Fehler („Unknown Error“) auftritt, deutet das in der Regel darauf hin, dass die Videodatei die von Cloudflare akzeptierte Größenbeschränkung überschreitet. Das kann bei längeren Spots oder Spots mit komplexen Interaktionen passieren.

So beheben Sie dieses Problem:

1. Öffnen Sie die Konfiguration Ihrer OpenReplay-Bereitstellung unter: scripts/helmcharts/vars.yaml
2. Suchen Sie die Variable proxy-body-size (etwa in Zeile 109)
3. Erhöhen Sie den Wert vom Standardwert 10m, damit auch größere Aufzeichnungen möglich sind
   • Wenn Sie beispielsweise Dateien mit etwa 36 MB hochladen müssen, sollten Sie mindestens 40m einstellen

Beispiel für eine Konfigurationsanpassung:

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

Wenden Sie die Änderungen nach dem Aktualisieren der Konfiguration auf Ihre Bereitstellung an, damit sie wirksam werden.

Haben Sie Probleme bei der Einrichtung dieses Plugins? Besuchen Sie unseren Slack und erhalten Sie Hilfe aus unserer Community.