Why does `window.addEventListener(“error”, …)` sometimes give “Script error.” with no other details?

(I initially thought this was just a Chrome bug, but I’ve tested in Firefox and it has similar weird behavior, and even uses the exact same “Script error.” string in the event.message, so I’m wondering whether this is a spec-related issue.)

My intuition with the code below is of course that each of the tests (where I purposely input an invalid value into a constructor) should produce the same ErrorEvent (just with different line numbers and stuff) in the window.addEventListener("error", ...) handler, but as noted in the comments of this code block, they produce different behavior.

<script>
  window.addEventListener("error", function(e) {
    console.error("window error handler:", e);
  })
</script>

<!-- Note: This is just an immutable snapshot of https://codemirror.net/codemirror.js and note that the txt extension doesn't affect this issue - it occurs with js extension too. The txt was just because github doesn't allow uploading js files. -->
<script src="https://github.com/user-attachments/files/17729754/codemirror6-november-13-2024.txt"></script>

<script>
  let { EditorView } = CM["@codemirror/view"];
</script>

<script>
  new EditorView(null); // Example 1: just "Script error."
</script>

<script type="module">
  new EditorView(null); // Example 2: just "Script error."
</script>

<script type="module">
  await new Promise(r => setTimeout(r, 10));
  new EditorView(null); // Example 3: just "Script error."
</script>

<script>
  (async function() {
    new EditorView(null); // Example 4: no window error event at all??
  })();
</script>

<script type="module">
  let { EditorView } = await import("https://esm.sh/@codemirror/[email protected]");
  new EditorView(null); // Example 5: ✅ produces error event with the actual error attached 
</script>


<!-- note: this uses a data url, but i tested using an actual server to server this file and it's the same result -->
<script src="data:text/plain,window.foo=function(a){a.b.c}"></script>
<script>
  foo(1); // Example 6: ✅ produces error event with the actual error attached 
  // caveat: in firefox, specifically, this data URL version gives "Script error.", but substituting it with a server url version results in the same behavior as chrome.
  // chrome gives the 'correct' behavior for both cases.
</script>

Notes:

  • I initially thought it had something to do with module scripts, but the last example shows that’s not the cause.
  • I thought maybe Example 4 had something to do with needing a window.addEventListener("unhandledrejection", ...) handler, but I tried that and it didn’t receive any events.
  • The ErrorEvent also includes the filename property, which gives the script that caused it (but includes no line number, stack, etc.)

Extra Context:

I’m building a developer tool which hooks into the error events on the page to help the developer understand the cause/source of the error. I don’t control the code on the page, so I need to be able to get the error details without re-writing the code.

Hence “you could just avoid writing your code/imports in XYZ form” is unfortunately not a solution for me.