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
npm i -D @crownframework/svelte-error-boundary
Use default error boundary
<script>
import { Boundary } from '@crownframework/svelte-error-boundary';
let a;
</script>
<!-- The code inside the boundary will throw -->
<Boundary onError={console.error}>
{a.b.c}
</Boundary>
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:
- Have one unnamed slot (this is what will be "enhanced" with an error boundary)
- 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.
CustomBoundary.js
import { createBoundary } from '@crownframework/svelte-error-boundary';
import Component from './CustomBoundaryComponent.svelte';
export default createBoundary(Component);
Usage
<script>
// You might need to add .js extension depending on your bundler config
import Boundary from './CustomBoundary';
let a;
</script>
<!-- The code inside the boundary will throw -->
<Boundary onError={console.error}>
{a.b.c}
</Boundary>
TODO
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.