vue项目收集报错日志 上传给服务器

Posted on 2020-04-22 10:41  嗷呜~  阅读(1996)  评论(0编辑  收藏  举报

在 开发过程中 我们可以通过日志 来查看出现的各种问题,但是在生产环境中遇到问题时我们有时很难复现,不易我们了解到具体的问题,收集生产环境的报错日志会帮助我们记录问题,方便后期处理。

在main.js进行全局配置。

// 上报错误日志
const errors = []
const getTimestamp = () => {
  return new Date()
}
Vue.config.errorHandler = error => {
  errors.push({time:getTimestamp(),content:error.stack})
}
window.onerror = (message,source,lineno,colon,error) => {
  errors.push({time:getTimestamp(),content:error.stack})
}
window.addEventListener('error',event => {
  errors.push({time:getTimestamp(),content:event.error.stack})
})

setInterval(()=>{
  if(errors.length > 0){
    console.log(errors)
    const length = errors.length
    axios.post(
      '/',errors
    ).then(response => {
      errors.splice(0,length)
    },error => {
      console.log('保存日志报错了',res)
    })

  }
},3000)

(还在学习中,不足后期会修改,补充)