如何捕获项目中的错误

1. try-catch

try{
  
}
catch(error){
  
}

try-catch语法可以捕获JS代码中的语法错误，但是它只适用于同步代码的错误捕获，如果代码中存在异步代码，它将无法捕获异步代码中的错误

2. window.onerror

捕获全局JS异常，包括同步代码和异步代码中的错误

window.onerror = function(message, source, lineno, colno, error) {
  // 处理错误的代码
}

它可以用来捕获未被try-catch捕获的错误

3. window.addEventListener

它用于捕获静态资源加载错误

可以用来捕获图片、script、css加载的错误
不可以捕获new Image和fetch的错误

window.addEventListener('error', function (event) {
  // 处理错误
});

4. Vue.config.errorHandler

在Vue里面出现的错误，不会直接被window.onerror捕获，而是会抛给Vue.config.errorHandler

Vue.config.errorHandler = function(err, vm, info) {
  // 处理错误的代码
}

错误处理的方式

ajax通信
1. 会有跨域风险，发送请求阻塞业务请求
利用Image对象上报
1. 不会有跨域风险
2. 相比PNG/JPG，gif的体积可以达到最小，采用1*1像素透明色来上报，不存储色彩空间数据，节约

//示例
function parseJsonToString(dataJson) {
  if (!dataJson ) { dataJson = {} }
  var dataArr = Object.keys(dataJson).map(function(key) { return key + '=' + encodeURIComponent(dataJson[key]) })
  return dataArr.join('&')
}

const logGif = (params) => {
  const upload = parseJsonToString(params)
  const img = new Image(1,1)
  img.src = 'https://view-error?' + upload
}

Navigator.sendBeacon
1. sendbeacon主要就是用于将统计数据发送到 Web 服务器
2. 不会跨域
3. 兼容性不好

navigator.sendBeacon(url, data)

自动上报
1. Sentry：一个流行的开源错误捕获和上报库，提供了完整的错误上报和跟踪功能
2. Bugsnag：另一个常用的错误捕获和上报库，提供了实时错误通知和可视化分析等功能
3. Raygun：一个专业的错误监测和分析平台，提供了多种编程语言的错误监测和分析功能

ON THIS PAGE

如何捕获项目中的错误#

1. try-catch#

2. window.onerror#

3. window.addEventListener#