如何记录客户端JavaScript错误

最新推荐文章于 2021-12-25 20:48:08 发布

culiu9261

最新推荐文章于 2021-12-25 20:48:08 发布

阅读量312

点赞数

文章标签： java python css php js ViewUI

原文链接：https://scotch.io/tutorials/how-to-log-client-side-javascript-errors

版权

Over the last few years, browsers got some super powers. They evolved from simple viewers for HTML & CSS to platforms executing our beloved web applications.

在过去的几年中，浏览器获得了一些强大的功能。它们从用于HTML和CSS的简单查看器演变成执行我们喜爱的Web应用程序的平台。

This is opening the doors for developers to do incredible things. And this is awesome. However, there is one big challenge that comes with every new shiny application.

这为开发人员做不可思议的事情打开了大门。这太棒了。但是，每一个新的闪亮应用程序都面临着一个巨大的挑战。

With everything that is new, chances are high for bugs and issues to occur.

对于所有新内容，错误和问题发生的可能性很高。

With Usersnap, I’ve found a great solution for that: its console log recorder enables me to record client-side JavaScript errors. One by one.

使用Usersnap ，我找到了一个很好的解决方案：它的控制台日志记录器使我能够记录客户端JavaScript错误。逐个。

In this tutorial, I’ll walk you through the process of setting up the client-side of JavaScript error logging.

在本教程中，我将引导您完成设置JavaScript错误日志记录客户端的过程。

复杂JavaScript错误 (Complex JavaScript Bugs)

There are a couple of reasons why client-side JavaScript errors have become more and more important to log than ever before.

客户端JavaScript错误在日志记录中变得比以往任何时候都重要的原因有两个。

First, JavaScript is the most popular programming language of the web. With new JavaScript libraries going mainstream every day, developers are demonstrating that almost everything is possible inside browsers.

首先，JavaScript是网络上最流行的编程语言。随着新JavaScript库每天都成为主流，开发人员正在证明浏览器内部几乎所有功能都是可能的。

为什么需要记录JavaScript错误？ ( Why do you need to log JavaScript errors? )

The short answer is: Because writing good code is hard. And reproducing client-side errors is even harder.

简短的答案是：因为编写好的代码很难。再现客户端错误更加困难。

Especially if you’re using non-trivial JavaScript in your code base, you will have a hard time finding those bugs. Just think about all these different browser versions and devices for a moment.

尤其是如果您在代码库中使用非平凡JavaScript，您将很难找到这些错误。暂时考虑一下所有这些不同的浏览器版本和设备。

Let’s keep this short. Too few websites log JavaScript errors. – Karl Seguin

让我们保持简短。很少网站记录JavaScript错误。 – 卡尔·塞金（ Karl Seguin）

客户端错误的问题 ( The problem of client-side errors )

The basic problems of client-side JavaScript errors are:

客户端JavaScript错误的基本问题是：

The user does something on your website, e.g. clicking on a button
用户在您的网站上做某事，例如单击一个按钮
The button does not do what it should (like linking to another page)
该按钮没有执行其应有的功能（例如链接到另一个页面）
There is no error message displayed to the user.
没有错误消息显示给用户。
The developer console does not contain information with error logs
开发者控制台不包含带有错误日志的信息
Because the bug appears on the client-side, the developer in charge will have a hard time finding and fixing it.
由于该错误出现在客户端，因此负责开发的人员将很难找到并修复它。

At this point, you probably agree that it is time for a way to attach the console output to get high quality bug reports.

在这一点上，您可能已经同意，现在是一种附加控制台输出以获得高质量错误报告的方法了。

用户小憩控制台录像机 ( Usersnap console recorder )

With the use of the Usersnap console recorder I found a great solution for recording, reproducing and fixing front end errors.

通过使用Usersnap控制台记录器，我发现了一个很好的解决方案，用于记录，再现和修复前端错误。

Basically, the Usersnap Console Recorder is a tool to record every front end error, such as XHR traces, JavaScript exceptions, etc.).

基本上，Usersnap Console Recorder是用于记录每个前端错误（例如XHR跟踪，JavaScript异常等）的工具。

And it sends this information along with an annotated screenshot to the developer of the site.

并将此信息以及带注释的屏幕快照发送给站点的开发人员。

如何记录客户端JavaScript错误？ ( How to log client-side JavaScript errors? )

The set up process for the Usersnap console recorder is simple:

Usersnap控制台记录器的设置过程很简单：

