error report下載 - error report原始碼下載

error report

其他類別

1.0.0

下載

前端異常上報

簡介：從簡單性、可測試性和鬆散耦合性角度而言，絕大部分前端開發者都可以從error-report中受益。解決前端異常訊息統一處理的痛點，error-report為複雜的前端異常上報帶來了春天。記錄前端異常訊息，支援斷網暫存異常，線上後自動上傳暫存異常訊息。涵蓋Vue 異常、Axios 異常、原生Ajax 異常、JS 拋出的異常、Promise 異常、Async 異常、加載第三方CDN資源異常等，幾乎涵蓋了前端所有能涉及到的異常。

目的：解決前端異常訊息統一處理的痛點
功能：記錄前端異常訊息，支援斷網暫存異常，線上後自動上傳暫存異常訊息
範圍：任何前端應用
使用：兩行程式碼搞定，使用的複雜度幾乎降低到了零

特點

可拔插
代碼侵入量小
使用靈活方便

使用

 import ErrorReport from "./plugins/errorReport";

Vue.use(ErrorReport, {
    reportUrl: "http://localhost:10300/errorReport",
    env: "dev",
    appId: "error-report-5c6pz3e4il59k2f3b6",
    appName: "error-report"
});

Demo

examples

配置參數options

屬性	說明	類型	預設值	是否可以為空
reportUrl	異常上報地址	String	http://localhost:10300/errorReport	N
delayTime	延時上報Error時間	Number	3000 (單位：毫秒)	Y
appId	專案ID	String		Y
appName	項目名稱	String		Y
browser	瀏覽器名稱	String	內部方法可以獲得	N
device	設備名稱	String	內部方法可以獲得	N
userId	userId	String		Y
token	token	String		Y
timeSpan	發送資料時的時間戳	Number	每次取當前的時間戳	Y
infoType	資訊類別，預設為error	String	type	Y
msg	錯誤的具體訊息	String	錯誤的具體訊息	Y
userAgent	userAgent	String	userAgent	Y
pageUrl	上報頁面地址	String	window.location.href	Y
stack	錯誤堆疊訊息	String	錯誤堆疊訊息	Y
localStorageKey	建議使用固定的key,下次使用者開啟瀏覽器可以直接恢復異常資料並上傳	String	localStorageKey	N
env	環境：dev、test、uat、pro	String	開發環境	Y
data	更多錯誤訊息	Object	更多錯誤訊息	Y

注意事項

考慮到有些項目使用原生Ajax，Ajax 異常做了原生的攔截，Axios 異常也做了攔截；使用了Axios的童鞋，會出現異常上報兩次（原因：Axios 異常攔截器一次，原生Ajax異常攔截一次），不想上報兩次可以選擇註解以下程式碼（ Axios 異常監控、 Ajax 監控其中任何一個即可）。在error-report/src/plugins/errorReport.js中。

註Axios 異常監控，Axios異常將不會被上報；

        // Axios 异常监控
        axios.interceptors.response.use(null, error => {
            this.options.msg = error.message;
            this.options.stack = this.processStackMsg(error);
            this.options.data = JSON.stringify({
                category: "Axios"
            });

            // 合并上报的数据，包括默认上报的数据和自定义上报的数据
            const reportData = Object.assign({}, this.options);
            this.saveReport(reportData);

            return Promise.reject(error);
        });

或註解掉原生的Ajax 監控，原生Ajax異常將不會被回報。

        // Ajax监控
        const ajaxListener = {};
        // 复制send方法
        ajaxListener.tempSend = XMLHttpRequest.prototype.send;
        // 复制open方法
        ajaxListener.tempOpen = XMLHttpRequest.prototype.open;
        // 重写open方法,记录请求的url
        XMLHttpRequest.prototype.open = function(method, url, boolen) {
            ajaxListener.tempOpen.apply(this, [method, url, boolen]);
            this.ajaxUrl = url;
        };
        const self = this;
        // 发送
        XMLHttpRequest.prototype.send = function(data) {
            const tempReadystate = this.onreadystatechange;
            this.onreadystatechange = function() {
                if (this.readyState === 4) {
                    if (this.status >= 200 && this.status < 300) {
                        tempReadystate && tempReadystate.apply(this, [data]);
                        return;
                    }

                    self.options.msg = "AJAX 请求错误";
                    self.options.stack = `错误码：${this.status}`;
                    self.options.data = JSON.stringify({
                        requestUrl: this.ajaxUrl,
                        category: "XMLHttpRequest",
                        text: this.statusText,
                        status: this.status
                    });
                    // 合并上报的数据，包括默认上报的数据和自定义上报的数据
                    const reportData = Object.assign({}, self.options);
                    // 把错误信息发送给后台
                    self.saveReport(reportData);
                }
            };

            ajaxListener.tempSend.apply(this, [data]);
        };

具體情況，看需求！

重要事情說三遍！！！