window.onerrorでエラー内容が取れない時の対応

window.onerrorについて

window.onerror = function (msg, file, line, column, err) {
	/*
	msg: error message
	file: file path
	line: row number
	column: column number
	err: error object
	*/ 
	alert(msg + file + ':' + line);
};

window.onerrorに関数を設定しておくと、処理中catchされてないエラー、つまりUncaughtErrorの情報をここで取得することが出来ます。

"Script error. line: 0"

window.onerror = function (msg, file, line, column, err) {
	console.error(msg + file + ':' + line);
};

throw new Error('test');

この時、msgには"Uncaught Error test"が渡ることが期待されますが、何故か"Script error."が常に渡ってくる場合があります。コンソールのログには出力されますが、エラーログを送信するなどの処理を書いている場合、原因を特定できないため非常に困ります。

原因と対策

これはブラウザのSame-Origin Policyによるもので、別ドメインのjsファイルをロードした時に起こります。
解決するためにはCORSを適切に設定する必要があります

• Access-Control-Allow-Originをヘッダに設定

  サーバー側の設定でヘッダーに

  Access-Control-Allow-Origin: [許可するURI]
  

  を追加します。全てのアクセス元に対して許可する場合は*を指定します。

• crossorigin属性を設定

  クライアント側でscriptタグに以下のようにcrossorigin属性を追加します。

  <script type="text/javascript" src="hoge.js" crossorigin="anonymous"></script>
  

requirejsの対応

require.jsを利用してロードする場合、前述したような対応はとれません。
require.loadをoverrideする方法もありますが、あまり選びたくない方法です。
そこで調べていると既にissueがあがっていました。

require.createNodeをoverrideして属性を追加できるようにしてくれたようです。

元のコード

require.createNode = function (config, moduleName, url) {
	var node = config.xhtml ?
	document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') :
	document.createElement('script');

	node.type = config.scriptType || 'text/javascript';
	node.charset = 'utf-8';
	node.async = true;
	return node;
};

crossorigin属性を追加

require.createNode = function (config, moduleName, url) {
	var node = config.xhtml ?
	document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') :
	document.createElement('script');

	node.type = config.scriptType || 'text/javascript';
	node.charset = 'utf-8';
	node.async = true;
	node.setAttribute('crossorigin', 'anonymous');
	return node;
};

これでrequirejsでロードする場合にも対応出来ました。