|
因此我们需要额外的改写xhr的open方法，将传入的url记录下来，方便上报时带上。
- var _oldOpen = xmlhttp.prototype.open;
- // 重写open方法,记录请求的url
- xmlhttp.prototype.open = function (method, url) {
- _oldOpen.apply(this, arguments);
- this.ajaxUrl = url;
- };
其他问题
1、其他框架，例如vue项目的错误捕获
vue内部发生的错误会被Vue拦截，因此vue提供方法给我们处理vue组件内部发生的错误。
- Vue.config.errorHandler = function (err, vm, info) { // handle error // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子 // 只在 2.2.0+ 可用}
2、script error的解决方式
"script error.”有时也被称为跨域错误。当网站请求并执行一个托管在第三方域名下的脚本时，就可能遇到该错误。最常见的情形是使用 CDN 托管 JS 资源。
其实这并不是一个 JavaScript Bug。出于安全考虑，浏览器会刻意隐藏其他域的 JS 文件抛出的具体错误信息，这样做可以有效避免敏感信息无意中被不受控制的第三方脚本捕获。
因此，浏览器只允许同域下的脚本捕获具体错误信息，而其他脚本只知道发生了一个错误，但无法获知错误的具体内容。
解决方案1：（推荐）
添加 crossorigin="anonymous" 属性。
- <script src="http://another-domain.com/app.js" crossorigin="anonymous"></script>
此步骤的作用是告知浏览器以匿名方式获取目标脚本。这意味着请求脚本时不会向服务端发送潜在的用户身份信息（例如 Cookies、HTTP 证书等）。
添加跨域 HTTP 响应头：
- Access-Control-Allow-Origin: *
或者
- Access-Control-Allow-Origin: http://test.com
注意：大部分主流 CDN 默认添加了 Access-Control-Allow-Origin 属性。
完成上述两步之后，即可通过 window.onerror 捕获跨域脚本的报错信息。
解决方案2
难以在 HTTP 请求响应头中添加跨域属性时，还可以考虑 try catch 这个备选方案。
在如下示例 HTML 页面中加入 try catch：
- <!doctype html>
- <html>
- <head>
- <title>Test page in http://test.com</title>
- </head>
- <body>
- <script src="http://another-domain.com/app.js"></script>
- // app.js里面有一个foo方法，调用了不存在的bar方法
- <script>
- window.onerror = function (message, url, line, column, error) {
- console.log(message, url, line, column, error);
- }
- try {
- foo();
- } catch (e) {
- console.log(e);
-
- throw e;
- }
- </script>
- </body>
- </html>
-
- // 运行输出结果如下：
-
- => ReferenceError: bar is not defined
- at foo (http://another-domain.com/app.js:2:3)
- at http://test.com/:15:3
- => "Script error.", "", 0, 0, undefined
可见 try catch 中的 Console 语句输出了完整的信息，但 window.onerror 中只能捕获“Script error”。根据这个特点，可以在 catch 语句中手动上报捕获的异常。
总结
上述的错误捕获基本覆盖了前端监控所需的错误场景，但是第三部分指出的两个其他问题，目前解决的方式都不太完美。 （编辑：PHP编程网 - 黄冈站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
浙公网安备 33038102330482号