所謂web,即使你我素未謀面，便知志趣相投；足不出户，亦知世界之大。
最近收到一個用户提的需求場景，當JavaScript發生異常錯誤時，如果我們能記錄出錯前鼠標點擊、頁面跳轉、網絡請求，控制枱打印等信息，這樣我們便能更快速的帶您重返"失事"現場。我覺得這個想法挺好的，那就加入我們的前端監控試試呢？我實現了一套目前的解決方案：一鍵還原出錯代碼和出錯場景還原。如果你們有更好的解決方案，一定要聯繫我哦！
一鍵還原出錯代碼
現在開發的大部分前端項目，都會採用前端工程化打包工具，比如gulp、grunt、webpack等等，最終編譯出的代碼，都會對源碼進行混淆壓縮，在真實線上項目，js拋出的出錯信息往往是壓縮後的位置和變量信息，這樣導致的問題便是我們需要花更多的時間來找到問題的實際位置，那如何解決這個問題呢？
我們在使用各種壓縮工具的時候，都可以生成*.map文件。簡單説，source map就是一個信息文件，裏面儲存着位置信息。也就是説，轉換後的代碼的每一個位置，所對應的轉換前的位置。有了它，很多工具將直接顯示原始代碼，而不是轉換後的代碼。
下面看看我們前端監控的實現：
1.入口
2.堆棧信息，在右側輸入左側出錯文件的行列號，上傳*.map文件，點擊開始解析，解析成功後，在下面的表中會顯示問錯文件原始名稱，行列號等，下面的編輯器可以去查看對應的出錯位置，方便你快速定位錯誤。
出錯場景還原
通過一鍵還原出錯代碼，我們能找到出錯的位置，可是有些錯誤我們可能還需要知道當初用户正在做些什麼，出錯前發生的一些事情，這樣我們能更迅速的判斷錯誤是怎樣產生的，下面繼續來看看如何實現：
在用户上報了錯誤信息之後，我們可以追溯到當前時間點之前的這個用户頁面跳轉、HTTP請求相關信息，然後根據時間排序，生成一條完整的訪問請求鏈，將這些信息串聯起來，這就是當前用户的“失事現場”。
最終呈現：
喜歡請點個讚唄
或者去https://github.com/kisslove/w... Star一下
或者打賞一下
再或者……
哈哈，想法有點多了。
