Svelte Error Boundary
svelte-error-boundary
Partly fix error boundary Svelte 3 problem to prevent full app crash on initialization
:warning: Warning: this package fixes only the problem with initialization errors. Runtime errors could not be handled with this approach
The key issue is that some of the built-in methods need to be wrapped in Svelte to create runtime error handling support, but there is only one pure "true" way to do this, and that is by implementing this built-in feature in Svelte.
There is another "runtime" error boundary package called @crownframework/svelte-error-boundary. But it also does not handle all errors due to this array of Svelte methods GUARDED_BLOCK_FNS, view this issue: "That you for reporting this. This does indeed seem to be either a bug or – more likely – a limitation of the current implementation". Another potential disadvantave of @crownframework/svelte-error-boundary is too much more created try...catch blocks. This could affect the browser's built-in code optimizations. For example, according to this Stack Overflow answer: "The problem is that V8 didn't support it in their optimizing compiler until version 6 of the engine, so the entire containing function that syntactically contains a try catch will not be optimized". And according Wikipedia V8 6.0 is equal to Chrome 60. The presence of a large number of try...catch blocks will slow down browsers younger than Chrome 60.
:cake: Features
Right now Svelte 3 has no built-in error handling in components out of the box. To solve this issue this package was created inspired by this thread.
- Simply applies Javascript
try...catchstatement to child components :lock: - Easy to use (as traditional component)
Install
npm i svelte-error-boundary
Usage
<script>
import ErrorBoundary from 'svelte-error-boundary'
...
</script>
<ErrorBoundary name="custom try catch">
<BrokenComponent />
</ErrorBoundary>
API
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | undefined |
Custom name for error scope |
| handleError | function | undefined |
Function to handle error |
Function handleError(error, name) can be used to send error logs to server and so on.
Note that this component does not support SSR (svelte.compile with option: generate: 'ssr') and does not support hydration (svelte.compile with option: hydratable: true).
Please use this ErrorBoundary component directly over the BrokenComponent, otherwise errors may appear outside. You can manually test the ErrorBoundary component by inserting throw new Error('test') inside your component.
License
MIT © Denis Stasyev
