前端 JavaScript 錯誤收集

時間 2019-11-09

原文原文鏈接

前言

最近有個頁面寫好後在 Chrome devtools 裏運行正常，可是手機上運行時卻出了問題，就想着在代碼裏添加下面的內容，到手機上顯示錯誤消息javascript

window.onerror = function (msg, url, lineNo, columnNo, error) {
  alert('Error: ' + msg + ' Script: ' + url + '\nPosition: ' + lineNo + ' / ' + columnNo
   + '\nStackTrace: ' +  error);
  return false;
};

但是到手機上一看，錯誤信息並無打印出來，而是 Error: Script error
只好放狗 (Google) 一查，原來是跨域問題html

前端

解決跨域問題

script 添加 crossorigin 屬性java
```
<script crossorigin src="...">
```
而後爲 js 文件添加跨域 header Access-Control-Allow-Origin: *（怎樣添加？）跨域

收集 JavaScript 錯誤

在工做中，咱們常常遇到本地沒法重現的錯誤，咱們能夠將 onerror 捕獲的錯誤信息提交到服務器，這樣咱們就知道用戶在訪問咱們的網頁時的 js 錯誤，方便 BUG 定位等。瀏覽器

window.onerror = function (msg, url, lineNo, columnNo, error) {
  var errorData = {
    msg: msg,
    url: url,
    lineNo: lineNo,
    columnNo: columnNo,
    error: error,
    ua: navigator.userAgent // 須要的調試的其它信息也能夠收集，好比已登陸的用戶id
  };
  $.post('/js-logger', errorData);
  return false;
};