VUE前端工程报错监控实践

作为前端，是否有冲动，希望前人在代码出现问题时能一步收到错误的信息，而不是被用户发现后反馈。

要提前收到报错信息，至少要做到两点：

1. 错误捕获
2. 报告错误信息

以vue为例，在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');

// 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 ',
            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

如此，便实现了发邮件的功能，将捕获的错误信息写入邮件内容就可以实现上报了。

这里有坑不知道你会不会遇到：

1. 这是个node服务、node服务、node服务，要用node命令启动。在这个位置卡住了一段，傻傻的以为可以用js直接调用。这里延伸出一个问题，需要事先启动该服务，以便上报时调用
2. 如下配置中的邮箱需要是相同的邮箱，想来简单，但就是卡了我一下

如果node服务都不想起，那Formspree是个选择。

过程大致是如下：

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pyeYuzsb-1655461453037)(/Users/pobu/Library/Containers/com.tencent.WeWorkMac/Data/Library/Application Support/WXWork/Temp/ScreenCapture/企业微信截图_faae1560-1a82-4523-b45c-0fad6e4bdd75.png)]

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 条，土豪请办卡