Web APP如何搜集用戶使用過程中的錯誤信息（Bug）？

01-26

我之前做過Android開發，一般都會使用第三方的數據搜集包，其中會有用戶使用時崩潰的錯誤信息，方便進行debug，比如友盟和BugTag。它們會搜集很多信息，比如用戶手機型號，操作系統版本，錯誤頁面，錯誤碼，錯誤信息等等。非常方便。
這幾天在學著做Web App的開發（不是跑在手機上的，就是直接在瀏覽器打開的那種），覺得Web端其實也面臨類似的問題，不知道Web端是否有類似的第三方工具SDK？
如果沒有，Web端該如何進行有效的錯誤處理呢？

多謝

謝邀

1. 善用 assert() ，儘早把異常拋出

2. 使用 window.onerror 上報 uncaught error ，包括 code 、 message 、 stack 、 line number 等信息，以及友好錯誤提示

3. handled error 是不是就沒有問題呢？有時候我們還可以在一些邏輯分支上打點

以上方法是漸進性的，開銷小，工作量小，收效大。

利用這些方法，我一個人就把一個有稀爛傾向的 Web app 修的差不多了，架構沒變，但異常解決得很快，兩天就修了幾十個難重現的 bug ，還可以把錯誤日誌做出統計報表用來邀功請賞。

在以上基礎上還可以引入單元測試、自動化測試等，但這個就比較費事了，需要謹慎。

上報可以用百度統計，但百度統計實時性差，可定製性差。報到自己服務器上，自己跑報表也是可以的。

Google：web exception tracking，無數第三方服務可用。

如果App面向國內用戶，最好不用國外三方服務，因為不保證穩定可訪問。Error Reporting其實並不難做，只需要在伺服器開放一個HTTP POST的節點，客戶端做一點封裝，需要Log的時候調用，把信息POST到伺服器存起來就行了，客戶端只需要做好Fail safe的體驗，reporting的過程對用戶透明就可以。

既然題主有 Android 開發經驗，我簡單介紹一下 Web App 項目中通用的錯誤處理方式。

異常收集

和 Java 不同，在 Web App 中存在多種不同的異常來源。

一般而言，對於代碼邏輯相關的異常，都可以在 Javascript 中捕獲。如果發生錯誤的對象會拋出異常，我們通過 try catch 語法處理；也可以手工拋出異常，使用一個統一的回調來處理。

var localStorage; try { localStorage.setItem(key, value); } catch(e) { // 寫入錯誤 // handleError(e) }

如果是 DOM 相關的異常，可以監聽 DOM 的 Error event。例如頭像載入異常時，fallback 到默認頭像並上報，可以用類似這樣的寫法：

$(".avatar").error(function(){ $(this).attr("src", "/assets/images/default-avatar.jpg"); // handle Error(new Error("")) });

異常上報

現在 Log management 服務很多，樓主可以搜索一個喜歡的。當然，自行搭建 log server 也不是不可以。我使用的是一站式解決方案 Papertrail。它有諸多好處：

支持不同的上報來源和方式，比如伺服器錯誤、iOS/Android客戶端錯誤、瀏覽器錯誤。在一個 console 可以看到所有的異常。
支持關鍵字報警和通知。
支持通過時間和關鍵字搜索不同的 Log 上報來源。

使用方法很簡單，參考官方Javascript接入文檔即可。

雖然有牆，但在國內使用 Papertrail 問題不大。如果要求沒那麼高的話，也可以考慮直接使用 Leancloud 的 LeanStorage 服務。

謝邀。

APP是因為是類似傳統的C/S結構，伺服器與客戶端分離，客戶端的崩潰與報錯，服務端都是無法及時收集到數據，還有就是減少一定的工作量。

而Web這種服務端，除非是 JS 運行錯誤，要不然其實所謂的「報錯」與「崩潰」都是在服務端發生的。

本身做好一個全局鉤子即可。就算什麼都沒做，如果用的是 Windows 伺服器，還可以通過「事件」查看異常信息。

試試oneapm

雖然自己可以實現，實現也不難，但你真的去做的時候，仍然很費人力的，開發人員往往有更重要的事要做。我們是用的這個服務 JavaScript Error Tracking from TrackJS，不完美，但很好用，對多數網站也夠用了。