unexpected error in template breaks the component

[thojanssens]

Describe the bug

If an unexpected error happens in a template, the component is not usable anymore, and the page must be refreshed.

For example, I have a component that is a dialog, and after some user action, I try to access a property on a null value in the template (because of a programming error), and I have the error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'name')

After that, the dialog component can't be loaded anymore at all. Application is now unusable.

See REPL where I reproduce it.
Note that I marked this phenomenon as severe (in Severity field of this issue), because it is a major nuisance for the users and the success of my app, and the app becomes unusable.

Reproduction

https://svelte.dev/repl/00400e81d69e4907ab393a2f4644879c?version=3.44.1

Dummy demo where you can enter text and it decorates with emojis. If you enter "crash", the application becomes unusable.

Logs

Error: Uncaught (in promise): Cannot read properties of null (reading 'foo')

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 7.13 GB / 15.74 GB
  Binaries:
    Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 95.0.4638.54
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.40)
    Internet Explorer: 11.0.19041.1202

Severity

blocking all usage of svelte

[dummdidumm]

What you want is an error boundary to keep your app from breaking when something breaks within the boundary. There's a pending RFC for that: sveltejs/rfcs#46 . There's also a community package which might be of use in the meantime: https://github.com/crownframework/svelte-error-boundary