簡簡單單躲過JavaScript的3個錯誤釋出

尛沫發表於2014-05-04
JavaScript

在JavaScript中總會遇到的某些小問題，而人們總是被這些瑣事糾纏住花費了大量時間，其實只要唾手可得的改進，就能讓你的應用正常執行，獲得大的成長。

Web應用程式開發是傾向於在客戶端執行所有使用者邏輯和互動程式碼，讓伺服器暴露REST或者RPC介面。根本原因是在網際網路上服務你的程式碼和資料，執行在一些隨機的瀏覽器上，在JavaScript中，這是一種你需要特別小心的語言，它是一個完全缺乏程式碼部署的平臺。而且它不會很快就得到改善。

  1. 剝離“快取清除”頭資訊

    你可能使用CDN來快取靜態資源，這當然是合理的。如果你向伺服器請求非快取的資源（比如在AWS端使用custom-origin將檔案指向真實的網路站點），這就需要小心了。你可能會在部署新版本的檔案後新增一段 快取清除的字串（頭資訊）到檔名上來達到這個目的，這樣你的檔名看起來是這樣的：

    http://example.com/js/main__V0123456789abcdef__.js

    這很容易做到，你可以選擇任意的Hash演算法來生成一段指紋資訊作為這個字串，這樣它就會隨著檔案內容變化而變化。當新的url被引用時，它不可能被快取，這樣就可以獲取到伺服器上的新版本。錯誤就發生在這裡。在網路上有很多都建議剝離“快取清除”頭資訊，而是讓你的伺服器直接提供新版本的檔案。如果你有多臺伺服器叢集這可能導致你的站點上不同檔案（如：html、js）的版本不一致（如js已更新但是html（從另一臺伺服器請求）仍然是舊的），不僅如此，更嚴重是它很容易導致CDN快取了錯誤的版本。這個錯誤是這樣發生的：

    • 初始階段，所有的伺服器都是HTML1 和JS1。
    • 伺服器A重啟了，並提供HTML2和JS2。
    • 一個客戶端向CDN請求main_V2_.js，這個時候這個檔案是新的所以CDN上沒有快取。
    • CDN把這個請求傳給了你設定的custom origin，碰巧這個請求發到了伺服器B上。
    • 伺服器B剝離了“快取清除”字串並返回舊的版本。
    • CDN把舊版的的檔案當新的快取了。

    這件事情考慮起來很簡單明瞭，但是盲目的聽從網路上的建議很可能導致錯誤。更糟糕的是在你這看起來一切都是好的你根本不知道發生了錯誤，但是其它地區的使用者使用了不同CDN很可能快取了錯誤的版本。解決方案是不要剝離“快取清除”字串並將靜態資源存放在能夠正確支援各個版本的地方

  2. 處理龐大的JS炸彈

    每個人都知道，我們需要壓縮我們的JavaScript檔案，並把它們連線在一起。但是盲目地這樣做並非明智之舉。如果連線的檔案很大，那麼更有效的方法就是並行化。另外，如果你需要頻繁的修改檔案的某一部分，你可能會導致很多地方失效，而檔案很大部分卻沒有被修改過。

    如果把頻繁修改的部分分離出來，那麼就可以解決兩邊的問題。我建議使用require.js，它可以實現對你的JavaScript的真正的依賴關係管理，而且第一次使用的時候，設定很簡單（稍後新增會很痛苦），而且可以幫助你理解和管理依賴關係，包括一些高階選項，例如非同步載入。

    需要注意的：require.js會等待一段時間後會放棄載入資源，這個可以通過指定waitSeconds選項實現，這個選項的預設值似乎7秒，它依賴於你的使用者在哪裡（例如：手機），可以是很短的時間。

  3. 沒有彙總錯誤事件

    你不能只讓你的JavaScript上線使用，而不關心它的執行情況。你不可能測試每一個瀏覽器和每個使用者的狀態組合。另外，不同的載入時間可能導致怪異的狀態。所以，建立某種反饋機制來判斷你的使用者是否遇到錯誤，變得十分重要。這很簡單，你只需通過指定一個全域性錯誤處理程式，收集錯誤，併傳送會伺服器。以下是一個例子：

    window.onerror = function(message, url, linenumber) {
    sendToServer({message: message, line: linenumber, url: url});
}

    棘手的部分是，很多時候會出現一些非0的錯誤，因為使用者可能安裝了各種怪異的外掛或者其他。所以你需要跟蹤穩定的狀態到底是什麼，還有是否有任何的偏差。

    ReadyForZero，我們在頂層捕獲onError事件，並把它們傳送會伺服器，然後生成一個日報，彙總多少個使用者發生了錯誤，和這些錯誤發生在哪裡。我們發現很多時候，錯誤訊息並不足夠，所以我們同樣需要從我們的事件系統回傳最後幾個事件。通過分析使用者最近觸發的Backbone或者JQuery事件，對於獲取當時使用者觸發錯誤時候的上下文資訊，有很大的幫助。

本文為Anyforweb技術分享部落格，需要了解網站建設相關，請訪問anyforweb.com。

相關文章