microsoft / microsoft/TypeScript

Event of type `"error"` incorrectly typed as ErrorEvent even when it's not actually ErrorEvent in practice

Open
#54,040 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Awaiting More Feedback Suggestion
Dominant language
Go
Stars
111k
Forks
14.3k
Avg merge
1d 19h
Merged PRs (30d)
117

Description

Bug Report

🔎 Search Terms

ErrorEvent error capture

🕗 Version & Regression Information

This is the behavior in every version I tried, and I reviewed the FAQ for entries about events

⏯ Playground Link

Playground link with relevant code

💻 Code
const scriptElement = document.createElement('script');
scriptElement.addEventListener('error', event => {
  console.log(`1. script element error event constructor: ${event.constructor.name}`);
});
scriptElement.src = 'https://example.com/nonExistentScript.js';

const linkElement = document.createElement('link');
linkElement.addEventListener('error', event => {
  console.log(`2. link element error event constructor: ${event.constructor.name}`);
});
linkElement.rel = 'stylesheet';
linkElement.href = 'https://example.com/nonExistentStylesheet.css';

window.addEventListener('error', event => {
  console.log(`3. window error event constructor: ${event.constructor.name}`);
});

window.addEventListener('error', event => {
  console.log(`4. window error (with capture) event constructor: ${event.constructor.name}`);
}, {
  capture: true
});

document.head.appendChild(scriptElement);

document.head.appendChild(linkElement);

throw new Error('Uncaught Error');
🙁 Actual behavior

For the above code, the TypeScript compiler types each event callback parameter as ErrorEvent, even though that's not always the type at runtime

Note that the linked playground doesn't show the log messages for the uncaught Error case; here's the full log output:

3. window error event constructor: ErrorEvent
4. window error (with capture) event constructor: ErrorEvent
4. window error (with capture) event constructor: Event
2. link element error event constructor: Event
4. window error (with capture) event constructor: Event
1. script element error event constructor: Event
🙂 Expected behavior

I don't know enough about the DOM "error" event to know what a complete solution would be, but ideally, in the code above, I guess the type for event would be:

  1. Event
  2. Event
  3. ErrorEvent (assuming window non-capture event dispatches of type "error" are always ErrorEvent, which I don't know)
  4. ErrorEvent | Event

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked TypeScript Playground and the DOM "error" event listener typings involved in the examples. Compare the inferred callback parameter types with the logged runtime constructors for script, link, and window events, then ensure the resulting types represent those cases accurately.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.