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</title>
<script type="text/javascript">
window.onerror = function(errorMessage, scriptURI, lineNumber, columnNumber, error){
console.log(errorMessage);
console.log(scriptURI);
console.log(lineNumber);
console.log(columnNumber);
console.log(error);
}
</script>
<script type="text/javascript" src="./scripterror.js"></script>
</head>
<body>
</body>
</html>
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和七牛。
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專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了7億+錯誤事件,得到了Google、360、金山軟件、百姓網等眾多知名用戶的認可。歡迎免費試用!
轉載時請注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/04/06/test-script-error/
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。