Spot è un’estensione di Chrome che rende la segnalazione dei bug incredibilmente veloce e semplice.

Con Spot puoi registrare facilmente i bug direttamente dal tuo browser e condividerli subito con il tuo team. Il risultato finale è una segnalazione di bug completa e pronta da condividere, in formato video, che include le azioni dell’utente, i log e gli errori della console, i payload di rete e i dati dello user agent. In breve, hai tutto ciò che serve per segnalare un bug più velocemente che mai e tutto ciò che serve al tuo team per risolverlo altrettanto in fretta.

• Spot è incluso in ogni piano di OpenReplay, dalla nostra offerta open source a quella enterprise.
• Spot è un’estensione di Chrome che funziona anche su qualsiasi browser basato su Chromium, tra cui Microsoft Edge, Brave e Arc.

Installare l’estensione Chrome di Spot è semplice e veloce:

1. Vai alla pagina dell’estensione Spot sul Chrome Web Store e fai clic su Add to Chrome.
2. Fissa Spot alla barra degli strumenti di Chrome per accedervi facilmente in futuro.

Prima di iniziare a usare Spot, devi accedere al tuo account OpenReplay esistente oppure crearne uno nuovo:

• OpenReplay cloud

  Section titled OpenReplay cloud
  • Nuovi utenti:
    1. Dopo aver fissato Spot, fai clic sull’icona di Spot nella barra degli strumenti.
    2. Seleziona Create Account.
    3. Scegli il tuo primary use-case per OpenReplay.
    • Se selezioni “report bugs via Spot” come caso d’uso principale, potrai accedere in seguito a tutte le funzionalità di OpenReplay facendo clic su Setup Tracker.
    
  • Utenti esistenti:
    1. Fai clic sull’estensione Spot fissata nella barra degli strumenti.
    2. Seleziona Log in e inserisci le tue credenziali OpenReplay.
    • Trovi i tuoi Spot nel menu Spot nella barra laterale sinistra.
    

• OpenReplay self-hosted

  Section titled OpenReplay self-hosted
  • Utenti nuovi ed esistenti:
    • Aggiorna la tua istanza di OpenReplay all’ultima versione (v1.20.0) che supporta Spot.
    • Dopo l’aggiornamento, il menu Spot comparirà nella barra laterale sinistra. I tuoi Spot saranno salvati in modo sicuro sulla tua istanza.

Ora che hai effettuato l’accesso, sei pronto a individuare e segnalare i bug con Spot.

Ecco come usare le funzionalità principali dell’estensione Chrome di Spot:

• Avviare la registrazione: fai clic sull’icona di Spot nella barra degli strumenti e seleziona Record Tab per catturare tutto ciò che accade nella scheda attiva.

• Attivare il microfono: se necessario, attiva l’opzione del microfono per includere l’audio nella registrazione.

• Mettere in pausa la registrazione: fai clic sull’icona di pausa nel pannello di registrazione in qualsiasi momento.

• Riavviare la registrazione: fai clic sull’icona di riavvio nel pannello di registrazione per ricominciare la registrazione.

• Interrompere la registrazione: fai clic sull’icona di stop nel pannello di registrazione per interrompere la registrazione.

• Aggiungere commenti: puoi aggiungere commenti per fornire ulteriore contesto prima di salvare.

• Salvare lo Spot: dopo aver interrotto la registrazione, questa verrà salvata automaticamente con tutti i dettagli tecnici rilevanti, come i log della console e i dati di rete.

  

• Avviare la registrazione: fai clic sull’icona di Spot e seleziona Record Desktop. Scegli se registrare l’intero schermo o una finestra specifica.

Spot include automaticamente i dati di DevTools in ogni registrazione di un bug, offrendo ai tuoi sviluppatori il contesto completo per fare il debug dei problemi in modo efficiente. Ogni registrazione cattura quanto segue:

• Log della console: tutti gli output, gli avvisi e i messaggi di errore della console durante la sessione di registrazione.
• Richieste di rete: log di tutta l’attività di rete, tra cui:
  • Intestazioni e corpi di richieste e risposte: i dati inviati e ricevuti in ogni richiesta.
  • Codici di stato: individua rapidamente le richieste non riuscite o problematiche.
• Dati dello user agent: informazioni sul browser e sul dispositivo dell’utente, per aiutare gli sviluppatori a riprodurre l’ambiente in cui si è verificato il bug.
• Dati sulle interazioni dell’utente: dettagli sull’attività dell’utente, come i clic e i percorsi di navigazione, che permettono agli sviluppatori di capire come è emerso il problema.

Nota sugli errori GraphQL

GraphQL in genere restituisce un codice di stato 200 OK per tutte le risposte, anche quando nel corpo della risposta sono presenti errori (di solito inseriti in un campo errors). Questo può rendere difficile individuare i problemi basandosi solo sul codice di stato HTTP.

In Spot rileviamo quando una risposta GraphQL contiene un oggetto errors nel corpo. Quando viene trovato un errore di questo tipo, contrassegniamo la richiesta con il codice di stato 400 invece di 200. Questa modifica permette agli sviluppatori di individuare e fare il debug più facilmente delle richieste GraphQL problematiche.

• Accedere alle impostazioni: fai clic sull’icona di Spot nella barra degli strumenti e seleziona l’icona Settings.
• Go to Spot tab after save: attiva questa opzione per essere indirizzato subito alla registrazione di Spot dopo il salvataggio.
• Include DevTools: attiva questa opzione per includere nella registrazione i log della console, le chiamate di rete e altre informazioni di debug.

• Inviare gli inviti: fai clic su Preferences, vai a Team e fai clic su Add Team Member. Inserisci il nome completo e l’indirizzo email, quindi invia l’invito.
• Accesso del team: tutti i membri del team possono vedere le registrazioni di Spot nella vista Spots di OpenReplay

Gli Spot non sono legati a nessun progetto specifico.

• Condivisione privata: le registrazioni di Spot possono essere condivise tramite link privati per la visualizzazione interna da parte del tuo team su OpenReplay.
• Condivisione pubblica: puoi creare link pubblici per la visualizzazione esterna, accessibili anche senza un account OpenReplay.
• Integrazione con altri strumenti: includi questi link negli strumenti di bug tracking o di collaborazione come Slack, Teams, Jira o Linear, per facilitare l’accesso e il lavoro di squadra.

Se riscontri un errore HTTP 520 Unknown Error quando provi a salvare le registrazioni di Spot, in genere significa che la dimensione del file video supera il limite accettato da Cloudflare. Può succedere quando registri Spot più lunghi o con interazioni complesse.

Per risolvere il problema:

1. Accedi alla configurazione del deployment di OpenReplay in: scripts/helmcharts/vars.yaml
2. Individua la variabile proxy-body-size (intorno alla riga 109)
3. Aumenta il valore rispetto al predefinito 10m per ospitare registrazioni più grandi
   • Ad esempio, se devi caricare file di circa 36MB, impostalo ad almeno 40m

Esempio di modifica della configurazione:

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

Dopo aver aggiornato la configurazione, applica le modifiche al tuo deployment affinché abbiano effetto.

Hai difficoltà a configurare questo plugin? Collegati al nostro Slack e ricevi aiuto dalla nostra community.