Monitoring of front-end error reporting based on Vue project

Recently, we need to monitor a Vue project to monitor the exceptions in the formal environment in real time, and quickly respond to and modify bugs. In fact, errors reported by Vue project are mainly collected from the following three methods


window.addEventListener(‘unhandledrejection’,   event  =>  {

   event.promise.catch((e)  =>  {

     utils.errorCatch(e,   3)





window.onerror  =  function  ( errorMessage,   scriptURI,   lineNo,   columnNo,   error)  {

  //  Record stack information

   if  ( error)  {

     error.url  =  error.stack


   utils.errorCatch(error,   4)




Vue.config.errorHandler  =  function  ( err,   vm,   info)  {

     if  ( err)  {

       err.url  =  err.stack


     utils.errorCatch(err,   5) //   Send a request to the backend for saving



Using the above three methods, you can capture and collect most JS errors, and then display them as a list for filtering as follows:





Similar Posts: