[英]Error-logging for javascript on client side
My project which contains a lot of pages with forms. 我的项目包含很多带有表单的页面。 This is a backend of banking CRM system, so any error during working process is to be captured and investigated. 这是银行CRM系统的后端,因此可以捕获和调查工作过程中的任何错误。 On the server side we have enhanced java exceptions system, but if error occurs on client side - javascript the only info we now get is an js-error window in IE or sometimes a screenshot of page made by advanced user. 在服务器端,我们有增强的java异常系统,但是如果在客户端发生错误 - javascript我们现在获得的唯一信息是IE中的js-error窗口,或者有时是高级用户制作的页面截图。
Javascript code contains both Jquery-powered UI extensions and hard-coded inline event handlers and functions. Javascript代码包含Jquery支持的UI扩展和硬编码的内联事件处理程序和函数。
So I am asking whether any approach for capturing js-errors of any kind could be used? 所以我问是否可以使用任何捕获任何类型的js-errors的方法? some additional library or something that could give me a stacktrace like firebug in Mozilla or web-console in Chrome? 一些额外的库或某些东西可以给我一个像Mozilla中的firebug或Chrome中的web控制台的堆栈跟踪?
Look into window.onerror
. 查看window.onerror
。 If you want to capture any errors, and report them to the server, then you could try an AJAX request, perhaps. 如果您想捕获任何错误并将它们报告给服务器,那么您可以尝试使用AJAX请求。
window.onerror = function(errorMessage, errorUrl, errorLine) {
jQuery.ajax({
type: 'POST',
url: 'jserror.jsf',
data: {
msg: errorMessage,
url: errorUrl,
line: errorLine
},
success: function() {
if (console && console.log) {
console.log('JS error report successful.');
}
},
error: function() {
if (console && console.error) {
console.error('JS error report submission failed!');
}
}
});
// Prevent firing of default error handler.
return true;
}
Disclaimer: I'm CEO and creator of Sentry , an open source and paid service which does crash reporting for many languages, including Javascript. 免责声明:我是Sentry的首席执行官和创始人,这是一种开源和付费服务,可以为许多语言(包括Javascript)进行崩溃报告。
It can be pretty challenging to capture frontend exceptions. 捕获前端异常可能非常具有挑战性。 Technology has gotten better (browser JS engines), but there's still a lot of limitations. 技术已经变得更好(浏览器JS引擎),但仍有很多局限性。
window.onerror
for various reasons (mostly because browsers historically give bad information here). 由于各种原因你不能依赖window.onerror
(主要是因为浏览器历史上在这里提供了不好的信息)。 What we do in the raven.js client (which is based on TraceKit) is patch a number of functions to wrap them in try/catch statements. 我们在raven.js客户端(基于TraceKit)中所做的是修补许多函数来将它们包装在try / catch语句中。 For example, window.setTimeout
. 例如, window.setTimeout
。 With this we're able to install error handlers that will generate full stacktraces in most browsers. 有了这个,我们就可以安装错误处理程序,在大多数浏览器中生成完整的堆栈跟踪。 Some things you should be aware of on the server: 您应该在服务器上注意的一些事项:
If you want to do painless implementation just put up this guys javascript code in your app. 如果你想做无痛的实现,只需在你的应用程序中放置这个人的javascript代码。 Else If you want to implement one, then try this to get the stacktrace on window
error
and you can use ajax
to report the errors. 否则如果你想实现一个,那么试试这个以获得window
error
的堆栈跟踪,你可以使用ajax
来报告错误。 A nice way to track errors reported by olark 跟踪olark报告的错误的好方法
http://exceptionhub.com Should to the trick. http://exceptionhub.com应该诀窍。 http://errorception.com/ Does not provide as much information for debugging, but also seems nice. http://errorception.com/不提供调试信息,但也很好看。
proxino don't seem to know what they are doing, they where incuding a complete jQuery in their logger code to log onerror events last time i checked. proxino似乎不知道他们在做什么,他们在他们的记录器代码中包含一个完整的jQuery来记录我上次检查时的错误事件。 I wouldn't trust a service that has so little grasp of client side JavaScript to log my JavaScript errors. 我不相信一个对客户端JavaScript很少掌握的服务来记录我的JavaScript错误。
I recommend to use JsLog.me service 我建议使用JsLog.me服务
It can capture whole console output in addition to errors and stacktraces. 除了错误和堆栈跟踪之外,它还可以捕获整个控制台输出。 We use it in our projects, logging whole console log helps our QA team to record issue-reproduction way. 我们在项目中使用它,记录整个控制台日志有助于我们的QA团队记录问题再现方式。 Also, it works well with large JSON objects like in Chrome console, and has a search. 此外,它适用于Chrome控制台中的大型JSON对象,并且具有搜索功能。
If your website is using Google Analytics, you can do what I do: 如果您的网站使用的是Google Analytics,您可以执行以下操作:
window.onerror = function(message, source, lineno, colno, error) {
if (error) message = error.stack;
ga('send', 'event', 'window.onerror', message, navigator.userAgent);
}
A few comments on the code above: 关于上面代码的一些评论:
Once the code is in place, this is how you view your users' Javascript errors: 代码到位后,您就可以查看用户的Javascript错误:
Behavior
section and then the Top Events
report. 在Google Analytics中,点击“ Behavior
部分,然后点击“ Top Events
报告。 window.onerror
in the list. 单击列表中的window.onerror
。 Secondary dimension
button and entering Event Label
in the textbox that appears. 通过单击“ Secondary dimension
按钮并在显示的文本框中输入“ Event Label
,为用户的操作系统/浏览器版本添加一列报告。 Atatus captures JavaScript errors and also captures the user actions that preceded the error. Atatus捕获JavaScript错误并捕获错误之前的用户操作。 This would help in better understanding of the error. 这有助于更好地理解错误。 Atatus helps you in monitoring your frontend, not just for errors, but also its performance(Real User Monitoring) Atatus帮助您监控前端,不仅仅是出错,还有其性能(真实用户监控)
https://www.atatus.com/ https://www.atatus.com/
Disclaimer: I'm a web developer at Atatus. 免责声明:我是Atatus的网络开发人员。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.