Spot est une extension Chrome qui rend le signalement de bugs incroyablement rapide et simple.

Avec Spot, vous pouvez facilement enregistrer des bugs directement depuis votre navigateur et les partager instantanément avec votre équipe. Le résultat final est un rapport de bug complet, prêt à partager au format vidéo, comprenant les actions de l’utilisateur, les journaux et erreurs de la console, les charges utiles réseau et les données de l’agent utilisateur. En bref, vous obtenez tout ce dont vous avez besoin pour signaler un bug plus vite que jamais, et tout ce dont votre équipe a besoin pour le corriger tout aussi rapidement.

• Spot est inclus dans chaque forfait OpenReplay, de notre version open source à nos offres entreprise.
• Spot est une extension Chrome qui fonctionne également sur tout navigateur basé sur Chromium, y compris Microsoft Edge, Brave et Arc.

Installer l’extension Chrome Spot est rapide et facile :

1. Rendez-vous sur la page de l’extension Spot sur le Chrome Web Store et cliquez sur Ajouter à Chrome.
2. Épinglez Spot à votre barre d’outils Chrome pour y accéder facilement à l’avenir.

Avant de commencer à utiliser Spot, vous devez vous connecter à votre compte OpenReplay existant ou en créer un nouveau :

• OpenReplay cloud

  Section titled OpenReplay cloud
  • Nouveaux utilisateurs :
    1. Après avoir épinglé Spot, cliquez sur l’icône Spot dans votre barre d’outils.
    2. Sélectionnez Create Account.
    3. Choisissez votre cas d’usage principal pour OpenReplay.
    • Si vous sélectionnez « signaler des bugs via Spot » comme cas d’usage principal, vous pourrez plus tard accéder à toutes les fonctionnalités d’OpenReplay en cliquant sur Setup Tracker.
    
  • Utilisateurs existants :
    1. Cliquez sur l’extension Spot épinglée dans votre barre d’outils.
    2. Sélectionnez Log in et saisissez vos identifiants OpenReplay.
    • Vous pouvez retrouver vos Spots dans le menu Spot de la barre latérale gauche.
    

• OpenReplay self-host

  Section titled OpenReplay self-host
  • Nouveaux utilisateurs et utilisateurs existants :
    • Mettez à jour votre instance OpenReplay vers la dernière version (v1.20.0) qui prend en charge Spot.
    • Une fois la mise à jour effectuée, le menu Spot apparaîtra dans la barre latérale gauche. Vos Spots seront enregistrés en toute sécurité sur votre instance.

Maintenant que vous êtes connecté, vous êtes fin prêt à commencer à repérer et signaler des bugs avec Spot.

Voici comment utiliser les principales fonctionnalités de l’extension Chrome Spot :

• Démarrer l’enregistrement : Cliquez sur l’icône Spot dans votre barre d’outils et sélectionnez Record Tab pour capturer tout ce qui se passe dans l’onglet actif.

• Activer le microphone : Si nécessaire, activez l’option microphone pour inclure l’audio dans votre enregistrement.

• Mettre en pause l’enregistrement : Cliquez sur l’icône de pause dans le panneau d’enregistrement à tout moment.

• Redémarrer l’enregistrement : Cliquez sur l’icône de redémarrage dans le panneau d’enregistrement pour redémarrer l’enregistrement.

• Arrêter l’enregistrement : Cliquez sur l’icône d’arrêt dans le panneau d’enregistrement pour arrêter l’enregistrement.

• Ajouter des commentaires : Vous pouvez ajouter des commentaires pour fournir un contexte supplémentaire avant la sauvegarde.

• Enregistrer le Spot : Après l’arrêt de l’enregistrement, il sera automatiquement sauvegardé avec tous les détails techniques pertinents, comme les journaux de la console et les données réseau.

  

• Démarrer l’enregistrement : Cliquez sur l’icône Spot et sélectionnez Record Desktop. Choisissez d’enregistrer tout votre écran ou une fenêtre spécifique.

