vue项目问题定位

问题背景

接手的项目, 界面突然蹦出了一个错误弹窗提示, 看web控制台, 没发现报错的地方, 再逐个检查ajax请求, 终于发现是有个ajax请求报错, 和后端一番反馈, 最后发现是前端传参有问题. 那么如何快速定位到ajax的实际发起的vue文件呢?

目标

找到并总结快速定位问题的方式

问题定位方式

方式一: 通过chrome开发者工具"网络"选项卡的"启动器"查看调用堆栈

方式二: 肉眼观察加推断定位方式

• 根据url找到ajax的发起处
• 根据包装ajax请求的方法名,查找调用处, 如果此时可以直接定位到vue文件,那就可以停止了

方式三: 通过firefox的debug功能, 通过堆栈信息反推

• 根据url找到ajax的发起处, 加debbuger
• 可能因为调用的层级比较深,没法一次就定位到vue文件, 不要急,找到最后一个位置, 再通过web开发者工具,进到源代码, 然后再到哪个地方加个断点
• 重复上一步操作, 直到定位到了正确的vue文件为止

`如果ajax请求是通过mixin的created函数发出的, 上面的操作可能还是没法直接定位到vue文件, 那么此时就可查看 this.$options中的一些信息(注意此时只有当this表示为一个vue实例时有效)

// 打印组件文件地址
console.log(this.$options.__file)
// 打印组件标签名
console.log(this.$options._componentTag)
// 打印组件的name
console.log(this.$options.name)

第三种方式使用chrome开发者工具进行不行吗? 理论上可以, 但实际上chrome的调用堆栈好像不如firefox的精确

全局异常的捕获

import { App } from 'vue'

export function setupVueErrorHandler(app: App) {
  app.config.errorHandler = (err, vm, info) => {
    // 处理错误
    // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
    const error = {
      // 抛出异常的vue组件的name
      vueComponentName: vm?.$options.name,
      // Vue 特定的错误信息，比如错误所在的生命周期钩子
      vueErrorInfo: info,
      // 抛出异常的vue文件地址
      vueComponentFile: vm?.$options.__file,
      err,
    }
    console.error(err)
    console.table(error)
  }
}

补充说明

如果vue项目未设置devtool为source-map时, chrome开发者工具对于代码定位是有可能不准确的, 因此最好先修改devtool的值, 修改方式相见我另一篇文章 vue项目如何快速定位是哪个地方发起了路由跳转