Script error.深度測試
Script error.全面解析](https://blog.fundebug.com/2017/04/05/understand-script-error/)中我們介紹了Script error.的由來。這篇部落格，我們將各種情況（不同瀏覽器、本地遠端託管JS檔案）考慮進去，進行一個深度的測試，為讀者帶來一個全面的瞭解。
GitHub倉庫: Fundebug/script-error
基本準備
index.html中使用onerror監控錯誤。
<!DOCTYPE html>
<html>
<head>
<title>Test Script error</ scripterror.js中丟擲一個Error物件：
throw new Error('Hello, Fundebug');
該Error物件會被window.onerror捕獲。
本地直接開啟
如果我們直接在本地開啟index.html, 可以看到Safari, Firefox, IE瀏覽器都能正確打印出錯誤資訊。
唯獨Chrome只顯示Script error.
這是因為Chrome瀏覽器預設不允許訪問本地檔案：
To load local resources in Chrome when just using your local computer and not using a webserver you need to add the --allow-file-access-from-files flag.
如果一定要使用，需要開啟訪問本地檔案的候選項，可以參考chrome 等瀏覽器不支援本地ajax請求的問題。
使用伺服器掛載靜態資源
我們將使用http-server。
安裝http-server:
npm install http-server -g
執行http-server:
http-server
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://172.20.1.86:8080
http://192.168.59.100:8080
Hit CTRL-C to stop the server
訪問http://localhost:8080/index.html
情況三：將scripterror.js託管
為了測試Script error., 我將scripterror.js分別託管在了Coding和七牛。
Coding
index.html
<script type="text/javascript" src="http://coding.net/u/stefanzan/p/stefanzan/git/raw/coding-pages/public/js/src/scripterror.js"></script>
Chrome, Safari和IE瀏覽器都將錯誤資訊隱藏，返回Script error.。
不過Firefox比較特別，依然將錯誤資訊完整的打印出來，大概是為了方便開發者排錯。
七牛雲
index.html
<script type="text/javascript" src="https://og6593g2z.qnssl.com/scripterror.js"></script>
結果和託管在Coding上是一樣的。
將引入指令碼修改一下，加入crossorigin="anaonymous":
<script type="text/javascript" src="https://og6593g2z.qnssl.com/scripterror.js" crossorigin="anonymous"></script>
再次執行執行，在不同瀏覽器的表現如下：
Chrome, Safari可以獲取詳細的出錯資訊了，但是IE瀏覽器依然是Script error. 。這一點比較奇怪, 根據MDN - CORS settings attributes，IE11應該是沒有問題的。
在這裡我將Coding和七牛對於scripterror.js的Response Headers對一下:
七牛的Access-Control-Allow-Origin允許來自所有域名的請求，而Coding沒有。七牛是一個資源託管分發平臺，因此特意配置了不同的返回頭，方便開發者將指令碼放在七牛雲同時又可以拿到出錯資訊。
下一篇部落格中，我們將提出Script error的解決方法。
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了7億+錯誤事件，得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！
版權宣告
轉載時請註明作者Fundebug以及本文地址：