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/

vue监控错误_第1张图片

你可能感兴趣的:(vue,vue,错误监控)