Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@crownframework/svelte-error-boundary

Package Overview
Dependencies
Maintainers
2
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@crownframework/svelte-error-boundary

This package provides a simple error boundary as well as an "higher order component" that can be used to create custom error boundaries.

  • 1.0.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
2
Created
Source

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:

  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.

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

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

Keywords

FAQs

Package last updated on 17 Nov 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc