window.onerror的总结

发布时间:2025-05-20 16:58:50 发布人:远客网络

window.onerror的总结

一、window.onerror的总结

1、最近一直在做前端js错误监控的工作，在不断的打磨和完善中，发现里面还是知识点不少，现在就前端js错误监控做一些笔记和总结

2、我们知道前端js错误监控主要是利用了window.onerror函数来实现，onerror函数会在页面发生js错误时被调用。

3、我们可以看到函数正常是可以收集到错误字符串信息、发生错误的js文件，错误所在的行数、列数、和Error对象（里面会有调用堆栈信息等）。

4、我们只需要把这些信息回传到server端即可，再配合sourcemap的话我们就可以知道是源码中的哪一行出错了，从而实现完美的错误实时监控系统了。然而要完美还是需要做很多工作的。

5、首先，我们的js文件一般都是和网站不同域的，这是为了提高页面的渲染速度以及架构的可维护性（单独CDN域名，充分利用浏览器http并发数）。这样的js文件中发生错误我们直接监控你会发现你啥信息都收集不到。

6、实验一：我们的站点是 a.com，页面中引用了两个js文件，一个是 a.com域名下的a.js，一个是 b.com域名下的b.js，我们在a.js文件中添加window.onerror监控，在b.js文件中主动抛出错误

7、我们可以看到下图的结果，onerror函数拿到的信息是 Script error, a 0 null，啥卵用都没有，你完全不知道发生了什么错误，哪个文件发生的错误。

8、这是浏览器所做的安全限制措施，当加载自不同域（协议、域名、端口三者任一不同）的脚本中发生语法(?)错误时，为避免信息泄露，语法错误的细节将不会报告，而代之简单的"Script error."。

9、但是我们确实是需要知道发生错误的具体信息啊，不然监控就没有意义了。既然又是类同源限制的问题，那肯定是可以通过 CORS来解决了。

10、实验二：我们给 b.js加上 Access-Control-Allow-Origin:*的response header，后面我们会发现还是没啥变化。

11、实验三：我们继续给 b.js加上 crossorigin属性，发现可以了，想要的信息都收集到了，nice

12、结论：如果想通过onerror函数收集不同域的js错误，我们需要做两件事：

13、注意：以上两步缺一不可。实验二告诉我们，如果只是加上 Access-Control-Allow-Origin:*的话，错误还是无法捕获。如果只加上crossorigin属性，浏览器会报无法加载的错误，如下图

14、如果你使用sentry的raven.js的话，你会发现你什么都不用做，他依然可以帮你捕获到一些错误的非常具体信息，确实是有点神奇啊，具体怎么做的？关键就是raven源码中的install方法中调用的_instrumentTryCatch函数起了作用，他通过tryCatch的方式wrap了一些关键函数，使得这些函数里的报错能够捕获，_instrumentTryCatch的具体实现原理我们后面再说

15、其实如果你真的什么都不做，raven也只是能捕获一些异步错误，同步错误还是无法捕获，所以你即使使用了sentry等第三方的错误收集库，你还是需要加上 Access-Control-Allow-Origin:*和crossorigin属性

16、 What the heck is"Script error"?

二、object error是什么意思

object error中文意思是对象错误的意思：object是对象的意思，所以可以理解为对象错误，目标错误。

单词解释：object是物体，目标。error是错误。

js里面的“对象错误”。一般是看网页的时候弹出，是那个网页自己的问题。请双击IE左下角是不是有个黄色的感叹号弹出对话框，把那个勾去掉。或者“工具- Internet选项-高级-显示每个脚本错误的通知”把它前面的勾去掉。

用其它浏览器比如360，遨游等如果也有这个问题，也要到打开IE来设置！

如果你是网页开发者，要去掉错误提示可以将<script>window.onerror=function(){ return true;}</script>；放在<head></head>；之间即可。

3. object error，这种情况指该程序界面上调用的网页对话框或网页端程序带有js，ajax脚本，但是脚本出错了。原因主要是因为ntfs权限设置不当导致的。

1、浏览到"%ProgramFiles%/Common Files/System目录。

2、右键点击该目录，选择"属性"。

3、在“安全“一栏添加everyone用户，并赋予对该目录的至少可读权限。

软件对象实际上是现实世界对象的造型，因为它同样有状态和行为。一个软件对象利用一个或者多个变量来维持它的状态。变量是由用户标识符来命名的数据项。软件对象用它的方法来执行它的行为。方法是跟对象有关联的函数（子程序）。

对象是理解面向对象技术的关键。用户在学习之前可以看看现实生活中的对象，比如狗、桌子、电视、自行车等等。用户可以发现现实世界中的对象有两个共同特征：它们都有状态和行为。比如狗有自己的状态（比如名字、颜色、生育以及饥饿等等）和行为（比如摇尾巴等等）。

