https://github.com/crownframework/svelte-error-boundary

Error Boundaries for Svelte
https://github.com/crownframework/svelte-error-boundary

svelte

Last synced: 26 days ago
JSON representation

Error Boundaries for Svelte

• Host: GitHub
• URL: https://github.com/crownframework/svelte-error-boundary
• Owner: CrownFramework
• License: mit
• Created: 2020-11-08T18:08:01.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-01-04T21:46:11.000Z (almost 3 years ago)
• Last Synced: 2024-03-14T15:51:09.611Z (8 months ago)
• Topics: svelte
• Language: JavaScript
• Homepage:
• Size: 10.7 KB
• Stars: 72
• Watchers: 4
• Forks: 5
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://github.com/sveltejs/svelte/issues/1096)

[svelte#3587](https://github.com/sveltejs/svelte/issues/#3587)

[svelte#3733](https://github.com/sveltejs/svelte/issues/#3733)

**[REPL Demo](https://svelte.dev/repl/9d44bbcf30444cd08cca6b85f07f2e2a?version=3.29.4)**

## Installation

```bash

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

```

## Use default error boundary

```svelte

  import { Boundary } from '@crownframework/svelte-error-boundary';

  let a;

  {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](./src/DefaultBoundary.svelte)

as inspiration.

### CustomBoundary.js

```js

import { createBoundary } from '@crownframework/svelte-error-boundary';

import Component from './CustomBoundaryComponent.svelte';

export default createBoundary(Component);

```

### Usage

```svelte

   // You might need to add .js extension depending on your bundler config

  import Boundary from './CustomBoundary';

  let a;

  {a.b.c}

```

## TODO

- [x] Catch client side errors after initial mount

- [ ] Allow client side recovery if error condition goes away

- [ ] Find a way to reliablty catch errors originating from local state changes in the subtree (#3)

## 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.