快捷導(dǎo)航

VUE前端工程報(bào)錯(cuò)監(jiān)控問題及解決

更新時(shí)間：2026年04月25日 10:12:22 作者：pobu168

文章介紹了在Vue3項(xiàng)目中實(shí)現(xiàn)錯(cuò)誤捕獲和郵件報(bào)錯(cuò)上報(bào)的方法,首先使用了`errorHandler`全局錯(cuò)誤捕獲,接著通過Nodemailer發(fā)送郵件實(shí)現(xiàn)錯(cuò)誤上報(bào)功能,過程中遇到一些坑,如需本地調(diào)試需用node啟動(dòng)服務(wù),同時(shí)總結(jié)了兩種方案的,包括直接存在的問題和限制

故事的開始

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

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

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

錯(cuò)誤捕獲

以vue3提供了errorHandler，

指定一個(gè)處理函數(shù)，來處理組件渲染函數(shù)和偵聽器執(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)的方式很多，此處單說通過郵件方式實(shí)現(xiàn)上報(bào)

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

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

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

Nodemailer

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

Nodemailer 是一個(gè)簡(jiǎn)單易用的 Node.JS 郵件發(fā)送模塊（通過 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ì)遇到：

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

Formspree

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

過程大致是如下：

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

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

https://formspree.io/f/xvolyepj

? 說下遇到的問題：

form名稱在新增時(shí)保證正確，修改名稱雖成功，但影響接收
form的內(nèi)容不影響數(shù)據(jù)的傳遞，數(shù)據(jù)的字段可以在調(diào)用是指定，可與設(shè)置時(shí)無關(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é)果