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

注意：您将在真实框架中的视图模板中执行此操作，但是由于我们在这里不使用真实的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>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>

>您可以看到输出。是的，问题在那里。显然有一个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> 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>

您的客户只需要单击一次按钮，您将获得更快地对抗错误所需的一切：

>错误和日志（如上所示）
>注释的屏幕截图 - 如果问题比这个简单的示例
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中文网其他相关文章！