Vue面试题37：如何处理Vue项目中的错误？（总结自B站up主‘前端杨村长’视频，仅供自用学习）

• 分析

  • 这是一个综合应用题目，在项目中我们常常需要将App的异常上报，此时错误处理就很重要了；这里要区分错误的类型，进而针对性做收集。然后将收集到的错误信息上报服务器；

• 思路

  • 1.首先区分错误类型；
  • 2.如何根据错误的不同类型做相应处理；
  • 3.收集的错误如何上报给服务器；

• 范例

  • 1.应用中的错误类型通常分为接口异常和代码逻辑异常；
  • 2.我们需要根据不同错误类型做相应处理：接口异常是我们请求后端接口过程中发生的异常，可能是请求失败，也可能是请求获得了服务器响应，但是返回的是错误状态。以Axios为例，这类异常我们可以通过封装Axios，在拦截器中统一处理整个应用中的请求错误。代码逻辑异常是我们编写的前端代码中存在逻辑上的错误造成的异常，Vue应用中最常见的方式是使用全局错误处理函数app.config.errorHandler 收集错误；
  • 3.收集到错误之后，需要统一处理这些异常：分析错误，获取需要的错误信息和数据。这里该有效区分错误类型，如果是请求错误，需要上报接口信息，参数，状态码等；对于前端逻辑异常，获取错误名称和详情即可。另外还可以收集应用名称、环境、版本、用户信息，所在页面等。这些信息可以通过 vuex或pinia存储的全局状态和路由信息获取；

• 实践

• // 处理接口异常
  // 响应拦截器
  requests.interceptors.response.use(
      (res) => {
          return res.data
      },
      (error) => {
          // 存在response说明服务器有响应
          if (error.response) {
              let response = error.response
              if (response.status >= 400) {
                  // 服务器异常
                  handleError(response, 1)
              } else {
                  handleError(null, 2)
              }
          }
          return Promise.reject(new Error(error))
      }
  )
  
  // 错误处理程序
  function handleError(error, type) {
      if (type == 1) {
          // 处理接口异常，从config字段中获取请求信息
          let { url, method, params, data } = error.config
          let err_data = {
              url,
              method,
              params: { query: params, body: data },
              error: error.data.message || JSON.stringify(error.data),
          }
      } else {
          // ...
      }
  }
  
  // 处理代码逻辑异常
  // Vue全局捕获错误信息
  app.config.errorHandler = (err, instance, info) => {
      let errData
      if (err instanceof Error) {
          let { name, message } = err
          errData = {
              type: name,
              error: message,
          }
      } else {
          errData = {
              type: "other",
              error: JSON.stringify(err),
          }
      }
      console.log("errData===", errData)
  }