用Usernap實現客戶端錯誤報告

鑰匙要點

• >用戶NAP是一種工具，允許用戶通過標記屏幕截圖並在JavaScript控制台中發送所有數據來直接從網站報告錯誤。它可以集成到客戶的網站中以加快錯誤報告和解決。
開發人員還可以使用Usernap來收集服務器端錯誤和日誌。通過使用簡單的類，他們可以記錄調試所需的所有錯誤和日誌，然後可以將其傳遞給UsersNap。這允許更快，更有效的錯誤修復。
用戶還提供了其他信息，例如屏幕尺寸，瀏覽器版本，OS和已安裝的瀏覽器插件。僅在需要時只能打開此功能，並且可以通過IP過濾或打開DEV等方法限制其可用性。
想像以下情況：您的客戶訪問網站（讓我們想像一下），除了預期的結果之外，其他任何東西。正常的反應是打電話給您（最不合適的時間），並要求您盡快解決，因為他們正在虧錢。

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

>

錯誤

>讓我們有一個非常簡單的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錯誤

• …和元數據。
>用於收集此信息的有趣解決方案是用戶。一個可以讓您的用戶標記他們所在網站的屏幕截圖，並向您發送JavaScript控制台中的所有內容。 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應用程序，因此我們跳過了那部分。

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

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

>

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

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

>錯誤和日誌（如上所示）
>註釋的屏幕截圖 - 如果問題比這個簡單的示例
2. 更複雜
屏幕尺寸，瀏覽器版本，OS和瀏覽器中安裝的插件
當然，只有在客戶需要時，您才能打開此功能。要限制小部件的可用性，請添加IP過濾器或查詢參數屏障，打開Dev。 *子域等。

結論

這不是腳本監控工具，不會在出現問題時自動提供信息。只有在用戶或客戶端報告錯誤的情況下，您作為開發人員或QA需要有關如何對抗錯誤的更多信息才能起作用。想像它是遠程調試器，但對於客戶端錯誤事件和您從PHP發送到JavaScript的數據。

我很想回答您的所有問題！在下面留下您的反饋！

經常詢問的問題（常見問題解答）有關用戶

的客戶端錯誤報告

>用戶nap如何用於客戶端錯誤報告？

usernap是一個可視化錯誤跟踪工具，允許用戶直接從其Web應用程序報告錯誤。它通過捕獲問題的屏幕截圖以及重要的瀏覽器信息來起作用，然後將其發送給開發團隊。這消除了來回通信的需求，並加快了錯誤修復過程。 userSNap還與流行的項目管理和通信工具集成在一起，使其成為各個團隊的多功能解決方案。

> usersNap的關鍵功能是什麼？

用於錯誤報告的工具。其中包括屏幕截圖捕獲，瀏覽器信息收集，控制台日誌記錄和用戶反饋收集。它還提供了與Slack，Jira和Trello等流行工具等流行工具的集成。此外，Usernap還提供了用於與其他系統的進一步自定義和集成的API。

>如何將usernap集成到我的Web應用程序中？

>將用戶NAP集成到您的Web應用程序中很簡單。您需要註冊一個用戶NAP帳戶，創建一個新項目，然後將提供的JavaScript代碼添加到您的Web應用程序中。此代碼將在您的應用程序上加載usernap窗口小部件，允許用戶直接報告錯誤。

我可以自定義usersnap widtget？

是，是的，用戶nusernap為widget提供了一系列自定義選項。您可以更改小部件的顏色，文字和位置，以匹配您的品牌。您還可以自定義反饋表格，以收集用戶的特定信息。所有這些都可以通過UsersNap儀表板或通過API完成。

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

>

什麼是UsersNap API，我該如何使用它？

>編程接口，使您可以通過編程方式與用戶互動。您可以使用API​​來創建，更新和管理項目，以及自定義UsersNap小部件。 API是恢復的，使用標準的HTTP方法，使其易於與您現有系統集成。

>

> usersNap如何處理用戶隱私？

用戶nap認真對待用戶隱私。未經同意，該工具不會跟踪用戶活動或收集個人數據。所有收集的數據均已安全存儲，僅用於錯誤報告目的。 usernap還符合GDPR和其他隱私法規。

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

>是的，usersNap支持移動錯誤報告。 UsersNap小部件響應迅速，在移動設備上運行良好。這使您的用戶可以直接從其移動瀏覽器報告錯誤，從而為您提供有價值的反饋，以改善移動Web應用程序。

>

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

用戶nap提供了什麼支持？

usernap為其用戶提供全面的支持。這包括詳細的文檔，API參考和示例，以幫助您開始並充分利用工具。 usersNap還為您可能遇到的任何查詢或問題提供電子郵件支持。 >

以上是用Usernap實現客戶端錯誤報告的詳細內容。更多資訊請關注PHP中文網其他相關文章！