Full project address: vuE3-element-plus

Experience address: http://8.135.1.141/vue3-admin-plus

Series entry:

  • True fragrance law! Take you to use vuE3 + VITE2 to lift backstage (entrance)

preface

Global error collection helps us to collect error information in a timely manner. Especially in the production environment, error logs of users can be collected in a timely manner. First time processing, improve the reliability of the system, and user experience, reduce unnecessary losses for the company. How important global error collection is.

This article will focus on how to collect errors more gracefully.

Error logging experience (see Hacking first)

Click the experience

If the collection is wrong

Global error collection file useerrorlog.js

Let’s analyze the hook file

import setting from '@/settings'
import bus from '@/utils/bus'

export default function () {
   // Obtain the variable VITE_APP_ENV configured in the. Env file and compare it with the errorLog of setting to obtain the environment for enabling error collection
  const checkNeed = () = > {
    const env = import.meta.env.VITE_APP_ENV
    let { errorLog } = setting
    // Check that the configuration is a string
    if (typeof errorLog === 'string') {
      return env === errorLog
    }
    // Check that the configuration is Array Array
    if (errorLog instanceof Array) {
      return errorLog.includes(env)
    }
    return false
  }
  if (checkNeed()) {
    // Collect global error logs with window.addEventListener listener
    window.addEventListener(
      'error'.({ error, target }) = > {
        if (target.outerHTML) {
          //img error collection
          let errLog = `The ${JSON.stringify(target.outerHTML)}`
          // Send error information to collect
          errorLogReq(errLog)
        } else {
          let errLog = `${error.stack.substr(0.300)}`
          errorLogReq(errLog)
        }
      },
      // Use event capture mechanism to catch img loading error message
      true)}}let errorLogReq = (errLog) = > {
  request({
    url: '/ty-user/errorCollection/insert'.data: {
      pageUrl: window.location.href,
      errorLog: errLog,
      // Get the browser version and system information
      browserType: navigator.userAgent,
      version: pack.version
    },
    method: 'post'.bfLoading: false.isAlertErrorMsg: true
  }).then(() = > {
    // Using the event mechanism, notify page reloadErrorPage to refresh the page
    // Note: Bus uses mitt library, similar to new bus () in VUe2
    bus.emit('reloadErrorPage'}, {})})Copy the code

Note: Window. addEventListener must be set to true(false by default) in order to collect image error information

ReloadErrorPage page

Let’s focus on the core code of ErrorLog.vue

onMounted(() = > {
  // Listen for events in hooks/ useerrorlog.js and update list data if there are bugs
  bus.on('reloadErrorPage'.() = > {
    selectPageReq()
  })
})

// code trace
<el-button type="text" size="small" @click="consoleToPlatform(row.errorLog)">
  click it console to platform to track
</el-button>
const consoleToPlatform = (err) = > {
  // Use console.error to print the collected code to the console again for easy tracking
  console.error(err)
}
Copy the code
How to Configure and Use

This can be done using the errorLog field in settings.js, for example:

If VITE_APP_ENV is prod, set the errorLog in settings.js to ['prod']Copy the code

Note: The value of VITE_APP_ENV must correspond to the errorLog configuration item

conclusion

Global error capture, through window.addEventListener to collect global error logs, sent to the background interface. Notify the errorlog. vue page to update the error list data

See is not very magical, very fragrant!!