先创建公共文件error-reported.js 内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
/** * 获取前端错误信息进行上报 * @param iframe */ export function catchError (iframe) { let _this = this || window let source = '来自外层框架错误信息：' if (iframe) { _this = iframe.contentWindow source = '来自iframe内部错误信息：' } _this?.addEventListener('error', function (event) { let errorMessage = event && event.message let errrorType = event && event.type let errorStack = event && event.error && event.error.stack let errorLineno = event && event.lineno let errorColno = event && event.colno let errorHref = event && event.target && event.target.location && event.target.location.href let errorPathname = event && event.target && event.target.location && event.target.location.pathname let errorParams = event && event.target && event.target.location && event.target.location.search let errorOrigin = event && event.target && event.target.location && event.target.location.origin let errorSrcElement = event && event.srcElement && event.srcElement.src // 可忽略错误，不会在控制台打印，不会中断程序 if (errorMessage === 'ResizeObserver loop limit exceeded') return let errorInfo = { source: source, // 报错来源，来自iframe内还是外层 errorMessage: errorMessage || '', // 报错信息，对应message errrorType: errrorType || '', // 报错类型，对应type errorStack: errorStack || '', // 报错定位信息，对应error->stack errorLineno: errorLineno || '', // 报错行号，对应lineno errorColno: errorColno || '', // 报错列号，对应colno errorHref: errorHref || '', // 报错完整页面url，对应target->location->href errorPathname: errorPathname || '', // 报错路径，对应target->location->pathname errorParams: errorParams || '', // 报错路径参数，对应target->location->search errorOrigin: errorOrigin || '', // 报错域，对应target->location->origin errorSrcElement: errorSrcElement || '', // 资源加载错误，对应target->srcElement->src } const info = window.JSON.stringify(errorInfo); (new Image()).src = `/api/error/report?data=${info}`; }, true) } |
然后在入口文件最前面引入error-reported.js
本文项目背景：使用art-template模板引擎建立了公共框架，使用iframe进行页面套用。所以整个系统分为两部分，一部分是外层框架部分，一部分是iframe子页面部分。
监控也分为两部分：
1.外层框架错误监控
2.子页面iframe错误监控
外层框架直接在引用error-reported.js 的下面调用catchError方法即可，如：
|
1 2 3 4 5 6 |
<!-- strat 前端错误上报 --> <script src="error-reported.js"></script> <script> <span style="color: #008000;"><strong>catchError()</strong></span> </script> <!-- end 前端错误上报 --> |
内部iframe需要首先检测iframe是否已创建实例，再使用new操作符调用catchError方法，如：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var iframe = document.getElementsByClassName("content-iframe")[0] var loadingBox = document.getElementsByClassName("content-loading-box")[0] if (iframe) { <span style="color: #008000;"><strong> new catchError(iframe)</strong></span> if (iframe.attachEvent) { // IE iframe.attachEvent("onload", function () { // TODO 关闭loading动画 }) } else { // 非IE iframe.onload = function () { // TODO 关闭loading动画 } } } |
