故事的開(kāi)始

作為前端，有沒(méi)有一種沖動(dòng)，希望在代碼出問(wèn)題時(shí)能前人一步收到報(bào)錯(cuò)的信息，而不是被用戶發(fā)現(xiàn)后再反饋上來(lái)。

如果要做到提前收到報(bào)錯(cuò)信息，至少需要做到兩點(diǎn)：

1. 錯(cuò)誤捕獲
2. 錯(cuò)誤信息上報(bào)

錯(cuò)誤捕獲

以vue3提供了errorHandler，

指定一個(gè)處理函數(shù)，來(lái)處理組件渲染函數(shù)和 偵 聽(tīng) 器 執(zhí)行期間拋出的未捕獲錯(cuò)誤。這個(gè)處理函數(shù)被調(diào)用時(shí)，可獲取錯(cuò)誤信息和相應(yīng)的應(yīng)用實(shí)例。

在main.ts 中設(shè)置全局錯(cuò)誤捕獲

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

人為制造了點(diǎn)報(bào)錯(cuò)：

[全局異常] 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

如此，便實(shí)現(xiàn)了錯(cuò)誤的捕獲。

錯(cuò)誤信息上報(bào)

上報(bào)的方式很多，此處單說(shuō)通過(guò)郵件方式實(shí)現(xiàn)上報(bào)

郵件方式實(shí)現(xiàn)大致分為兩種：

• 通過(guò)接口調(diào)用后臺(tái)郵件服務(wù)實(shí)現(xiàn)
• 前端獨(dú)立實(shí)現(xiàn)發(fā)送郵件功能

本著自己的事情自己做的原則，接下來(lái)前端獨(dú)立實(shí)現(xiàn)郵件的發(fā)送功能

Nodemailer

首先進(jìn)入視線的是Nodemailer

Nodemailer 是一個(gè)簡(jiǎn)單易用的 Node.JS 郵件發(fā)送模塊（通過(guò) SMTP，sendmail，或者 Amazon SES），支持 unicode，你可以使用任何你喜歡的字符集。

測(cè)試代碼如下：

/* 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", //授權(quán)碼
            },
            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郵箱給自己發(fā)郵件：

[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

如此，便實(shí)現(xiàn)了發(fā)郵件的功能，將捕獲的錯(cuò)誤信息寫入郵件內(nèi)容就可以實(shí)現(xiàn)上報(bào)了。

這里有坑不知道你會(huì)不會(huì)遇到：

1. 這是個(gè)node服務(wù)、node服務(wù)、node服務(wù)，要用node命令啟動(dòng)。在這個(gè)位置卡住了一段，傻傻的以為可以用js直接調(diào)用。這里延伸出一個(gè)問(wèn)題，需要事先啟動(dòng)該服務(wù)，以便上報(bào)時(shí)調(diào)用
2. 如下配置中的郵箱需要是相同的郵箱，想來(lái)簡(jiǎn)單，但就是卡了我一下

Formspree

如果node服務(wù)都不想起，那Formspree是個(gè)選擇。

過(guò)程大致是如下：

1. 注冊(cè)登錄Formspree
2. 配置接受信息的郵箱，并驗(yàn)證郵箱

3、配置一個(gè)接收信息的form，會(huì)生成一個(gè)鏈接，即為調(diào)用的地址

https://formspree.io/f/xvolyepj

? 說(shuō)下遇到的問(wèn)題：

• form名稱在新增時(shí)保證正確，修改名稱雖成功，但影響接收
• form的內(nèi)容不影響數(shù)據(jù)的傳遞，數(shù)據(jù)的字段可以在調(diào)用是指定，可與設(shè)置時(shí)無(wú)關(guān)

4、調(diào)用

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、結(jié)果

除掉郵箱需要托管之外，也算是個(gè)不錯(cuò)的方案。但是……

萬(wàn)事怎么可能沒(méi)有但是，測(cè)試到后面收到個(gè)郵件，才發(fā)現(xiàn)是有限額的，兩個(gè)郵箱，每月50 條，土豪請(qǐng)辦卡。

6、后續(xù)

上述兩種郵件通知方案都存在一致命的缺陷，就是在內(nèi)網(wǎng)環(huán)境下可能無(wú)法實(shí)現(xiàn)上述所需網(wǎng)絡(luò)環(huán)境的聯(lián)通，造成功能不可以。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論