Implementieren Sie die kundenseitige Fehlerberichterstattung mit UsersNAP

Key Takeaways

• usersNap ist ein Tool, mit dem Benutzer Fehler direkt von einer Website melden können, indem ein Screenshot markiert und alle Daten in der JavaScript -Konsole gesendet werden. Es kann in die Website eines Kunden integriert werden, um die Berichterstattung und Lösung von Fehler zu beschleunigen.
• Entwickler können auch UsersNAP verwenden, um serverseitige Fehler und Protokolle zu sammeln. Durch die Verwendung einer einfachen Klasse können sie alle für das Debuggen benötigten Fehler und Protokolle aufzeichnen, die dann an UsersNap übergeben werden können. Dies ermöglicht schnellere und effizientere Fehlerbehebungen.
• userNap bietet auch zusätzliche Informationen wie Bildschirmgröße, Browserversion, Betriebssystem und installierte Browser -Plugins. Diese Funktion kann nur bei Bedarf eingeschaltet werden, und ihre Verfügbarkeit kann durch Methoden wie IP -Filterung oder Öffnen einer Teufel begrenzt werden.* Subdomain.

Stellen Sie sich das folgende Szenario vor: Ihre Kunden besuchen die Website (stellen wir uns diese vor) und sehen Sie alles andere als das erwartete Ergebnis. Die normale Reaktion besteht darin, Sie (zum unangemessensten Zeitpunkt) anzurufen und Sie so schnell wie möglich zu bitten, es zu beheben, weil sie Geld verlieren.

Wie können wir dem Benutzer helfen, den Fehler so genau wie möglich zu melden?

Der Fehler

Lassen Sie uns eine wirklich einfache JSON -Anfrage und einen Fehler haben, um unseren Fall reproduzieren zu können:

<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>

Wenn Sie jetzt die Testwebsite besuchen, werden Sie feststellen, dass es ein Problem gibt.

Die Frage ist: Wie kann der Client es mit allen Daten, die Sie benötigen, um den Fehler zu bekämpfen, schneller melden:

• JSON -Daten,
• serverseitige JavaScript- und xmlhttpsquest-Fehler,
• Einige Kern -PHP -Fehler
• … und Meta -Daten.

Eine interessante Lösung zum Sammeln dieser Informationen ist UsersNap. Ein Widget, mit dem Ihre Benutzer einen Screenshot der Website markieren können, auf der sie sich befinden, und Ihnen alles senden, was sich in der JavaScript -Konsole befindet. PHP -Fehler enden nicht dort, oder? Machen wir sie. Zunächst sammeln wir die Server -Seitenfehler.

Erfassen von Fehlern

Fügen wir dem Beispiel mehr Code hinzu, um zu sehen, wie wir die von uns benötigten Daten sammeln können. Einführung einer wirklich einfachen Klasse, um uns zu helfen:

<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($this->m);$i++)
</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>

Lassen Sie uns diese Klasse nun verwenden, um alle Fehler und Protokolle aufzuzeichnen, die wir möglicherweise benötigen.

<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>

Geben Sie es an UsersNap

weiter

Fügen wir am Ende unserer Seite den Codes -Snippet von UsersNap -Code hinzu und sehen Sie, was passiert. (Möglicherweise benötigen Sie ein Konto, um dieses Widget zu verwenden. UsersNap bietet kostenlose Lizenzen für Open -Source -Projekte und einen kostenlosen Testzeitraum für kommerzielle.

<span><span><span><script</span> type<span>="text/javascript"</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></script</span>></span></span>

Hinweis: Sie würden dies in einer Ansichtsvorlage in einem echten Framework tun, aber da wir hier keine echte MVC -App verwenden, überspringen wir diesen Teil.

Der Benutzer sieht auf der Seite eine Schaltfläche "Berichtsfehler" und schreibt Ihnen eine Nachricht wie "Es funktioniert nicht, reparieren Sie ihn so schnell wie möglich". Im Allgemeinen wären dies nutzlose Informationen, aber dieses Mal lassen wir dieses wunderschöne Fehlerprotokoll auch beigefügt:

Jetzt können Sie sehen, dass die Initialisierung vorhanden ist:

<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>

Sie können die Daten sehen, die wir senden - genauso wie üblich

<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($this->m);$i++)
</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>

Und Sie können die Ausgabe sehen. Ja, das Problem ist da. Offensichtlich gibt es ein Auth -Problem.

<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>

Sie können sogar die Kern -PHP -Fehler erhalten, die Ihnen beim Debugging helfen.

<span><span><span><script</span> type<span>="text/javascript"</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></script</span>></span></span>

Ihr Kunde muss nur einmal auf die Schaltfläche klicken und Sie erhalten alles, was Sie brauchen, um den Fehler schneller zu bekämpfen:

1. Fehler und Protokolle (wie oben gezeigt)
2. Annotierter Screenshot - Wenn das Problem komplexer ist als dieses einfache Beispiel
3. Bildschirmgröße, Browserversion, Betriebssystem und die im Browser installierten Plugins