Spot inclut automatiquement les données DevTools dans chaque enregistrement de bug, offrant à vos développeurs le contexte complet pour déboguer efficacement les problèmes. Chaque enregistrement capture les éléments suivants :

• Journaux de la console : Toutes les sorties de la console, les avertissements et les messages d’erreur pendant la session d’enregistrement.
• Requêtes réseau : Journaux de toute l’activité réseau, notamment :
  • En-têtes et corps des requêtes et réponses : Données envoyées et reçues dans chaque requête.
  • Codes de statut : Identifiez rapidement les requêtes échouées ou problématiques.
• Données de l’agent utilisateur : Informations sur le navigateur et l’appareil de l’utilisateur pour aider les développeurs à reproduire l’environnement dans lequel le bug s’est produit.
• Données d’interaction de l’utilisateur : Détails sur l’activité de l’utilisateur, tels que les clics et les chemins de navigation, permettant aux développeurs de comprendre comment le problème a été rencontré.

Note sur les erreurs GraphQL

GraphQL renvoie généralement un code de statut 200 OK pour toutes les réponses, même lorsque des erreurs sont présentes dans le corps de la réponse (généralement placées dans un champ errors). Cela peut rendre difficile la détection des problèmes en se basant uniquement sur le code de statut HTTP.

Dans Spot, nous détectons lorsqu’une réponse GraphQL contient un objet errors dans le corps. Lorsqu’une telle erreur est trouvée, nous marquons la requête avec un code de statut 400 au lieu de 200. Cet ajustement permet aux développeurs d’identifier et de déboguer plus facilement les requêtes GraphQL problématiques.

• Accéder aux paramètres : Cliquez sur l’icône Spot dans votre barre d’outils et sélectionnez l’icône Settings.
• Aller à l’onglet Spot après l’enregistrement : Activez cette option pour être dirigé vers l’enregistrement Spot immédiatement après l’avoir sauvegardé.
• Inclure DevTools : Activez cette option pour inclure les journaux de la console, les appels réseau et d’autres informations de débogage dans votre enregistrement.

• Envoyer des invitations : Cliquez sur Preferences, allez dans Team et cliquez sur Add Team Member. Saisissez leur nom complet et leur adresse e-mail, puis envoyez l’invitation.
• Accès de l’équipe : Tous les membres de l’équipe peuvent voir les enregistrements Spot dans la vue Spots dans OpenReplay

Les Spots ne sont liés à aucun projet spécifique.

• Partage privé : Les enregistrements Spot peuvent être partagés via des liens privés pour un visionnage interne au sein de votre équipe sur OpenReplay.
• Partage public : Vous pouvez créer des liens publics pour un visionnage externe, accessibles même sans compte OpenReplay.
• Intégration avec des outils : Incluez ces liens dans des outils de suivi des bugs ou de collaboration comme Slack, Teams, Jira ou Linear pour un accès facile et un travail d’équipe fluide.

Si vous rencontrez une erreur HTTP 520 Unknown Error en essayant d’enregistrer des enregistrements Spot, cela indique généralement que la taille du fichier vidéo dépasse la limite de taille acceptée par Cloudflare. Cela peut se produire lors de l’enregistrement de spots plus longs ou de spots avec des interactions complexes.

Pour résoudre ce problème :

1. Accédez à la configuration de votre déploiement OpenReplay à l’adresse : scripts/helmcharts/vars.yaml
2. Localisez la variable proxy-body-size (environ à la ligne 109)
3. Augmentez la valeur depuis la valeur par défaut 10m pour prendre en charge des enregistrements plus volumineux
   • Par exemple, si vous devez téléverser des fichiers d’environ 36MB, vous devriez la régler sur au moins 40m

Exemple d’ajustement de configuration :

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

Après avoir mis à jour la configuration, appliquez les modifications à votre déploiement pour qu’elles prennent effet.

Vous avez des difficultés à configurer ce plugin ? Connectez-vous à notre Slack ou consultez notre Forum et obtenez de l’aide de notre communauté.