Create a Usersnap account (free trials available)
创建一个Usersnap帐户（免费试用版）
Embed a JavaScript snippet on your site or inside your web app
在您的网站或网络应用程序内嵌入JavaScript代码段
Activate the console recorder
激活控制台记录器
You’re done.
你完成了。

1.创建一个新的Usersnap帐户 (1. Create a new Usersnap account)

You can sign up for a free Usersnap trial here. Create a first project and add the URLs you want to track.

您可以在此处注册免费的Usersnap试用。创建第一个项目，然后添加要跟踪的URL。

2.嵌入JavaScript代码段 (2. Embed the JavaScript snippet)

After creating your first project, you need to add the URLs of your site and embed the Usersnap widget.

创建第一个项目后，您需要添加站点的URL并嵌入Usersnap小部件。

It’s pretty simple and there are also available plugins for various CMS available.

这非常简单，并且还有适用于各种CMS的可用插件。

After you embed the javascript widget on your site or app, you’ll see a little feedback button on your site.

将javascript小部件嵌入网站或应用后，您会在网站上看到一个小的反馈按钮。

3.激活控制台记录器 (3. Activate the console recorder)

The feedback button is fully customizable in the project settings.

反馈按钮可在项目设置中完全自定义。

Enabling the console recorder is very easy. Open the widget configuration tab in the project settings and click on "change color and features of the widget".

启用控制台记录器非常容易。在项目设置中打开窗口小部件配置选项卡，然后单击“更改窗口小部件的颜色和功能”。

Enable the console recorder feature by clicking on the on/off checkbox.

通过单击打开/关闭复选框来启用控制台记录器功能。

Every submitted report will now contain the log output in the Usersnap dashboard.

现在，每个提交的报告将在Usersnap仪表板中包含日志输出。

4.接收客户端错误 (4. Receive client-side errors)

You’re done. Every created bug report with the embedded Usersnap feedback widget will now attach client-side errors as well.

你完成了。现在，每个带有嵌入式Usersnap反馈小部件的已创建错误报告也将附加客户端错误。

In our example below, we see that there is an error Uncaught SyntaxError: Unexpected token {. We also see the call stack, and it looks like JSON.parse method failed.

在下面的示例中，我们看到错误Uncaught SyntaxError: Unexpected token { 。我们还看到了调用堆栈，并且看起来JSON.parse方法失败了。

Imagine that this JSON was generated specifically for a client’s account. Without this error log the only way to reproduce the issue would be to log into your user’s account and repeat the same actions your user made. In most cases this isn't possible.

想象一下，该JSON是专门为客户的帐户生成的。没有此错误日志，重现此问题的唯一方法是登录用户帐户并重复用户执行的相同操作。在大多数情况下，这是不可能的。

局限性 (Limitations)

According to my experience the console recorder works with every modern web framework out of the box.

根据我的经验，控制台记录器可以立即使用每个现代Web框架。

However, there are some limitations listed on in the documentation of the console recorder.

但是，控制台记录器的文档中列出了一些限制。

Errors which occur very early (e.g. a body onload function which fails) could be missed by the recorder. Usersnap is loaded asynchronously to not hit your page loading time and therefore this might be missed.

记录器可能会错过很早发生的错误（例如，车身加载功能失败）。异步加载Usersnap不会影响您的页面加载时间，因此可能会错过它。

它甚至可以与AngularJS一起使用 ( It even works with AngularJS )

If you are using AngularJS, the console recorder needs a little modification from your end.

如果您使用的是AngularJS，则控制台记录器需要从头进行一些修改。

If you add this library to your Angular JS project you’ll get AngularJS errors attached to your bug reports with the console recorder.

如果将此库添加到Angular JS项目，则控制台记录器将在您的错误报告中附带AngularJS错误。

Inject it into your dependencies in your main app like this:

像这样将其注入到主应用程序的依赖项中：

angular.module('yourapp', ["usersnapLogging”])

结论 ( Conclusion )

In most cases, we cannot access our user’s account in order to reproduce certain issues. The debugging of such client-side errors might take hours or even days.

在大多数情况下，我们无法访问我们的用户帐户以重现某些问题。此类客户端错误的调试可能要花费数小时甚至数天。

The Usersnap console recorder fixes this problem and hands us the information we need to have.

Usersnap控制台记录器可以解决此问题，并向我们提供所需的信息。

As a developer, I’m now able to solve such client-side errors quickly. And most importantly, without spending too much time on finding my client's bugs.

作为开发人员，我现在能够快速解决此类客户端错误。最重要的是，无需花费太多时间查找客户的错误。