Implémentez les rapports de bogues côté client avec USERSNAP

Les plats clés

• USERSNAP est un outil qui permet aux utilisateurs de signaler les bogues directement à partir d'un site Web en marquant une capture d'écran et en envoyant toutes les données dans la console JavaScript. Il peut être intégré dans le site Web d'un client pour accélérer les rapports et la résolution des bogues.
• Les développeurs peuvent également utiliser USERSNAP pour collecter des erreurs et des journaux côté serveur. En utilisant une classe simple, ils peuvent enregistrer toutes les erreurs et journaux nécessaires pour le débogage, qui peuvent ensuite être transmis à USERSNAP. Cela permet des corrections de bogues plus rapides et plus efficaces.
• USERSNAP fournit également des informations supplémentaires telles que la taille de l'écran, la version du navigateur, le système d'exploitation et les plugins de navigateur installés. Cette fonctionnalité ne peut être activée que lorsque cela est nécessaire, et sa disponibilité peut être limitée grâce à des méthodes telles que le filtrage IP ou l'ouverture d'un Dev. * Sous-domaine.

Imaginez le scénario suivant: vos clients visitent le site Web (imaginons celui-ci) et voyez autre chose que le résultat attendu. La réaction normale est de vous appeler (au moment le plus inapproprié) et de vous demander de le réparer dès que possible, car ils perdent de l'argent.

Comment pouvons-nous aider l'utilisateur à signaler le bogue aussi précisément que possible?

le bug

Ayons une demande JSON vraiment simple et une erreur pour pouvoir reproduire notre cas:

<span>$json_data = '{"value":1,"apples":2,"name":3,"oranges":4,"last one":5}';
</span>
<span>//we will simulate the json data, but imagine that this is the normal data exchanged daily between your client’s website and a 3rd party API
</span>
<span>$ch = curl_init('http://talkweb.eu/labs/fr/json_callback.php');                                                                 
</span><span>curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");                                                                
</span><span>curl_setopt($ch, CURLOPT_POSTFIELDS, $json_data);                                  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                                    curl_setopt($ch, CURLOPT_HTTPHEADER, array(                                                'Content-Type: application/json',                      
</span>        <span>'Content-Length: ' . strlen($json_data)));
</span>                                                                                                             
<span>//the normal CURL request, nothing strange here:
</span><span>$result = curl_exec($ch);
</span>
<span>//receiving the data back
</span><span>$f_data =  json_decode($result,true);
</span>
<span>//showing a greeting with the output
</span><span>echo  “Welcome”. $f_data['username'];</span>

Si vous visitez le site Web du test maintenant, vous remarquerez qu'il y a un problème.

La question est - comment le client peut-il le signaler plus rapidement avec toutes les données dont vous avez besoin pour combattre le bug:

• Données JSON,
• Erreurs JavaScript et XMLHTTPSRequest côté serveur,
• Certaines erreurs de PHP de base
• … et méta-data.

Une solution intéressante pour collecter ces informations est USERSNAP. Un widget qui permet à vos utilisateurs de marquer une capture d'écran du site sur lequel ils se trouvent et de vous envoyer tout ce qui se trouve dans la console JavaScript. Les erreurs PHP ne se terminent pas là-bas, cependant, n'est-ce pas? Faisons-les. Tout d'abord, nous rassemblerons les erreurs côté serveur.

Rassemblement des erreurs

Ajoutons un peu plus de code à l'exemple afin de voir comment nous pouvons collecter les données dont nous avons besoin. Présentation d'une classe très simple pour nous aider:

<span><span>
</span></span><span><span>class SendToUsersnap
</span></span><span><span>{
</span></span><span>    <span>var $m;
</span></span><span>    <span>//Save all logs in an array. You can use an even more elegant approach but right now I need it to be simple for the sake of this tutorial.
</span></span><span>    <span>function log ( $data, $type ) {
</span></span><span>    
</span><span>        <span>if( is_array( $data ) || is_object( $data ) ) {
</span></span><span>            <span>$this->m[]= "console.".$type."('PHP: ".json_encode($data)."');";
</span></span><span>        <span>} else {
</span></span><span>            <span>$this->m[] = "console.".$type."('PHP: ".$data."');";
</span></span><span>        <span>}
</span></span><span>    <span>}
</span></span><span>  <span>// Print all logs that have been set from the previous function. Let’s keep it simple.
</span></span><span>    <span>function  out (){
</span></span><span>         <span>for ($i=0;$i<count>m);$i++)
</count></span></span><span>          <span>{
</span></span><span>              <span>echo $this->m[$i]."\n";
</span></span><span>          <span>}
</span></span><span>        
</span><span>        
</span><span>        <span>}
</span></span><span><span>}</span></span>

