故事的开始
作为前端,有没有一种冲动,希望在代码出问题时能前人一步收到报错的信息,而不是被用户发现后再反馈上来。
如果要做到提前收到报错信息,至少需要做到两点:
- 错误捕获
- 错误信息上报
错误捕获
以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
Nodemailer 是一个简单易用的 Node.JS 邮件发送模块(通过 SMTP,sendmail,或者 Amazon SES),支持 unicode,你可以使用任何你喜欢的字符集。
测试代码如下:
/* eslint no-console: 0 */
'use strict';
const nodemailer = require('nodemailer');
// Generate SMTP service account from ethereal.email
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, // true for 465, false for other ports
auth: {
user: "xxxxx@qq.com", // 邮箱地址
pass: "tkelxjoezeatbjee", //授权码
},
logger: true,
transactionLog: true // include SMTP traffic in the logs
},
{
// sender info
from: 'Nodemailer <xxxxx@qq.com>',
headers: {
'X-Laziness-level': 1000 // just an example header, no need to use this
}
}
);
// Message object
let message = {
// Comma separated list of recipients
to: 'xxxxx@qq.com',
// Subject of the message
subject: 'Nodemailer is unicode friendly ✔' + Date.now(),
// plaintext body
text: 'Hello to myself!',
// HTML body
html: ``,
// AMP4EMAIL
amp: `134253647`,
// An array of attachments
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));
// only needed when using pooled connections
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
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] S: 220 newxmesmtplogicsvrsza7.qq.com XMail Esmtp QQ Mail Server.
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] C: EHLO fengjingyudeMacBook-Pro-2.local
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] S: 250-newxmesmtplogicsvrsza7.qq.com
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] S: 250-PIPELINING
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] S: 250-SIZE 73400320
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] S: 250-AUTH LOGIN PLAIN XOAUTH XOAUTH2
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] S: 250-AUTH=LOGIN
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] S: 250-MAILCOMPRESS
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] S: 250 8BITMIME
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] SMTP handshake finished
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] C: AUTH PLAIN ADI0NDIwMjk2OUBxcS5jb20ALyogc2VjcmV0ICov
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] S: 235 Authentication successful
[2022-06-17 08:32:05] INFO [hvJt01jlQc8] User "xxxxx@qq.com" authenticated
[2022-06-17 08:32:05] INFO Sending message <93f13de6-5a1e-bd6f-24e0-8608d5442c93@qq.com> to <xxxxx@qq.com>
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] C: MAIL FROM:<xxxxx@qq.com>
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] S: 250 OK
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] C: RCPT TO:<xxxxx@qq.com>
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] S: 250 OK
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] C: DATA
[2022-06-17 08:32:05] DEBUG [hvJt01jlQc8] S: 354 End data with <CR><LF>.<CR><LF>.
[2022-06-17 08:32:05] INFO [hvJt01jlQc8] <668 bytes encoded mime message (source size 665 bytes)>
[2022-06-17 08:32:06] DEBUG [hvJt01jlQc8] S: 250 OK: queued as.
[2022-06-17 08:32:06] DEBUG [hvJt01jlQc8] Closing connection to the server using "end"
Message sent successfully!
[2022-06-17 08:32:06] INFO [hvJt01jlQc8] Connection closed
如此,便实现了发邮件的功能,将捕获的错误信息写入邮件内容就可以实现上报了。
这里有坑不知道你会不会遇到:
- 这是个
node
服务、node
服务、node
服务,要用node
命令启动。在这个位置卡住了一段,傻傻的以为可以用js
直接调用。这里延伸出一个问题,需要事先启动该服务,以便上报时调用 - 如下配置中的邮箱需要是相同的邮箱,想来简单,但就是卡了我一下
Formspree
如果node
服务都不想起,那Formspree
是个选择。
过程大致是如下:
- 注册登录Formspree
- 配置接受信息的邮箱,并验证邮箱
3、配置一个接收信息的form,会生成一个链接,即为调用的地址
https://formspree.io/f/xvolyepj
说下遇到的问题:
- form名称在新增时保证正确,修改名称虽成功,但影响接收
- form的内容不影响数据的传递,数据的字段可以在调用是指定,可与设置时无关
4、调用
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、后续
上述两种邮件通知方案都存在一致命的缺陷,就是在内网环境下可能无法实现上述所需网络环境的联通,造成功能不可以。
为此,将联合后台同事一起实现该方案!