>[success] # 將報錯信息傳遞給后臺 ~~~ 1.要建立這樣一種 JavaScript 錯誤記錄系統，首先需要在服務器上創建一個頁面（或者一個服務器入 口點），用于處理錯誤數據。這個頁面的作用無非就是從查詢字符串中取得數據，然后再將數據寫入錯 誤日志中。這個頁面可能會使用如下所示的函數： ~~~ ~~~ function logError(sev, msg){ var img = new Image(); img.src = "log.php?sev=" + encodeURIComponent(sev) + "&msg=" + encodeURIComponent(msg); } ~~~ >[danger] ##### 為什么用image 對象 ~~~ 1.這個 logError()函數接收兩個參數：表示嚴重程度的數值或字符串（視所用系統而異）及錯誤消 息。其中，使用了 Image 對象來發送請求，這樣做非常靈活，主要表現如下幾方面。 1.1 所有瀏覽器都支持 Image 對象，包括那些不支持 XMLHttpRequest 對象的瀏覽器。 1.2 可以避免跨域限制。通常都是一臺服務器要負責處理多臺服務器的錯誤，而這種情況下使用 XMLHttpRequest 是不行的。 1.3 在記錄錯誤的過程中出問題的概率比較低。大多數 Ajax 通信都是由 JavaScript 庫提供的包裝函 數來處理的，如果庫代碼本身有問題，而你還在依賴該庫記錄錯誤，可想而知，錯誤消息是不 可能得到記錄的。 ~~~ * 案例 ~~~ // 只要是使用 try-catch 語句，就應該把相應錯誤記錄到日志中。來看下面的例子。 for (var i=0, len=mods.length; i < len; i++){ try { mods[i].init(); } catch (ex){ logError("nonfatal", "Module init failed: " + ex.message); } } // 講解： 在這里，一旦模塊初始化失敗，就會調用 logError()。第一個參數是"nonfatal"（非致命），表 示錯誤的嚴重程度。第二個參數是上下文信息加上真正的 JavaScript 錯誤消息。記錄到服務器中的錯誤 消息應該盡可能多地帶有上下文信息，以便鑒別導致錯誤的真正原因。 ~~~ >[danger] ##### 在vue main.js 文件記錄全局報錯 ~~~ const errorHandler = (err, vm, info) =>{ console.log('全局異常捕獲') console.error('全局異常捕獲') console.error(err) console.error(vm) console.error(info) function report(err, vm, info) { let reportUrl = '/report' new Image().src = reportUrl + '/error?err='+err+'&info='+info } report(err, vm, info) }; Vue.prototype.errorHandler = errorHandler; Vue.config.errorHandler = errorHandler; ~~~