O Spot é uma extensão do Chrome que torna o reporte de bugs incrivelmente rápido e simples.

Com o Spot, você grava bugs facilmente direto do seu navegador e os compartilha na hora com sua equipe. O resultado final é um relatório de bug completo e pronto para compartilhar, em formato de vídeo, incluindo ações do usuário, logs e erros do console, payloads de rede e dados de user agent. Em resumo, você tem tudo o que precisa para reportar um bug mais rápido do que nunca, e tudo o que sua equipe precisa para corrigi-lo com a mesma rapidez.

• O Spot vem com todos os planos do OpenReplay, das nossas ofertas open source às enterprise.
• O Spot é uma extensão do Chrome que também funciona em qualquer navegador baseado em Chromium, incluindo Microsoft Edge, Brave e Arc.

Instalar a extensão do Chrome Spot é rápido e fácil:

1. Acesse a página da extensão Spot na Chrome Web Store e clique em Add to Chrome.
2. Fixe o Spot na barra de ferramentas do Chrome para acessá-lo facilmente no futuro.

Antes de começar a usar o Spot, você precisa entrar na sua conta existente do OpenReplay ou criar uma nova:

• OpenReplay cloud

  Section titled OpenReplay cloud
  • Novos usuários:
    1. Depois de fixar o Spot, clique no ícone do Spot na barra de ferramentas.
    2. Selecione Create Account.
    3. Escolha o seu primary use-case para o OpenReplay.
    • Se você selecionar “report bugs via Spot” como caso de uso principal, poderá acessar depois todos os recursos do OpenReplay clicando em Setup Tracker.
    
  • Usuários existentes:
    1. Clique na extensão Spot fixada na barra de ferramentas.
    2. Selecione Log in e informe suas credenciais do OpenReplay.
    • Você encontra seus Spots no menu Spot na barra lateral esquerda.
    

• OpenReplay auto-hospedado

  Section titled OpenReplay auto-hospedado
  • Usuários novos e existentes:
    • Atualize sua instância do OpenReplay para a versão mais recente (v1.20.0) que oferece suporte ao Spot.
    • Depois da atualização, o menu Spot aparecerá na barra lateral esquerda. Seus Spots serão salvos com segurança na sua instância.

Agora que você está logado, está tudo pronto para começar a localizar e reportar bugs com o Spot.

Veja como usar os principais recursos da extensão do Chrome Spot:

• Iniciar a gravação: Clique no ícone do Spot na barra de ferramentas e selecione Record Tab para capturar tudo na aba ativa.

• Ativar o microfone: Se necessário, ative a opção de microfone para incluir áudio na sua gravação.

• Pausar a gravação: Clique no ícone de pausa no painel de gravação a qualquer momento.

• Reiniciar a gravação: Clique no ícone de reinício no painel de gravação para reiniciar a gravação.

• Parar a gravação: Clique no ícone de parar no painel de gravação para parar a gravação.

• Adicionar comentários: Você pode adicionar comentários para fornecer contexto adicional antes de salvar.

• Salvar o Spot: Depois que você parar a gravação, ela será salva automaticamente com todos os detalhes técnicos relevantes, como logs do console e dados de rede.

  

• Iniciar a gravação: Clique no ícone do Spot e selecione Record Desktop. Escolha gravar a tela inteira ou uma janela específica.

O Spot inclui automaticamente os dados do DevTools em cada gravação de bug, fornecendo aos seus desenvolvedores o contexto completo para depurar problemas com eficiência. Cada gravação captura o seguinte:

• Logs do console: Todas as saídas, avisos e mensagens de erro do console durante a sessão de gravação.
• Requisições de rede: Logs de toda a atividade de rede, incluindo:
  • Cabeçalhos e corpos de requisição e resposta: Dados enviados e recebidos em cada requisição.
  • Códigos de status: Identifique rapidamente requisições com falha ou problemáticas.
• Dados de user agent: Informações sobre o navegador e o dispositivo do usuário para ajudar os desenvolvedores a reproduzir o ambiente em que o bug ocorreu.
• Dados de interação do usuário: Detalhes sobre a atividade do usuário, como cliques e caminhos de navegação, permitindo que os desenvolvedores entendam como o problema foi encontrado.

Nota sobre erros do GraphQL

O GraphQL normalmente retorna um código de status 200 OK para todas as respostas, mesmo quando há erros no corpo da resposta (geralmente dentro de um campo errors). Isso pode dificultar a identificação de problemas apenas com base no código de status HTTP.

No Spot, detectamos quando uma resposta do GraphQL contém um objeto errors no corpo. Quando um erro desse tipo é encontrado, marcamos a requisição com o código de status 400 em vez de 200. Esse ajuste facilita para os desenvolvedores a identificação e a depuração de requisições GraphQL problemáticas.

• Acessar as configurações: Clique no ícone do Spot na barra de ferramentas e selecione o ícone Settings.
• Go to Spot tab after save: Ative esta opção para ser direcionado à gravação do Spot imediatamente após salvar.
• Include DevTools: Ative esta opção para incluir logs do console, chamadas de rede e outras informações de depuração na sua gravação.

• Enviar convites: Clique em Preferences, vá para Team e clique em Add Team Member. Informe o nome completo e o endereço de e-mail e envie o convite.
• Acesso da equipe: Todos os membros da equipe podem ver as gravações do Spot na visualização Spots do OpenReplay

Os Spots não estão vinculados a nenhum projeto específico.

• Compartilhamento privado: As gravações do Spot podem ser compartilhadas por links privados para visualização interna pela sua equipe no OpenReplay.
• Compartilhamento público: Você pode criar links públicos para visualização externa, acessíveis mesmo sem uma conta do OpenReplay.
• Integração com ferramentas: Inclua esses links em ferramentas de rastreamento de bugs ou de colaboração, como Slack, Teams, Jira ou Linear, para facilitar o acesso e o trabalho em equipe.

Se você encontrar um erro desconhecido HTTP 520 ao tentar salvar gravações do Spot, isso normalmente indica que o tamanho do arquivo de vídeo excede o limite de tamanho aceito pela Cloudflare. Isso pode acontecer ao gravar Spots mais longos ou com interações complexas.

Para resolver esse problema:

1. Acesse a configuração da sua implantação do OpenReplay em: scripts/helmcharts/vars.yaml
2. Localize a variável proxy-body-size (por volta da linha 109)
3. Aumente o valor do padrão 10m para comportar gravações maiores
   • Por exemplo, se você precisar enviar arquivos de cerca de 36MB, defina-o para pelo menos 40m

Exemplo de ajuste de configuração:

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

Depois de atualizar a configuração, aplique as alterações à sua implantação para que elas entrem em vigor.

Está com dificuldade para configurar este plugin? Conecte-se ao nosso Slack e receba ajuda da nossa comunidade.