因此我们必要特另外改写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 语句中手动上报捕捉的非常。
总结
上述的错误捕捉根基包围了前端监控所需的错误场景,可是第三部门指出的两个其他题目,今朝办理的方法都不太美满。 (编辑:湖南网)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|