26、前端错误信息采集

[shengq666]

No description provided.

[shengq666]

前端所能捕捉的错误主要有三种:

• 资源加载错误，通过 addEventListener('error', callback, true) 在捕获阶段捕捉资源加载失败错误。
• js 执行错误，通过 window.onerror 捕捉 js 错误。
• promise 错误，通过 addEventListener('unhandledrejection', callback)捕捉 promise 错误，但是没有发生错误的行数，列数等信息，只能手动抛出相关错误信息。

[shengq666]

创建一个错误数组变量 errors ，在错误发生时，将错误的相关信息添加到数组，然后在某个阶段统一上报或者实时上报。

// 捕获资源加载失败错误 js css img...
addEventListener(
  'error',
  (e) => {
    const target = e.target
    if (target != window) {
      monitor.errors.push({
        type: target.localName,
        url: target.src || target.href,
        msg: (target.src || target.href) + ' is load error',
        // 错误发生的时间
        time: new Date().getTime(),
      })
    }
  },
  true
)

// 监听 js 错误
window.onerror = function (msg, url, row, col, error) {
  monitor.errors.push({
    type: 'javascript',
    row: row,
    col: col,
    msg: error && error.stack ? error.stack : msg,
    url: url,
    // 错误发生的时间
    time: new Date().getTime(),
  })
}

// 监听 promise 错误 缺点是获取不到行数数据
addEventListener('unhandledrejection', (e) => {
  monitor.errors.push({
    type: 'promise',
    msg: (e.reason && e.reason.msg) || e.reason || '',
    // 错误发生的时间
    time: new Date().getTime(),
  })