vue監控錯誤

1.Loading chunk... failed 

main.js文件添加

router.onError(err => {
  const pattern = /Loading [CSS ]{0,1}chunk (.*) failed\./
  const isChunkLoadingFailed = pattern.test(err.message)
  if (isChunkLoadingFailed) {
    window.location.replace(window.location.href)
  }
  console.log('出錯了', err)
})

2. 全局監聽錯誤：

（1）index.html文件添加

router.onError(err => {
  const pattern = /Loading [CSS ]{0,1}chunk (.*) failed\./
  const isChunkLoadingFailed = pattern.test(err.message)
  if (isChunkLoadingFailed) {
    window.location.replace(window.location.href)
  }
  console.log('出錯了', err)
})

（2）使用vue的錯誤監聽函數：

Vue.config.errorHandler = function (err, vm, info) {
  let { message, name, script, line, column, stack } = err
  // 在vue提供的error對象中，script、line、column目前是空的。但這些信息其實在錯誤棧信息裏可以看到。
  // script = !_.isUndefined(script) ? script : '';
  // line = !_.isUndefined(line) ? line : 0;
  // column = !_.isUndefined(column) ? line : 0;
  // 解析錯誤棧信息
  if (/Loading [CSS ]{0,1}chunk (.*) failed\./.test(message)) {
    console.log('catch Loading chunk booking-order-goods-info failed.')
    let stackStr = stack ? stack.toString() : `${name}:${message}`
    console.log(stackStr)
    console.log(message)
    console.log(script)
    console.log(line)
    console.log(column)
    window.location.replace(window.location.href)
  }

3.sentry

https://sentry.io/