Imagine the following scenario: your clients visit the website (let’s imagine this one) and see anything but the expected result. The normal reaction is to call you (at the most inappropriate time) and ask you to fix it ASAP, because they’re losing money.
想象一下以下情形：您的客户访问网站(让我们想象这一个 )，看到什么，但预期的结果。 通常的React是(在最不适当的时间)打电话给您，并要求您尽快修复，因为他们正在赔钱。
How can we help the user report the bug as accurately as possible?
我们如何帮助用户尽可能准确地报告错误？
Let’s have a really simple JSON request and an error to be able to reproduce our case:
让我们有一个非常简单的JSON请求和一个错误，以重现我们的案例：
$json_data = '{"value":1,"apples":2,"name":3,"oranges":4,"last one":5}'; //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 $ch = curl_init('http://talkweb.eu/labs/fr/json_callback.php'); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST"); curl_setopt($ch, CURLOPT_POSTFIELDS, $json_data); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_HTTPHEADER, array( 'Content-Type: application/json', 'Content-Length: ' . strlen($json_data))); //the normal CURL request, nothing strange here: $result = curl_exec($ch); //receiving the data back $f_data = json_decode($result,true); //showing a greeting with the output echo “Welcome”. $f_data['username'];If you visit the test website now, you will notice that there’s a problem.
如果您现在访问测试网站，您会发现有问题。
The question is – how can the client report it faster with all the data you need to fight the bug:
问题是–客户端如何解决与错误相关的所有数据，从而更快地报告错误：
Json data, 杰森数据， Server-side Javascript and XmlHttpsRequest errors, 服务器端Javascript和XmlHttpsRequest错误， Some core PHP errors 一些核心PHP错误 …and meta data. …以及元数据。An interesting solution for gathering this information is UserSnap. A widget that lets your users mark up a screenshot of the site they’re on and send you everything that’s in the JavaScript console. PHP errors don’t end up there, though, do they? Let’s make them. First, we’ll gather the server side errors.
收集此信息的一个有趣的解决方案是UserSnap。 一个小部件，可让您的用户标记他们所访问的网站的屏幕截图，并将JavaScript控制台中的所有内容发送给您。 但是，PHP错误并没有就此结束，对吗？ 让我们做。 首先，我们将收集服务器端错误。
Let’s add some more code to the example in order to see how we can collect the data we need. Introducing a really simple class to help us:
让我们在示例中添加更多代码，以了解如何收集所需的数据。 介绍一个非常简单的类来帮助我们：
<? class SendToUsersnap { var $m; //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. function log ( $data, $type ) { if( is_array( $data ) || is_object( $data ) ) { $this->m[]= "console.".$type."('PHP: ".json_encode($data)."');"; } else { $this->m[] = "console.".$type."('PHP: ".$data."');"; } } // Print all logs that have been set from the previous function. Let’s keep it simple. function out (){ for ($i=0;$i<count($this->m);$i++) { echo $this->m[$i]."\n"; } } }Now let’s use this class to record all errors and logs we may need.
现在，让我们使用此类来记录我们可能需要的所有错误和日志。
require_once('Usersnap.class.php'); $s = new SendToUsersnap; $json_data = '{"value":1,"apples":2,"name":3,"oranges":4,"last one":5}'; $s->log('Initializing the JSON request',"info"); $s->log($json_data,"log"); $ch = curl_init('http://talkweb.eu/labs/fr/json_callback.php'); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST"); curl_setopt($ch, CURLOPT_POSTFIELDS, $json_data); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_HTTPHEADER, array( 'Content-Type: application/json', 'Content-Length: ' . strlen($json_data))); $result = curl_exec($ch); $f_data = json_decode($result,true); echo 'Welcome'. $f_data['usersname']; $s->log($f_data,"log"); $s->log(error_get_last(),"error");Let’s add the UserSnap code snippet at the end of our page and see what happens. (You may need an account to use this widget. Usersnap offers free licenses for Open Source projects and a free testing period for commercial ones.
让我们在页面末尾添加UserSnap代码片段，看看会发生什么。 (您可能需要一个帐户才能使用此小部件。Usersnap为开源项目提供免费许可证 ，为商业项目提供免费测试期限 。
<script type="text/javascript"> (function() { var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = '//api.usersnap.com/load/'+ 'your-api-key-here.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })(); var _usersnapconfig = { loadHandler: function() { <?php //just print all errors collected from the buffer. $s->out(); ?> } }; </script>Note: You would do this in a view template in a real framework, but as we’re not using a real MVC app here, we’re skipping that part.
注意：您可以在真实框架中的视图模板中执行此操作，但是由于此处未使用真实的MVC应用程序，因此我们跳过了这一部分。
The user will see a “report bug” button on the page and will write you a message like “it’s not working, fix it asap”. Generally, this would be useless information, but this time, we get this gorgeous error log attached, too:
用户将在页面上看到一个“报告错误”按钮，并将向您发送一条消息，例如“它不起作用，请尽快修复”。 通常，这将是无用的信息，但是这次，我们也获得了此华丽的错误日志：
Now you can see that there is initialization in place:
现在您可以看到已进行初始化：
$s->log('Initializing the JSON request',"info");You can see the data we will send – the same as usual
您可以看到我们将发送的数据–与往常一样
$s->log($json_data,"log");And you can see the output. Yes, the problem is there. Obviously there is an auth problem.
您可以看到输出。 是的，问题就在那里。 显然有一个身份验证问题。
$s->log($f_data,"log");You can get even the core PHP errors to help you with the debugging.
您甚至可以获得核心PHP错误，以帮助您进行调试。
$s->log(error_get_last(),"error");Your client will only have to click the button once and you will get everything you need to fight the bug faster:
您的客户只需单击一次按钮，您将获得解决该错误所需的一切：
Errors and Logs (as shown above) 错误和日志(如上所示) Annotated screenshot – if the problem is more complex than this simple example 带注释的屏幕截图–如果问题比这个简单示例更复杂 Screen size, Browser version, OS and the plugins installed in the browser 屏幕尺寸，浏览器版本，操作系统和浏览器中安装的插件Of course you can turn this feature on only when your client needs it. To limit the availability of the widget, add an IP filter or a query param barrier, open a dev.* subdomain, etc.
当然，只有在客户需要时才能打开此功能。 要限制窗口小部件的可用性，请添加IP过滤器或查询参数屏障，打开dev。*子域等。
This is not a script-monitoring tool and will not deliver information automatically when and if the problem appears. This approach will work only if an user or a client reports a bug and you as a developer or QA need more info on how to fight the bug. Imagine it as a remote debugger, but for client-side errors + events and data you send from PHP to JavaScript.
这不是脚本监视工具，当问题出现时，也不会自动提供信息。 仅当用户或客户报告错误并且您作为开发人员或质量检查人员需要有关如何解决该错误的更多信息时，此方法才有效。 可以将其想象为一个远程调试器，但是对于从PHP发送到JavaScript的客户端错误，事件和数据。
I’d love to answer all of your questions! Leave your feedback below!
我很想回答您的所有问题！ 在下面留下您的反馈！
翻译自: https://www.sitepoint.com/implement-client-side-bug-reporting-usersnap/
