Bad error messages (Svelte 5 & 4)

[KevsRepos]

Describe the bug

When referencing properties of undefined state, you'll get a "cryptic" error message: get(...) is undefined, which is not very helpful while debugging. Filed as a Bug because I think exposing errors that reference the compiled code, is not the intended way of describing problems with the code to the dev.

Keep in mind that this is not only Svelte 5 specific. Svelte 4 also has these cryptic errors like ctx[0] is undefined. It'd be nice if Svelte 5 finally fixes this.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAA42PQU_DMAyF_4qxdgBpbe-lm4S48B8oh9C4zFIaR4k3bar630lTMQ5cOD77PT9_M47sKGH7PqM3E2GLLyHgHvUWVpEu5JSyTnKOwzrp0hA56LH3vfIUJCq8nthZGKNM0GPdFFlvyR6fszFbHSkMxXeAXVKj9PiUV13ze85326FP9rbVE6fDXBILNGW9qTpECRT1tkD3UFVgrAXjQYKyeONyiWHP_gtWl1GJoAIjX6GqjpljEssjk8VW45mW_R27dP8XnK4FfBCfFH4eymQ9vpFzUqjvaH9bP5ZvR6JTq3gBAAA=

Logs

No response

System Info

System:
    OS: Linux 6.5 Pop!_OS 22.04 LTS
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-1235U
    Memory: 7.08 GB / 15.32 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 19.3.0 - ~/.nvm/versions/node/v19.3.0/bin/node
    npm: 9.2.0 - ~/.nvm/versions/node/v19.3.0/bin/npm
  Browsers:
    Chrome: 119.0.6045.199
    Firefox: 120.0

Severity

annoyance

[dummdidumm]

I honestly don't see how we can catch all these errors correctly, and then translate them to something that is helpful to the user, without adding try-catch everywhere. The errors are also browser-dependent, Chrome for example gives a much more helpful Cannot read properties of undefined (reading 'property') error. People could also have the errors localized, and our try-catch would un-localize that, but only in some cases, and it also would read different from the other error messages one has come to expect from their browser.

All in all, I don't think this is feasible. Leaving this open so other maintainers can chime in.

[7nik]

A wild idea, but what about moving the getter inside the signal? So

// input
myVar.foo.bar
// current output
$.get(myVar).foo.bar
// propsed output
myVar.get().foo.bar
// or
myVar.value.foo.bar