Uncaught SyntaxError: Unexpected token '<' (at 報錯

一 發新版本導致

問題的根源是伺服器js文件更新了，頁面還在請求以前的js文件。可以保留之前webpack打包的文件，但是時間久了文件體積會積累到很大，而且從產品角度更希望用戶訪問新的資源。所以最好的解決方式是在報錯時給用戶提示，用戶點擊確認後刷新頁面。前端如何能catch到這種錯誤？

目前還沒找到catch這種錯誤的方法，但是，可以模擬這種錯誤的出現。

js文件是以script標簽的形式動態添加到head標簽里的，可以給head綁定DOMNodeInserted這個事件在有子元素插入的時候觸發，可以在回調里拿到插入的標簽名以及標簽的屬性包括src。這樣在所有js資源載入時我們都可以在回調事件里拿到資源路徑，然後在創建一個請求去請求該資源，代碼如下：

    const head = document.getElementsByTagName('head')[0]
    head.addEventListener('DOMNodeInserted', e => {
      // 獲取標簽名
      const type = e.target.tagName
      // 獲取資源路徑
      const url = e.target.src
      if (type === 'SCRIPT' && url) { 
        // 創建請求，如果需要低版本瀏覽器相容的，請註意
        let xhr = new XMLHttpRequest()
        xhr.open('get', url)
        xhr.onload = () => {
          const text = xhr.responseText
          if (text.indexOf('<') === 0) {
            this.$modal.info({
              title: '檢測到有新的版本發佈，需要刷新頁面以訪問最新內容',
              width: 350,
              okText: '確定',
              onOk() {
                location.reload()
              }
            })
          }
        }
        xhr.send()
      }
    })