Решение: Не вызывается слушатель на событие unhandledrejection?

В процессе работы я столкнулся с довольно забавным кейсом. В приложении обработка ошибок происходила на глобальном уровне через window.addEventListener('error', () => {...}) и window.addEventListener('unhandledrejection', () => {...}) для отлова ошибок асинхронного кода.

Проблема заключалась в том, что в Firefox ошибки на проде ловились, а в Chrome нет. Дело в том, что у Chrome есть ограничения на использование слушателей для отлова ошибок - они срабатывают только при включении для подключаемых скриптов CORS. Если у вас такая же проблема и ассеты проекта подключаются с другого домена (например, лежат на S3), то вы по адресу.

Для решения необходимо скриптам прописать атрибут crossorigin='anonymous' для активации безопасного соединения без передачи кредов.

Как добавить скриптам crossorigin=anonymous через Webpack?

Для этого устанавливаем HtmlWebpackPlugin, в конфиге плагина отключаем автоматическое добавление ассетов в html темплейт через свойство inject:

{
  plugins: [new HtmlWebpackPlugin({inject: false})]
}

Теперь, чтобы добавить вручную скрипты в темплейт, вставляем следующее:

<% for(var i=0; i < htmlWebpackPlugin.files.js.length; i++) {%>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[i] %>" crossorigin='anonymous'></script>
<% } %>

Не забываем про файлы стилей

<% for(var i=0; i < htmlWebpackPlugin.files.css.length; i++) {%>
    <link type="text/css" rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[i] %>">
<% } %>

Также для добавления crossorigin атрибута динамически подгружаемым чанкам, добавляем в конфиг вебпака следующее:

{target: 'web', output: {crossOriginLoading: 'anonymous'}}

Проблема решена! Подписывайтесь на меня в Twitter