Utilisons maintenant cette classe pour enregistrer toutes les erreurs et journaux dont nous pourrions avoir besoin.

<span>require_once('Usersnap.class.php'); 
</span>    <span>$s = new SendToUsersnap;
</span>
    <span>$json_data = '{"value":1,"apples":2,"name":3,"oranges":4,"last one":5}';
</span>    <span>$s->log('Initializing the JSON request',"info");
</span>    <span>$s->log($json_data,"log");
</span> 
    <span>$ch = curl_init('http://talkweb.eu/labs/fr/json_callback.php');             
</span>    <span>curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
</span>    <span>curl_setopt($ch, CURLOPT_POSTFIELDS, $json_data);                           
</span>    <span>curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                         
</span>    <span>curl_setopt($ch, CURLOPT_HTTPHEADER, array(                                 
</span>        <span>'Content-Type: application/json',                           
</span>        <span>'Content-Length: ' . strlen($json_data)));                                                                                                                   
</span> 
    <span>$result = curl_exec($ch);
</span>    <span>$f_data =  json_decode($result,true);
</span>    
    <span>echo  'Welcome'. $f_data['usersname'];
</span>    
    <span>$s->log($f_data,"log");
</span>    <span>$s->log(error_get_last(),"error");</span>

passez-le à Usersnap

Ajoutons l'extrait de code Usersnap à la fin de notre page et voyons ce qui se passe. (Vous pourriez avoir besoin d'un compte pour utiliser ce widget. Usersnap propose des licences gratuites pour les projets open source et une période de test gratuite pour les produits commerciaux.

<span><span><span><script> type<span >="text/javascript"</script></span>></span><span>
</span></span><span><span>  <span>(function() {
</span></span></span><span><span>  <span>var s = document.createElement("script");
</span></span></span><span><span>    s<span>.type = "text/javascript";
</span></span></span><span><span>    s<span>.async = true;
</span></span></span><span><span>    s<span>.src = '//api.usersnap.com/load/'+
</span></span></span><span><span>            <span>'your-api-key-here.js';
</span></span></span><span><span>    <span>var x = document.getElementsByTagName('script')[0];
</span></span></span><span><span>    x<span>.parentNode.insertBefore(s, x);
</span></span></span><span><span>  <span>})();
</span></span></span><span><span>
</span></span><span><span> <span>var _usersnapconfig = {
</span></span></span><span><span>   <span>loadHandler: function() {
</span></span></span><span><span>        <span><span><?php </span></span></span></span><span><span><span>    <span>//just print all errors collected from the buffer.
</span></span></span></span><span><span><span> <span>$s->out(); ?></span>
</span></span></span><span><span>     <span>}
</span></span></span><span><span> <span>};
</span></span></span><span><span></span><span><span></span>></span></span></span>

Remarque: vous le feriez dans un modèle de vue dans un vrai framework, mais comme nous n'utilisons pas une véritable application MVC ici, nous sautons cette partie.

L'utilisateur verra un bouton "Rapport Bug" sur la page et vous rédigera un message comme "Cela ne fonctionne pas, le corrigera dès que possible". Généralement, ce seraient des informations inutiles, mais cette fois, nous obtenons aussi ce magnifique journal d'erreur:

Maintenant, vous pouvez voir qu'il y a une initialisation en place:

<span>$json_data = '{"value":1,"apples":2,"name":3,"oranges":4,"last one":5}';
</span>
<span>//we will simulate the json data, but imagine that this is the normal data exchanged daily between your client’s website and a 3rd party API
</span>
<span>$ch = curl_init('http://talkweb.eu/labs/fr/json_callback.php');                                                                 
</span><span>curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");                                                                
</span><span>curl_setopt($ch, CURLOPT_POSTFIELDS, $json_data);                                  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                                    curl_setopt($ch, CURLOPT_HTTPHEADER, array(                                                'Content-Type: application/json',                      
</span>        <span>'Content-Length: ' . strlen($json_data)));
</span>                                                                                                             
<span>//the normal CURL request, nothing strange here:
</span><span>$result = curl_exec($ch);
</span>
<span>//receiving the data back
</span><span>$f_data =  json_decode($result,true);
</span>
<span>//showing a greeting with the output
</span><span>echo  “Welcome”. $f_data['username'];</span>

Vous pouvez voir les données que nous enverrons - la même chose que d'habitude

