用Usernap實現客戶端錯誤報告-php教程-PHP中文網

鑰匙要點

>通過為用戶提供一種簡單有效的方式，用戶如何幫助用戶報告報告，用戶如何幫助提高我的Web應用程序的質量？錯誤，用戶NAP可幫助您更快地識別和解決問題。視覺反饋和詳細的瀏覽器信息可幫助您的開發團隊輕鬆理解和復制問題。這會導致更快的錯誤修復和改進，從而提高您的Web應用程序的整體質量。

>我可以將用戶nap用於移動錯誤報告嗎？

>用戶nap與其他錯誤報告工具相比如何？有關其視覺反饋和詳細的瀏覽器信息，這使錯誤報告和修復更有效。它還提供了一系列自定義選項和與流行工具的集成。雖然其他工具可能會提供類似的功能，但Usernap的簡單性和多功能性使其成為許多團隊的首選選擇。

首頁

後端開發

php教程

用Usernap實現客戶端錯誤報告

Christopher Nolan

Feb 20, 2025 pm 12:33 PM

用Usernap實現客戶端錯誤報告

鑰匙要點

>用戶NAP是一種工具，允許用戶通過標記屏幕截圖並在JavaScript控制台中發送所有數據來直接從網站報告錯誤。它可以集成到客戶的網站中以加快錯誤報告和解決。

>我們如何幫助用戶盡可能準確地報告錯誤？

錯誤

>讓我們有一個非常簡單的JSON請求和一個錯誤，以便能夠重現我們的案件：>

如果您立即訪問測試網站，您會注意到存在問題。

的問題是 - 客戶如何使用與錯誤對抗的所有數據更快地報告：>

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

登入後複製

> JSON數據，

>服務器端JavaScript和XMLHTTPSREQUEST錯誤，

一些核心PHP錯誤

…和元數據。
>

現在，讓我們使用此類記錄所有可能需要的錯誤和日誌。 >

將其傳遞給UsersNap

>讓我們在頁面末尾添加Usernap代碼段，看看會發生什麼。（您可能需要一個帳戶才能使用此窗口小部件。AuserNap為開源項目提供免費許可證，並為商業項目提供免費測試期。

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

登入後複製

注意：您將在真實框架中的視圖模板中執行此操作，但是由於我們在這裡不使用真實的MVC應用程序，因此我們跳過了那部分。

>用戶將在頁面上看到一個“報告錯誤”按鈕，並將給您寫一條諸如“它不起作用，盡快修復”之類的消息。通常，這將是無用的信息，但是這次，我們也附上了此華麗的錯誤日誌：>

用Usernap實現客戶端錯誤報告

>現在您可以看到已經有初始化：

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

登入後複製

您可以看到我們將發送的數據 - 與往常一樣

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

登入後複製

>您可以看到輸出。是的，問題在那裡。顯然有一個auth問題。

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

登入後複製

>您甚至可以獲得核心PHP錯誤來幫助您進行調試。

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

登入後複製

您的客戶只需要單擊一次按鈕，您將獲得更快地對抗錯誤所需的一切：