为何会有那么多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/…