前端错误收集的关键在于及时发现并处理隐藏的bug，主要通过window.onerror全局捕获、try...catch局部捕获、promise.reject捕获、window.addeventlistener('error')捕获资源加载错误等方式实现；处理跨域脚本错误需服务器端配置cors并为script标签添加crossorigin属性；错误分类可依据类型、来源、级别和用户行为进行区分，并根据不同类型采取相应处理策略；vue中使用errorhandler和errorcaptured，react中使用componentdidcatch或react-error-boundary进行框架内错误监控；上报错误信息可通过xmlhttprequest、fetch或image方式发送到后端，包含错误类型、堆栈、时间、用户信息、浏览器及页面url等关键数据；使用sourcemap定位压缩代码错误需生成并上传sourcemap文件、配置错误监控系统解析原始堆栈，同时注意保护源码信息不泄露。
JS前端错误收集，关键在于及时发现并处理那些隐藏在代码深处的bug，提升用户体验。下面介绍几种常见的错误监控方案，希望能帮助你构建更健壮的前端应用。
解决方案
前端错误收集主要通过以下几种方式实现：
立即学习“前端免费学习笔记（深入）”；
-
window.onerror全局捕获：这是最基础的错误捕获方式，可以捕获大部分JavaScript运行时错误。但它无法捕获语法错误和跨域脚本错误（需要配置CORS）。 -
try...catch局部捕获：用于包裹可能出错的代码块，例如异步请求、JSON解析等。可以更精确地定位错误，并进行相应的处理。 -
Promise.reject捕获：对于Promise链中的错误，可以通过.catch()方法捕获。或者使用unhandledrejection事件监听未处理的Promise rejection。 -
window.addEventListener('error', ...)捕获资源加载错误：用于捕获图片、CSS、JS等资源加载失败的错误。
结合以上几种方式，可以构建一个较为完善的前端错误监控体系。收集到的错误信息可以发送到后端服务器，进行分析和处理。
如何处理跨域脚本错误？
跨域脚本错误是前端错误监控中一个常见的问题。由于浏览器的安全限制，window.onerror 默认无法捕获跨域脚本的详细错误信息，只会显示 "Script error."。要解决这个问题，需要进行以下两步：
-
服务器端配置 CORS：在服务器端设置
Access-Control-Allow-Origin响应头，允许你的域名访问该脚本。例如，Access-Control-Allow-Origin: *允许所有域名访问。 -
HTML 引入 script 标签时添加
crossorigin属性：例如，。crossorigin属性告诉浏览器使用 CORS 机制请求该脚本。
完成以上两步后，window.onerror 就可以捕获跨域脚本的详细错误信息了。需要注意的是，CORS 配置必须正确，否则可能导致脚本无法加载。
如何区分不同类型的错误，并进行分类处理？
错误类型多种多样，例如语法错误、运行时错误、资源加载错误、Promise rejection 等。为了更好地分析和处理错误，需要对它们进行分类。可以根据以下几个方面进行分类：
-
错误类型：例如，
EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError等。 - 错误来源：例如，来自哪个文件、哪个函数、哪一行代码。
- 错误级别：例如，warning、error、fatal。
- 用户行为：例如，用户点击了哪个按钮、输入了什么内容。
在 window.onerror 中，可以根据 error 对象的 name 和 message 属性来判断错误类型。对于资源加载错误，可以通过 event.target 获取资源类型和 URL。对于 Promise rejection，可以通过 event.reason 获取 rejection 的原因。
分类后，可以根据不同的错误类型进行不同的处理。例如，对于语法错误，可以直接修复代码；对于运行时错误，可以尝试重试或降级；对于资源加载错误，可以尝试加载备用资源或显示错误提示。
如何在 Vue 或 React 等框架中进行错误监控？
在 Vue 或 React 等框架中，可以使用框架提供的错误处理机制，例如：
-
Vue：可以使用
Vue.config.errorHandler全局配置错误处理器。也可以在组件中使用errorCaptured钩子函数捕获子组件的错误。 -
React：可以使用
componentDidCatch生命周期方法捕获子组件的错误。也可以使用第三方库，例如react-error-boundary。
这些错误处理机制可以捕获组件渲染过程中的错误，并进行相应的处理。例如，可以显示错误提示、回退到之前的状态、或者重新渲染组件。
另外，也可以结合 window.onerror、try...catch 等方式，构建更完善的错误监控体系。需要注意的是，框架的错误处理机制可能无法捕获所有类型的错误，例如异步请求错误、事件处理函数错误等。因此，需要根据实际情况选择合适的错误监控方案。
如何上报错误信息到后端服务器？
错误收集后，需要将错误信息上报到后端服务器，以便进行分析和处理。上报方式有很多种，例如：
-
XMLHttpRequest：使用XMLHttpRequest对象发送 POST 请求，将错误信息作为请求体发送到服务器。 -
fetch：使用fetchAPI 发送 POST 请求，与XMLHttpRequest类似。 -
Image：创建一个Image对象，将错误信息作为 URL 参数，发送 GET 请求到服务器。这种方式比较简单，但可能受到 URL 长度限制。
选择哪种上报方式取决于你的需求和服务器端的接口。一般来说，POST 请求更适合发送大量数据，GET 请求更适合发送少量数据。
上报时，需要包含以下信息：
- 错误类型
- 错误信息
- 错误堆栈
- 发生时间
- 用户 ID
- 浏览器信息
- 页面 URL
这些信息可以帮助你更好地定位和解决问题。
另外，为了避免频繁上报相同的错误，可以对错误信息进行去重。例如，可以使用一个缓存来记录已经上报过的错误，如果相同的错误再次发生，则不再上报。
如何使用 sourcemap 定位压缩后的代码错误？
在生产环境中，代码通常会被压缩和混淆，导致错误堆栈难以阅读。Sourcemap 可以将压缩后的代码映射回原始代码，方便定位错误。
要使用 sourcemap，需要进行以下几步：
- 生成 sourcemap 文件：在构建过程中，配置 webpack 或其他构建工具生成 sourcemap 文件。
- 上传 sourcemap 文件到服务器：将 sourcemap 文件上传到服务器，并确保只有授权用户才能访问。
- 配置错误监控系统：在错误监控系统中配置 sourcemap URL，以便在发生错误时自动解析错误堆栈。
配置完成后，当发生错误时，错误监控系统就可以根据 sourcemap 文件将压缩后的代码映射回原始代码，显示更清晰的错误堆栈。
需要注意的是，sourcemap 文件包含原始代码的信息，因此需要妥善保管，避免泄露。
总而言之，前端错误收集是一个持续改进的过程，需要根据实际情况不断调整和优化。通过完善的错误监控体系，可以及时发现并解决问题，提升用户体验。
