JavaScript 如何做错误上报
早上打开公司的运维后台，你突然发现昨天的用户数据里，有近三成用户的页面加载失败了——要是没做错误上报，你可能要等用户来投诉才知道问题。做前端开发时，我们难免遇到各种小bug，比如按钮点了没反应、页面加载到一半卡住，这些问题如果只有用户自己知道，不仅影响体验，还会让开发像“盲盒”一样找不着问题。错误上报就是把这些“看不见的错误”变成“看得见的线索”，今天就聊聊JavaScript里怎么实现它。
先抓最直观的运行错误
JavaScript代码在浏览器里跑，只要出了语法不对、变量不存在这类错误，浏览器会直接报错。要抓这类错误很简单，用浏览器自带的window.onerror事件就行——就像给页面装了个“故障报警器”，只要代码跑崩了，它就会把错误信息“报上来”。
举个例子，你写了个函数要算两个数的和，不小心把变量名写错了，写成了a + b + c，但用户输入时没传c，浏览器就会报“c is not defined”。用window.onerror就能接住这个错，比如：
`javascript
window.onerror = function(message, source, line, column, errorObj) {
console.log("抓到错误啦！错误信息是：" + message + "，出现在第" + line + "行");
// 这里可以把错误信息发给后端
};
`
这里的message是错误的具体内容，source是出错的JS文件地址，line是出错的行数，这些信息加起来，就知道哪段代码出问题了。比如你看到“出现在第15行”，打开对应JS文件，一眼就能找到写错的变量。
不过这个方法有个小局限：它抓不到异步代码里的错误，比如用setTimeout延迟执行的代码，或者Promise里没写catch的错误，就像报警器听不到角落里的异响，这时候得换个工具。
再抓“藏起来”的异步错误
现在前端常用异步操作，比如发请求拿数据，要是fetch请求失败了却没处理，就会变成“未捕获的Promise错误”，window.onerror就抓不到了。这时候要用window.addEventListener('unhandledrejection')，相当于给异步代码再加个“暗线报警器”。
举个场景：你写了个获取用户信息的函数，用fetch拿后端接口，要是接口临时挂了，没写catch的话，就会出现未处理的错误。用这个事件就能抓住：
`javascript
window.addEventListener('unhandledrejection', function(event) {
console.log("异步错误：", event.reason);
// 把异步错误信息也发给后端
});
`
这个方法就像找猫，不管是猫跑远了没喊它，还是猫藏起来没回应，都能找到。现在很多网站的错误上报，都同时用onerror和unhandledrejection，把同步和异步的错误都兜住。
把错误信息“送”到后端
抓着错误了，总不能只存在浏览器控制台里，得传到后端的接口，这样你在公司后台就能看到所有错误。这一步其实就是用JS发个请求，把错误信息带过去就行，比如用fetch或者axios。
这里有个小细节要注意：要是用户网络不好，直接发请求可能失败，最好用navigator.sendBeacon这个方法——它是浏览器专门用来“悄咪咪”发数据的，就算用户关了页面，也能把错误信息发出去，不会漏掉任何一条。比如：
`javascript
function reportError(errorData) {
const data = JSON.stringify(errorData);
// 用sendBeacon发错误，保证不会丢
navigator.sendBeacon('/api/error-report', data);
}
// 之前的错误事件里，只要抓到错误，就调用这个函数
window.onerror = function(message, source, line) {
reportError({
type: 'sync-error',
message: message,
line: line,
url: window.location.href // 还能带上当前页面地址，知道用户在哪页出的错
});
};
`
这样，你就能在后端收到每条错误的详细信息，包括用户用的浏览器、页面地址、错误位置，甚至是操作路径——比如“用户点了登录按钮后出的错”，这些信息加起来，找bug就像看侦探小说，线索全了，很快就能修复。
做错误上报不用搞复杂，先把同步和异步的核心错误抓全，再把信息安全传到后端，就能把“看不见的问题”变成“看得见的解决方向”。下次再遇到用户反馈的bug，你就能直接拿出错误日志，不用再让用户描述半天，效率也能高不少。