Vue.js生产环境能否捕获警告？Magento模板错误需TrackJs追踪

当然可以搞定！Vue在生产环境默认会把这类警告屏蔽掉，但咱们可以通过重写它的全局警告处理函数，把这些信息抓下来传给TrackJs。下面一步步来实现：

1. 先搞懂Vue的警告处理逻辑 #

Vue内部所有的警告都是通过Vue.config.warnHandler这个函数来处理的，生产环境下这个函数默认被换成了空函数，所以警告不会显示出来。咱们只要重新定义这个函数，就能把所有警告（包括你提到的[Vue warn]: Error compiling template:这类模板编译警告）都捕获到。

2. 自定义警告处理器并对接TrackJs #

在你的Vue项目入口文件（比如main.js）里，加上这段代码：

// 只在生产环境开启，别影响开发环境的正常警告提示
if (process.env.NODE_ENV === 'production') {
  // 重写Vue的警告处理函数
  Vue.config.warnHandler = function (msg, vm, trace) {
    // 把警告信息整理成TrackJs需要的格式
    const warningInfo = {
      message: msg,
      component: vm ? vm.$options.name || '匿名组件' : '无组件实例',
      trace: trace
    };

    // 把警告传给TrackJs，这里要确保TrackJs已经正确加载了
    window.trackJs && trackJs.track(new Error(`Vue警告: ${msg}`), warningInfo);
  };
}

3. 针对Vue 3的特殊处理 #

如果你用的是Vue 3，API有点不一样，因为Vue 3没有全局的Vue对象了，得通过createApp创建的实例来设置：

import { createApp } from 'vue';
const app = createApp(App);

if (process.env.NODE_ENV === 'production') {
  app.config.warnHandler = (msg, instance, trace) => {
    const warningInfo = {
      message: msg,
      component: instance ? instance.type.name || '匿名组件' : '无组件实例',
      trace: trace
    };
    window.trackJs && trackJs.track(new Error(`Vue警告: ${msg}`), warningInfo);
  };
}

app.mount('#app');

额外提醒 #

• 一定要确保TrackJs的脚本已经正确引入到你的项目里，window.trackJs这个对象是可用的，不然传不进去。
• 这种方法不止能抓模板编译的警告，像props验证错误这类Vue运行时警告也能捕获到，刚好覆盖你用Magento模板时遇到的那些问题场景。

这样设置之后，生产环境里所有被屏蔽的Vue警告都会被抓下来，自动发送到TrackJs里，方便你追踪排查问题。

内容的提问来源于stack exchange，提问作者Alexandr Vysotsky