Trigger error on currentScript when there is an error while fetching

Description of Proposed Feature

Make systemjs dispatch an error event on currentScript when there is a fetch error. An error is already thrown at https://github.com/systemjs/systemjs/blob/abccaf09a54b125150a8be663218d0ba08a5ce90/src/features/script-load.js#L68-L70

The idea would be to add something like the following:

if (currentScript) {
  currentScript.dispatchEvent(new Event('error'))
}

In what way would you use it?

I would like to catch 3 types of error that may happen while loading/parsing and executing the main script of my page. Doing nothing means the page display would be broken and I would have to open the DevTools to see the error. So I would like to detect them to display an error screen. Maybe one day I would also ping a server to track these errors.

See steps to reproduce

An html file

<script id="main-script" type="module" src="./main.js" />
<script type="text/javascript">
  const mainScript = document.querySelector('#main-script')
  mainScript.onerror = () => {
    alert('main script load error')
  }
  const errorEventCallback = () => {
    alert('main script syntax or runtime error')
  }
  window.addEventListener('error', errorEventCallback)
  window.mainScriptExecutionCompleted = () => {
    window.removeEventListener('error', errorEventCallback)
  }
</script>

And inside main.js

window.mainScriptExecutionCompleted()

To trigger the different types of errors I do the following:

network error

- <script id="main-script" type="module" src="./main.js" />
+ <script id="main-script" type="module" src="./not-found.js" />

syntax error

- window.mainScriptExecutionCompleted()
+ a b

runtime error

- window.mainScriptExecutionCompleted()
+ throw new Error("foo")

In this context, when I switch to Systemjs:

- <script id="main-script" type="module" src="./main.js">
+ <script id="main-script">System.import("./main.js")</script>

If main.js contains a syntax error -> I do have error event on window If main.js contains a runtime error -> I do have error event on window If server fails to serve main.js (404, 500, timeout) -> There is no error event on script#main-script

[joeldenning]

The downside of systemjs-module is that imports can start happening before the systemjs extras have been installed, which results in some tricky behavior. But if you’re not using extras, it should work fine.

[dmail]

Yes good point, only a fetch error during main file loading or static import loading should dispatch the error event on the script tag. As your codesanbox shows a dynamic import should not be considered.

I was suggesting to dispatch it for System.import because I am using a tool to transform my html scripts from

<script type="module" src="a.js"></script>

To

<script>System.import("./a.js")</script>

I forgot to consider systemjs-module and should certainly prefer the following output when transforming my html.

<script type="systemjs-module" src="a.js"></script>