<span><span>
</span></span><span><span>class SendToUsersnap
</span></span><span><span>{
</span></span><span>    <span>var $m;
</span></span><span>    <span>//Save all logs in an array. You can use an even more elegant approach but right now I need it to be simple for the sake of this tutorial.
</span></span><span>    <span>function log ( $data, $type ) {
</span></span><span>    
</span><span>        <span>if( is_array( $data ) || is_object( $data ) ) {
</span></span><span>            <span>$this->m[]= "console.".$type."('PHP: ".json_encode($data)."');";
</span></span><span>        <span>} else {
</span></span><span>            <span>$this->m[] = "console.".$type."('PHP: ".$data."');";
</span></span><span>        <span>}
</span></span><span>    <span>}
</span></span><span>  <span>// Print all logs that have been set from the previous function. Let’s keep it simple.
</span></span><span>    <span>function  out (){
</span></span><span>         <span>for ($i=0;$i<count>m);$i++)
</count></span></span><span>          <span>{
</span></span><span>              <span>echo $this->m[$i]."\n";
</span></span><span>          <span>}
</span></span><span>        
</span><span>        
</span><span>        <span>}
</span></span><span><span>}</span></span>

et vous pouvez voir la sortie. Oui, le problème est là. De toute évidence, il y a un problème d'authentification.

<span>require_once('Usersnap.class.php'); 
</span>    <span>$s = new SendToUsersnap;
</span>
    <span>$json_data = '{"value":1,"apples":2,"name":3,"oranges":4,"last one":5}';
</span>    <span>$s->log('Initializing the JSON request',"info");
</span>    <span>$s->log($json_data,"log");
</span> 
    <span>$ch = curl_init('http://talkweb.eu/labs/fr/json_callback.php');             
</span>    <span>curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
</span>    <span>curl_setopt($ch, CURLOPT_POSTFIELDS, $json_data);                           
</span>    <span>curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                         
</span>    <span>curl_setopt($ch, CURLOPT_HTTPHEADER, array(                                 
</span>        <span>'Content-Type: application/json',                           
</span>        <span>'Content-Length: ' . strlen($json_data)));                                                                                                                   
</span> 
    <span>$result = curl_exec($ch);
</span>    <span>$f_data =  json_decode($result,true);
</span>    
    <span>echo  'Welcome'. $f_data['usersname'];
</span>    
    <span>$s->log($f_data,"log");
</span>    <span>$s->log(error_get_last(),"error");</span>

Vous pouvez obtenir même les erreurs PHP de base pour vous aider à déboguer.

<span><span><span><script> type<span >="text/javascript"</script></span>></span><span>
</span></span><span><span>  <span>(function() {
</span></span></span><span><span>  <span>var s = document.createElement("script");
</span></span></span><span><span>    s<span>.type = "text/javascript";
</span></span></span><span><span>    s<span>.async = true;
</span></span></span><span><span>    s<span>.src = '//api.usersnap.com/load/'+
</span></span></span><span><span>            <span>'your-api-key-here.js';
</span></span></span><span><span>    <span>var x = document.getElementsByTagName('script')[0];
</span></span></span><span><span>    x<span>.parentNode.insertBefore(s, x);
</span></span></span><span><span>  <span>})();
</span></span></span><span><span>
</span></span><span><span> <span>var _usersnapconfig = {
</span></span></span><span><span>   <span>loadHandler: function() {
</span></span></span><span><span>        <span><span><?php </span></span></span></span><span><span><span>    <span>//just print all errors collected from the buffer.
</span></span></span></span><span><span><span> <span>$s->out(); ?></span>
</span></span></span><span><span>     <span>}
</span></span></span><span><span> <span>};
</span></span></span><span><span></span><span><span></span>></span></span></span>

Votre client ne devra cliquer sur le bouton qu'une seule fois et vous obtiendrez tout ce dont vous avez besoin pour combattre le bug plus rapidement:

1. Erreurs et journaux (comme indiqué ci-dessus)
2. Capture d'écran annotée - Si le problème est plus complexe que cet exemple simple
3. Taille de l'écran, version du navigateur, OS et les plugins installés dans le navigateur

Bien sûr, vous ne pouvez activer cette fonctionnalité que lorsque votre client en a besoin. Pour limiter la disponibilité du widget, ajoutez un filtre IP ou une barrière de paramètre de requête, ouvrez un Dev. * Sous-domaine, etc.

Conclusion

Il ne s'agit pas d'un outil de surveillance de script et ne fournira pas d'informations automatiquement quand et si le problème apparaît. Cette approche ne fonctionnera que si un utilisateur ou un client signale un bogue et que vous en tant que développeur ou QA a besoin de plus d'informations sur la façon de combattre le bogue. Imaginez-le comme un débogueur distant, mais pour les événements d'erreurs côté client et les données que vous envoyez de PHP à JavaScript.

Je serais ravi de répondre à toutes vos questions! Laissez vos commentaires ci-dessous!

