VUE前端工程报错监控问题及解决

故事的开始

做前端开发的同学，是不是经常有这种冲动：希望代码一出问题，自己能第一时间收到报错信息，而不是等用户找上门来才发现？如果能提前感知到异常，修复效率完全不一样。

要实现这种“先知先觉”，核心就两件事：错误捕获 和 错误信息上报。缺一不可。

错误捕获

Vue3 提供了一个全局的 errorHandler，可以指定一个处理函数，专门处理组件渲染函数和侦听器执行期间抛出的未捕获错误。这个函数被调用时，能拿到错误信息和对应的应用实例。

在 main.ts 里加上这样一段：

app.config.errorHandler = (err, vm, info) => {  console.log('[全局异常]', err, vm, info)}

随手制造一个报错试试看，控制台输出类似这样：

[全局异常] ReferenceError: www is not defined    at asset-mgmt.vue:241:15    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)    at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2667:29)    at flushPostFlushCbs (runtime-core.esm-bundler.js:356:32)    at flushJobs (runtime-core.esm-bundler.js:401:9) VueInstance mounted hook

这样一来，全局错误就被稳稳抓住了。不过，捕获只是第一步，怎么把错误信息发出去，才是重头戏。

错误信息上报

上报的方式很多，这里单说通过邮件发送。邮件方案又分两条路：一种是调后台接口让服务端代发，另一种是前端自己搞定发送。本着“自己的事自己做”的思路，我们试试前端独立实现邮件发送。

Nodemailer

首先登场的是 Nodemailer，一个简单易用的 Node.js 邮件发送模块。它支持 SMTP、sendmail、Amazon SES，Unicode 字符集也没问题，基本可以覆盖常见场景。

测试代码长这样：

/* eslint no-console: 0 */
'use strict';
const nodemailer = require('nodemailer');

nodemailer.createTestAccount((err, account) => {
    if (err) {
        console.error('Failed to create a testing account');
        console.error(err);
        return process.exit(1);
    }
    console.log('Credentials obtained, sending message...');
    let transporter = nodemailer.createTransport(
        {
            host: "smtp.qq.com",
            port: 465,
            secure: true,
            auth: {
              user: "xxxxx@qq.com",
              pass: "tkelxjoezeatbjee",
            },
            logger: true,
            transactionLog: true
        },
        {
            from: 'Nodemailer ',
            headers: {
                'X-Laziness-level': 1000
            }
        }
    );
    let message = {
        to: 'xxxxx@qq.com',
        subject: 'Nodemailer is unicode friendly ✔' + Date.now(),
        text: 'Hello to myself!',
        html: ``,
        amp: `134253647`,
        attachments: [],
        list: {}
    };
    transporter.sendMail(message, (error, info) => {
        if (error) {
            console.log('Error occurred');
            console.log(error.message);
            return process.exit(1);
        }
        console.log('Message sent successfully!');
        console.log(nodemailer.getTestMessageUrl(info));
        transporter.close();
    });
});

上面的例子配置了 QQ 邮箱给自己发邮件，运行后的日志显示连接、认证、发送都很顺利：

[2022-06-17 08:32:05] DEBUG Creating transport: nodemailer (6.7.5; +https://nodemailer.com/; SMTP/6.7.5[client:6.7.5])
[2022-06-17 08:32:05] DEBUG Sending mail using SMTP/6.7.5[client:6.7.5]
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] Resolved smtp.qq.com as 14.18.175.202 [cache miss]
[2022-06-17 08:32:05] INFO [hvJt01jlQc8] Secure connection established to 14.18.175.202:465
...
Message sent successfully!
[2022-06-17 08:32:06] INFO [hvJt01jlQc8] Connection closed

到这里，发邮件功能就实现了。接下来只要把错误信息拼到邮件内容里，就能完成上报。

不过，踩过的坑也得说出来，免得大家再掉进去：

1. 这是个 Node 服务，不是浏览器端直接能用的。 需要用 node 命令启动。当时卡了好久，傻傻以为 js 直接调就完了。所以延伸出一个问题：必须事先启动这个服务，才能在上报时调用。
2. 配置里的邮箱需要保持一致。 发件人和收件人用同一个邮箱，想着简单，结果还是被绊了一下。

Formspree

如果连 Node 服务都不想起，那 Formspree 可以了解一下。它是一个第三方服务，通过表单提交的方式帮你转发邮件。

大致流程如下：

1. 注册并登录 Formspree。
2. 配置接收信息的邮箱，并完成邮箱验证。

3. 配置一个接收信息的 form，会生成一个调用链接，例如 https://formspree.io/f/xvolyepj。

说下实际遇到的坑：

• form 名称在新增时一定要保证正确，虽然修改也能成功，但会影响接收。
• form 里设置的内容和实际传递的数据字段其实无关，你可以在调用时自由指定字段名。

4. 在 errorHandler 里调用：

app.config.errorHandler = (err, vm, info) => {
  console.log('[全局异常]', err, vm, info)
  axios({
    method: 'post',
    url: 'https://formspree.io/f/xvolyepj',
    data: {
      errorMsg: err.message,
      errorDetail: err.stack,
      sss: '44444'
    }
  })
}

5. 结果：

这个方案除了邮箱需要托管给第三方，其实挺方便的。但是……万事怎么可能没有“但是”？测试到后面收到一封邮件才发现，它有限额：两个邮箱，每月总共 50 条。超过就得付费，土豪请办卡。

6. 后续思考

这两种邮件通知方案都存在一个致命缺陷——在内网环境下，很可能无法和服务端建立网络连接，导致功能不可用。如果项目部署在内网，就需要另想办法了。

总结

从错误捕获到邮件上报，Nodemailer 和 Formspree 是两条比较直接的路径，各有优劣。前者需要自己维护一个 Node 服务，后者受限于第三方服务和网络环境。选择哪种，取决于实际部署条件和预算。希望这些经验和坑能给你一些参考。