Vue3前端错误监控：使用errorHandler捕获异常并通过Nodemailer邮件上报

脚本专家

在前端项目中，如果能比用户更早发现代码异常，就可以在问题扩散前修复。实现这一目标需要两步：捕获运行时错误，并将错误信息上报到开发者手中。下面以 Vue3 为例，介绍如何结合全局错误处理器和邮件发送服务搭建一套简易的错误监控方案。

## 一、Vue3 全局错误捕获

Vue3 提供了 app.config.errorHandler 钩子，可以捕获组件渲染、侦听器执行期间未处理的错误。在 main.ts 中注册：

2. import { createApp } from 'vue'
3. import App from './App.vue'
4. const app = createApp(App)
6. app.config.errorHandler = (err, vm, info) => {
7.   console.log('[全局异常]', err, vm, info)
8. }
10. app.mount('#app')

复制代码

当代码中发生未捕获异常时（例如访问未定义的变量），控制台会输出类似以下信息：

2. [全局异常] ReferenceError: www is not defined
3.     at asset-mgmt.vue:241:15
4.     at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
5.     ...

复制代码

这样就完成了错误采集的第一步。

## 二、错误信息上报：邮件方案

捕获到错误后，需要将信息发送出去。常见方式包括通过后端邮件接口发送，或由前端直接调用邮件服务。这里重点介绍第二种——用 Node.js 模块 Nodemailer 独立实现邮件发送，从而不依赖后端团队。

### 2.1 Nodemailer 服务端脚本

Nodemailer 是一个 Node.js 邮件发送库，支持 SMTP、Sendmail 等方式。注意：它运行在 Node 环境，不能在浏览器中直接使用。因此需要单独启动一个 Node 服务，接收前端上报的错误，并转发邮件。

以下是一个完整的测试脚本，使用 QQ 邮箱的 SMTP 服务发送邮件：

2. 'use strict';
3. const nodemailer = require('nodemailer');
5. nodemailer.createTestAccount((err, account) => {
6.     if (err) {
7.         console.error('Failed to create a testing account', err);
8.         process.exit(1);
9.     }
11.     // 创建传输对象
12.     let transporter = nodemailer.createTransport(
13.         {
14.             host: "smtp.qq.com",
15.             port: 465,
16.             secure: true, // true for 465, false for other ports
17.             auth: {
18.                 user: "your_email@qq.com",  // 发送方邮箱
19.                 pass: "your_authorization_code" // QQ邮箱授权码
20.             },
21.             logger: true,
22.             transactionLog: true
23.         },
24.         {
25.             from: 'Nodemailer <your_email@qq.com>',
26.             headers: {
27.                 'X-Laziness-level': 1000
28.             }
29.         }
30.     );
32.     // 邮件内容
33.     let message = {
34.         to: 'receiver@qq.com',
35.         subject: 'Frontend Error Report - ' + Date.now(),
36.         text: 'Error details will be placed here',
37.         html: '',
38.         attachments: []
39.     };
41.     transporter.sendMail(message, (error, info) => {
42.         if (error) {
43.             console.log('Error occurred', error.message);
44.             process.exit(1);
45.         }
46.         console.log('Message sent successfully!');
47.         console.log(nodemailer.getTestMessageUrl(info));
48.         transporter.close();
49.     });
50. });

复制代码

运行此脚本前需确保：
- 发送方与接收方邮箱相同（即自己给自己发）
- QQ邮箱需开启 SMTP 服务并生成授权码
- 使用 node 命令启动脚本，而非在浏览器中直接调用

### 2.2 与 Vue3 errorHandler 集成

实际使用时，将上述 Node 脚本改造为 HTTP 服务（例如使用 Express），并在 Vue 的 errorHandler 中通过 AJAX 请求将错误信息发往该服务，再由服务端调用 nodemailer 发送邮件。

## 三、替代方案：Formspree

如果不想维护 Node 服务，可以使用 Formspree 这类表单转发服务。操作步骤如下：

1. 注册并登录 Formspree
2. 配置接收邮箱并验证
3. 创建一个 form，获取 endpoint 地址（例如 https://formspree.io/f/xvolyepj ）
4. 在 Vue 的 errorHandler 中向该地址 POST 错误信息：

2. app.config.errorHandler = (err, vm, info) => {
3.     axios({
4.         method: 'post',
5.         url: 'https://formspree.io/f/xvolyepj',
6.         data: {
7.             errorMsg: err.message,
8.             errorDetail: err.stack
9.         }
10.     })
11. }

复制代码

注意：Formspree 免费版每月限制 50 条，超出后需要付费。此外，该方式依赖外网环境，内网项目无法使用。

## 四、总结

通过 Vue3 的 app.config.errorHandler 可以轻松捕获全局异常。上报方式可根据项目条件选择：如果能部署 Node 服务，使用 Nodemailer 发送邮件更可控；若项目简单且接受每月 50 条限制，Formspree 是快速选项。两种方案都无法在内网使用，若完全内网环境需自建邮件发送接口。

热心网友7

这个方案很实用，把前端错误捕获和邮件通知结合起来了，省去了后端团队的配合成本。不过我有个疑问：Nodemailer脚本里用了QQ邮箱的SMTP，授权码直接写在代码里，生产环境是不是有安全隐患？另外，如果错误量很大，频繁发邮件会不会导致邮箱被限制？有没有考虑过用更轻量的方式，比如直接往飞书或钉钉机器人推消息？