Svelte 5: onerror event is not called on img element

[HighFunctioningSociopathSH]

Describe the bug

I noticed that the onerror event is not called when using an img element. weirdly it works in the playground so test it on your own machine.

Reproduction

<svelte:options runes />

<script lang="ts">
</script>

<img
  src={"asdf"}
  onerror={() => {
    console.log("something");
  }}
/>

The onerror event is not called even though a 404 error is thrown

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
    Memory: 6.72 GB / 15.63 GB
  Binaries:
    Node: 18.14.2 - C:\Program Files\nodejs\node.EXE
    npm: 9.7.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.144)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    svelte: ^5.0.0-next.41 => 5.0.0-next.41

Severity

annoyance

[gtm-nayan]

I'm assuming you're using SSR when you see the error, hence why it's fine in the REPL.

The image finishes loading or errors before the javascript does so it misses the event...

You can maybe workaround it with something like, or some global script that replays the events

function action(img, onerror) {
    img.onerror = onerror;
    img_2.onload = () => img.onerror = null;
    const img_2= new Image();
    img_2.src = img.src;
}

[Conduitry]

I can't find it right now, but this has come up before. I don't think we should have special behavior for error events where we simulate them if the image element is already in an error state by the time we get around to attaching the event handler. What I'd suggested at the time was to write an action that checks the complete and if it's already true, uses some heuristic to determine whether the loading failed, and if so, immediately calls the callback. If complete=false, then it attaches the error event handler.

The lack of a definitive heuristic for what constitutes an image that has failed to load is what made us hesitant to offer a built-in action that did this, I think.

[gtm-nayan]

Back when I ran into this problem, my "heuristic" of choice was onerror="this.__errored = true" but that doesn't work anymore unfortunately

[HighFunctioningSociopathSH]

I'm assuming you're using SSR when you see the error, hence why it's fine in the REPL.

I'm not using SSR and what I'm trying to achieve works perfectly fine in Svelte 4. The code is written in the main +page and this issue is only happening after immigration to Svelte 5.

[trueadm]

I'm assuming you're using SSR when you see the error, hence why it's fine in the REPL.

I'm not using SSR and what I'm trying to achieve works perfectly fine in Svelte 4. The code is written in the main +page and this issue is only happening after immigration to Svelte 5.

Can you provide a reproduction where this works fine in Svelte 4? onload and onerror will both fire too soon when SSR+hydration occurs. However, just like Svelte 4, this works fine for me in Svelte 5 when purely rendered on the client – which is why it works in the playground fine for you.

[HighFunctioningSociopathSH]

You are right and I can't seem to recreate it properly. Just like you said it will run fine if it's only on the client.

[trueadm]

Closing this for now then :)