Natürlich können Sie diese Funktion nur dann einschalten, wenn Ihr Kunde sie benötigt. Um die Verfügbarkeit des Widgets einzuschränken, fügen Sie einen IP -Filter oder eine Abfrageparamessgrenze hinzu, öffnen Sie eine Dev.* Subdomain usw.

Schlussfolgerung

Dies ist kein Skriptüberwachungsinstrument und liefert nicht automatisch Informationen, wann und wenn das Problem angezeigt wird. Dieser Ansatz funktioniert nur, wenn ein Benutzer oder ein Client einen Fehler meldet und Sie als Entwickler oder QA weitere Informationen zur Bekämpfung des Fehlers benötigen. Stellen Sie sich vor

Ich würde gerne alle Ihre Fragen beantworten! Hinterlassen Sie Ihr Feedback unten!

häufig gestellte Fragen (FAQs) zur Client-Seite-Fehlerberichterstattung mit UsersNap

Wie funktioniert UsersNap für die kundenseitige Fehlerberichterstattung? Es erfasst Screenshots des Problems zusammen mit wichtigen Browserinformationen, die dann an das Entwicklungsteam gesendet werden. Dadurch wird die Notwendigkeit einer Hin- und Her-Kommunikation beseitigt und beschleunigt den Fehlerbehebungsprozess. UserSnap integriert sich auch in beliebte Projektmanagement- und Kommunikationstools für Projektmanagement und Kommunikation und macht es zu einer vielseitigen Lösung für verschiedene Teams. Tool für Fehlerberichterstattung. Dazu gehören Screenshot erfassen, Browserinformationssammlung, Konsolenprotokollaufzeichnung und Benutzerfeedback -Sammlung. Es bietet auch Integrationen mit beliebten Tools wie Slack, Jira und Trello. Darüber hinaus bietet UsSnap eine API für eine weitere Anpassung und Integration in andere Systeme.

Wie kann ich UsersNap in meine Webanwendung integrieren? Sie müssen sich für ein UsersNap -Konto anmelden, ein neues Projekt erstellen und dann den bereitgestellten JavaScript -Code zu Ihrer Webanwendung hinzufügen. Dieser Code lädt das UserSnap -Widget in Ihrer Anwendung, sodass Benutzer Fehler direkt melden können. Sie können die Farbe, den Text und die Position des Widgets so ändern, dass sie Ihrer Marke entspricht. Sie können das Feedback -Formular auch anpassen, um bestimmte Informationen von Ihren Benutzern zu sammeln. All dies kann über das UsersNap -Dashboard oder über die API erfolgen. Bugs, UsersNap hilft Ihnen, Probleme schneller zu identifizieren und zu beheben. Das visuelle Feedback und detaillierte Browserinformationen helfen Ihrem Entwicklungsteam, die Probleme leicht zu verstehen und zu reproduzieren. Dies führt zu schnelleren Fehlerbehebungen und Verbesserungen, wodurch die Gesamtqualität Ihrer Webanwendung verbessert wird. Programmierschnittstellen, mit denen Sie programmgesteuert mit UsersNap interagieren können. Sie können die API verwenden, um Projekte zu erstellen, zu aktualisieren und zu verwalten und das Widget von UsersNap anzupassen. Die API ist erholsam und verwendet Standard -HTTP -Methoden, wodurch es einfach ist, in Ihre vorhandenen Systeme zu integrieren. Das Tool verfolgt die Benutzeraktivität nicht oder sammelt keine personenbezogenen Daten ohne Zustimmung. Alle gesammelten Daten werden sicher gespeichert und nur zum Zwecke der Fehlerberichterstattung verwendet. UsersNap entspricht auch der DSGVO und anderen Datenschutzbestimmungen. Das UsersNap -Widget reagiert und funktioniert gut auf mobilen Geräten. Auf diese Weise können Ihre Benutzer Fehler direkt von ihren mobilen Browsern melden und Ihnen ein wertvolles Feedback zur Verbesserung Ihrer mobilen Webanwendung geben. Für sein visuelles Feedback und detaillierte Browserinformationen, die die Fehlerberichterstattung und die Behebung effizienter gestalten. Es bietet auch eine Reihe von Anpassungsoptionen und Integrationen mit beliebten Tools. Während andere Tools ähnliche Funktionen bieten, machen die Einfachheit und die Vielseitigkeit von Benutzernap für viele Teams eine bevorzugte Wahl. Dies beinhaltet detaillierte Dokumentation, API -Referenz und Beispiele, mit denen Sie beginnen und das Werkzeug optimal nutzen können. UsersNap bietet auch E -Mail -Support für alle Fragen oder Probleme, die Sie möglicherweise haben.

Das obige ist der detaillierte Inhalt vonImplementieren Sie die kundenseitige Fehlerberichterstattung mit UsersNAP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!