Svelte Error Boundary

This package provides a simple error boundary component for Svelte that can be
can be used with both DOM and SSR targets. The default error boundary component
provides an optional onError callback that can be used to log the error to
e.g. Sentry.

This package also provides a createBoundary function that can be used to
monkey-patch an existing Svelte component in order to create custom error
state UIs.

Monkey-patching is obviously less than ideal since this might break without
warning in future versions of Svelte. This library should be considered merely
as a stop-gap solution for those using Svelte in production today.

Relevant Svelte issues: svelte#1096
svelte##3587
svelte##3733

REPL Demo

Installation

``bash
npm i -D @crownframework/svelte-error-boundary
`

Use default error boundary

`svelte




{a.b.c}

`

Create custom error boundary

You can use the createBoundary function to monkey-patch any ordinary Svelte
component in to an error boundary.

The component needs to meet the following criteria:

1. Have one unnamed slot (this is what will be "enhanced" with an error boundary)
2. Accept an error prop which will contain a writable store with the last error

Feel free to use the default error boundary component
as inspiration.

$3

`js
import { createBoundary } from '@crownframework/svelte-error-boundary';
import Component from './CustomBoundaryComponent.svelte';
export default createBoundary(Component);
`

$3

`svelte




{a.b.c}

``

TODO

- [x] Catch client side errors after initial mount
- [ ] Allow client side recovery if error condition goes away

Credits

The initial version of this package was based on a proof of concept by @halfnelson:
https://svelte.dev/repl/006facb65ece4f808cd733e838783228?version=3.22.2

License

MIT.