爲何會有那麼多Script Error錯誤

錯誤監控做爲開發平常的工做保證，但卻常常在錯誤平臺看到的是這種莫明其妙，少得可憐的錯誤信息，讓人無從下手

TL;DR

1. 引出Script Error錯誤，是因爲瀏覽器的同源策略，對於跨域的腳本捕獲的錯誤，只會輸出如此簡短一句；
2. 既然是同源策略，就祭出CORS寶典，給JS請求返回Access-Control-Allow-Origin: *，就能夠解決了；

產生Script Error的緣由

瀏覽器在同源策略限制下，出於安全上的考慮，頁面無權限獲取異常詳情， 只輸出 Script error 的錯誤信息。

在 webkit 的源碼裏能夠看到 Script error的輸出過程，從下面的代碼看到，

1. canIncludeErrorDetails判斷Origin請求頭是否是同源
2. dispatchErrorEvent拋出錯誤詳情，拋出方式由上面的同源與否來決定

bool ScriptExecutionContext::dispatchErrorEvent(const String& errorMessage, int lineNumber, int columnNumber, const String& sourceURL, JSC::Exception* exception, CachedScript* cachedScript)
	{
	    auto* target = errorEventTarget();
	    if (!target)
	        return false;
	
	    RefPtr<ErrorEvent> errorEvent;
	    if (canIncludeErrorDetails(cachedScript, sourceURL))
	        errorEvent = ErrorEvent::create(errorMessage, sourceURL, lineNumber, columnNumber, { vm(), exception ? exception->value() : JSC::jsNull() });
	    else
	        errorEvent = ErrorEvent::create("Script error."_s, { }, 0, 0, { });
	
	    // other code 
	}
	
// FIXME: Should this function be in SecurityContext or SecurityOrigin instead?
	bool ScriptExecutionContext::canIncludeErrorDetails(CachedScript* script, const String& sourceURL)
	{
	    ASSERT(securityOrigin());
	    if (script) {
	        ASSERT(script->origin());
	        ASSERT(securityOrigin()->toString() == script->origin()->toString());
	        return script->isCORSSameOrigin();
	    }
	    return securityOrigin()->canRequest(completeURL(sourceURL));
	}
複製代碼

CORS的解決方案

其實很簡單，給JS請求返回Access-Control-Allow-Origin: *，瀏覽器就能正常經過window.onerror來捕獲詳細的錯誤鳥~

1. nginx上的配置

location ~* \.js$ {
	add_header access-control-allow-origin *;
}
複製代碼

2. 設置*會不會有什麼安全問題呢，沒想出來會有什麼安全問題(若是有想到的能夠留言說下)，JS腳本原本就是能夠跨域請求的。看了下淘寶，也是這麼幹的

3. 如何根據請求源，動態判斷要不要返回Access-Control-Allow-Origin呢

正常狀況下，跨域JS請求是不會發送Origin請求頭，咱們在script標籤里加上crossorigin屬性就能夠使瀏覽器發送了。 而後服務器就能夠根據Origin頭部來判斷來者何人鳥

<script src="other-domain.com/path/to/s.js" crossorigin></script>
複製代碼

---

參考文章：

webkit: trac.webkit.org/browser/tru…

what the heck is 'script error': blog.sentry.io/2016/05/17/…