Questions fréquemment posées (FAQ) sur les rapports de bogues côté client avec usersnap

Comment USERSNAP fonctionne-t-il pour les rapports de bogues côté client?

USERSNAP est un outil de suivi des bogues visuels qui permet aux utilisateurs de signaler les bogues directement à partir de leurs applications Web. Il fonctionne en capturant des captures d'écran du problème ainsi que des informations importantes sur le navigateur, qui sont ensuite envoyées à l'équipe de développement. Cela élimine le besoin de communication va-et-vient et accélère le processus de fixation des bogues. USERSNAP s'intègre également aux outils de gestion de projet populaires et de communication, ce qui en fait une solution polyvalente pour diverses équipes.

Quelles sont les fonctionnalités clés de l'utilisateur NAP?

USERSNAP offre plusieurs fonctionnalités clés qui en font un puissant outil pour les rapports de bogues. Il s'agit notamment de la capture de capture d'écran, de la collecte d'informations sur le navigateur, de l'enregistrement du journal de console et de la collecte de commentaires des utilisateurs. Il propose également des intégrations avec des outils populaires comme Slack, Jira et Trello, entre autres. De plus, USERSNAP fournit une API pour une personnalisation et une intégration supplémentaires avec d'autres systèmes.

Comment puis-je intégrer USERSNAP dans mon application Web?

Intégrer les utilisateurs NAP dans votre application Web est simple. Vous devez vous inscrire à un compte Usersnap, créer un nouveau projet, puis ajouter le code JavaScript fourni à votre application Web. Ce code chargera le widget USERSNAP sur votre application, permettant aux utilisateurs de signaler directement les bogues.

Puis-je personnaliser le widget Usersnap?

Oui, Usersnap fournit une gamme d'options de personnalisation pour le widget. Vous pouvez modifier la couleur, le texte et la position du widget pour correspondre à votre marque. Vous pouvez également personnaliser le formulaire de rétroaction pour collecter des informations spécifiques de vos utilisateurs. Tout cela peut être fait via le tableau de bord USERSNAP ou via l'API.

Comment USERSNAP aide-t-il à améliorer la qualité de mon application Web?

Bogues, USERSNAP vous aide à identifier et à résoudre les problèmes plus rapidement. Les commentaires visuels et les informations détaillées sur le navigateur aident votre équipe de développement à comprendre et à reproduire facilement les problèmes. Cela conduit à des corrections et des améliorations de bogues plus rapides, améliorant ainsi la qualité globale de votre application Web.

Qu'est-ce que l'API Usersnap et comment puis-je l'utiliser?

L'API Usersnap est un ensemble de Programmation des interfaces qui vous permettent d'interagir avec USERSNAP par programme. Vous pouvez utiliser l'API pour créer, mettre à jour et gérer des projets, ainsi que pour personnaliser le widget Usersnap. L'API est Restful et utilise des méthodes HTTP standard, ce qui facilite l'intégration de vos systèmes existants.

Comment les utilisateurs gèrent-ils la confidentialité des utilisateurs?

USERSNAP prend au sérieux la confidentialité des utilisateurs. L'outil ne suit pas l'activité de l'utilisateur ni ne collecte des données personnelles sans consentement. Toutes les données collectées sont stockées en toute sécurité et uniquement utilisées aux fins de la déclaration des bogues. USERSNAP est également conforme au RGPD et à d'autres réglementations de confidentialité.

Puis-je utiliser USERSNAP pour les rapports de bogues mobiles?

Oui, USERNAP prend en charge les rapports de bogues mobiles. Le widget Usersnap est réactif et fonctionne bien sur les appareils mobiles. Cela permet à vos utilisateurs de signaler les bogues directement à partir de leurs navigateurs mobiles, vous fournissant des commentaires précieux pour améliorer votre application Web mobile.

Comment les utilisateurs se comparent-ils aux autres outils de reporting de bogues?

Les utilisateurs se distinguent-ils Pour ses commentaires visuels et ses informations détaillées sur le navigateur, ce qui rend les rapports de bogues et la correction plus efficaces. Il propose également une gamme d'options de personnalisation et d'intégations avec des outils populaires. Bien que d'autres outils puissent offrir des fonctionnalités similaires, la simplicité et la polyvalence des utilisateurs en font un choix préféré pour de nombreuses équipes.

Quel support Utilisingnap offre-t-il?

USERSNAP offre une prise en charge complète de ses utilisateurs. Cela comprend la documentation détaillée, la référence de l'API et des exemples pour vous aider à démarrer et à tirer le meilleur parti de l'outil. USERSNAP fournit également une prise en charge de l'e-mail pour toutes les requêtes ou problèmes que vous pouvez avoir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!