關於錯誤監控的實現，有兩個方案，

1.只在前端做一個監控，不做儲存使用覆盤使用，優化客戶體驗。

2.在資料庫中建立問題清單。需要後端配合（也可自行完成）。把所有問題記錄下來，可新增通知功能。方便隨時調取覆盤。

業務需要目前只用優化一下客戶體驗此處先放第一個方案。

首先錯誤監控要做的第一件事是捕獲異常，

window.onerror = (msg, url, row, col, error) => {
  const exception = {
    // 上報錯誤歸類
    mechanism: {
      type: 'js'
    },
    // 錯誤資訊
    value: msg,
    
 
// 錯誤型別
    type: error.name || 'UnKnowun',
    // 解析後的錯誤堆疊
    stackTrace: {
      frames: parseStackFrames(error),
    },
    meta: {
      url, // 檔案地址
      row, // 行號
      col, // 列號
    }
  };
  // 獲取了報錯詳情，就可以走上報方法上報錯誤資訊
  console.log('JS執行error', exception);
  return true; // 返回 true,阻止了預設事件執行,也就是原本將要在控制檯列印的錯誤資訊
 

};

方法二：

// 初始化 JS異常 的資料獲取和上報
initJsError = (): void => {
  const handler = (event: ErrorEvent) => {
    // 阻止向上丟擲控制檯報錯
    event.preventDefault();
    // 如果不是 JS異常 就結束
    if (getErrorKey(event) !== mechanismType.JS) return;
    const exception = {
      // 上報錯誤歸類
      mechanism: {
        type: mechanismType.JS,
      },
      
 
// 錯誤資訊
      value: event.message,
      // 錯誤型別
      type: (event.error && event.error.name) || 'UnKnowun',
      // 解析後的錯誤堆疊
      stackTrace: {
        frames: parseStackFrames(event.error),
      },
      // 使用者行為追蹤 behaviorTracking 在 errorSendHandler 中統一封裝
      // 頁面基本資訊 pageInformation 也在 errorSendHandler 中統一封裝
      // 錯誤的標識碼
      errorUid: getErrorUid(`${mechanismType.JS}-${event.message}-${event.filename}`),
      // 附帶資訊
      meta: {
        // file 錯誤所處的檔案地址
        file: event.filename,
        // col 錯誤列號
        col: event.colno,
        // row 錯誤行號
        row: event.lineno,
      },
    } as exceptionMetrics;
    // 一般錯誤異常立刻上報，不用快取在本地
    this.errorSendHandler(exception);
  };
  window.addEventListener('error', (event) => handler(event), true);
};

監聽非同步的方法：unhandledrejection 

記於2022/5/25，明天繼續補全，要板磚了

方案二可以使用nodejs搭建後臺與資料庫進行資料互動。