同样自行车也有自己的状态（比如当前档位、两个轮子等等）和行为（比如刹车、加速、减速以及改变档位等等）。

你可以利用软件对象来代表现实世界中的对象。你可能想用一个动画程序来代表现实世界中的狗，或者用可以控制电子自行车的程序来代表现实世界的自行车。比如，事件是一个用在GUI窗口系统的公共对象，它可以代表用户按下鼠标按钮或者键盘上的按键的反应。

三、vscode中的 jsconfig.json

1、问题源头：在webpack模板中，import路径中的@符号意味着什么？

2、目录中存在jsconfig.json文件表示该目录为JavaScript项目的根目录。jsconfig.json文件主要用于定义根文件以及提供JavaScript语言服务的特定功能选项。

3、说明：若项目不涉及JavaScript，则无需特别关注jsconfig.json文件。此文件源自tsconfig.json，是TypeScript的配置文件，设置为允许JavaScript（通过将“allowJs”属性设置为true）。

4、Visual Studio Code的JavaScript支持可运行在两种模式下：当工作空间内存在定义项目上下文的jsconfig.json文件时，JavaScript体验会得到显著改善。因此，当在新工作空间中打开JavaScript文件时，系统会提示创建jsconfig.json文件。

5、定义代码区域（如网站的客户端部分）为JavaScript项目时，需在JavaScript代码的根目录下创建jsconfig.json文件。例如：

6、在复杂项目中，可能需要在工作空间中定义多个jsconfig.json文件以避免混淆，如在客户端和服务器文件夹下的两个单独JavaScript项目。

7、默认情况下，JavaScript语言服务将分析并为JavaScript项目中的所有文件提供IntelliSense功能。但需明确指定需排除或包含的文件，以确保提供正确的IntelliSense。

8、通过设置exclude属性（采用glob模式），可告诉语言服务哪些文件不是源代码的一部分，这有助于保持性能。若发现IntelliSense速度变慢，可将文件夹添加至排除列表（VS代码在检测到速度减慢时会提示执行此操作）。

9、提示：排除构建过程生成的文件（如dist目录）是明智之举，避免建议显示两次并降低IntelliSense速度。

10、使用include属性（同样采用glob模式）可明确设置项目中的文件。若未指定include属性，系统默认包含目录及其子目录中的所有文件；若指定了include属性，则仅包含这些文件。例如：

11、提示：exclude和include中的文件路径需相对于jsconfig.json的位置。

12、jsconfig中的“compilerOptions”用于配置JavaScript语言支持。

13、提示：此属性的存在是因为jsconfig.json是tsconfig.json的后代，后者用于编译TypeScript。

14、noLib不包含默认库文件（lib.d.ts） string-target指定使用的默认库（lib.d.ts），值为“es3”、“es5”、“es6”、“es2015”、“es2016”、“es2017”、“es2018”、“esnext”

15、checkJs启用JavaScript文件的类型检查 boolean true experimentalDecorators提供ES装饰器的实验支持 string allowSyntheticDefaultImports允许默认导入没有默认导出的模块 boolean true baseUrl用于解析非相对模块名称的基目录 string paths指定相对于baseUrl选项计算的路径映射 object见demo

16、要使IntelliSense使用webpack别名，需使用glob模式指定paths键，例如对于别名'ClientApp'（或@）：

17、只要可能，应排除不属于项目源代码的JavaScript文件。

18、提示：若工作空间中无jsconfig.json文件，则默认排除node_modules文件夹。

19、node排除node_modules文件夹 webpack、webpack-dev-server排除内容文件夹，例如dist bower排除bower_components文件夹 ember排除tmp和temp文件夹 jspm排除jspm_packages文件夹

20、当JavaScript项目过大导致性能下降时，通常是由于像node_modules这样的库文件夹所致。若VS Code检测到项目过大，则会提示编辑排除列表。

21、提示：有时难以正确配置jsconfig.json文件，此时可运行“Reload JavaScript Project”命令以重新加载项目并获取更改。

22、使用TypeScript编译器进行低级编译

23、当使用tsc将ES6 JavaScript向下级编译为较旧版本时，jsconfig.json中的以下编译器选项适用：

24、module模块代码生成值为“commonjs”、“system”、“umd”、“amd”、“es6”、“es2015”

25、diagnostics显示诊断信息 boolean

26、emitBOM在输出文件的开头发出UTF-8字节顺序标记（BOM）

27、inlineSourceMap使用源映射发出单个文件，而不是使用单独的文件