故事的开始
作为前端，有没有一种冲动，希望在代码出问题时能前人一步收到报错的信息，而不是被用户发现后再反馈上来 。
如果要做到提前收到报错信息，至少需要做到两点：
错误捕获错误信息上报 错误捕获
以vue3提供了，
指定一个处理函数，来处理组件渲染函数和侦听器执行期间抛出的未捕获错误 。这个处理函数被调用时，可获取错误信息和相应的应用实例 。
在main.ts 中设置全局错误捕获
app.config.errorHandler = (err, vm, info) => {console.log('[全局异常]', err, vm, info)}
人为制造了点报错：
[全局异常] ReferenceError: www is not definedat asset-mgmt.vue:241:15at 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
如此，便实现了错误的捕获 。
错误信息上报
上报的方式很多，此处单说通过邮件方式实现上报
邮件方式实现大致分为两种：
本着自己的事情自己做的原则，接下来前端独立实现邮件的发送功能
首先进入视线的是
是一个简单易用的 Node.JS 邮件发送模块（通过 SMTP，，或者SES），支持 ，你可以使用任何你喜欢的字符集 。
测试代码如下：
/* eslint no-console: 0 */'use strict';const nodemailer = require('nodemailer');// Generate SMTP service account from ethereal.emailnodemailer.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 portsauth: {user: "xxxxx@qq.com", //邮箱地址pass: "tkelxjoezeatbjee", //授权码},logger: true,transactionLog: true // include SMTP traffic in the logs},{// sender infofrom: 'Nodemailer ',headers: {'X-Laziness-level': 1000 // just an example header, no need to use this}});// Message objectlet message = {// Comma separated list of recipientsto: 'xxxxx@qq.com',// Subject of the messagesubject: 'Nodemailer is unicode friendly ?' + Date.now(),// plaintext bodytext: 'Hello to myself!',// HTML bodyhtml: ``,// AMP4EMAILamp: `134253647`,// An array of attachmentsattachments: [],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 connectionstransporter.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] INFOSending message