https://github.com/lxsmnsyc/solid-error-overlay

Unstyled, dev error overlays for SolidJS
https://github.com/lxsmnsyc/solid-error-overlay

Last synced: 3 months ago
JSON representation

Unstyled, dev error overlays for SolidJS

• Host: GitHub
• URL: https://github.com/lxsmnsyc/solid-error-overlay
• Owner: lxsmnsyc
• License: mit
• Created: 2022-01-05T08:11:06.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-10-06T09:20:48.000Z (about 2 years ago)
• Last Synced: 2024-10-06T11:16:05.024Z (3 months ago)
• Language: TypeScript
• Size: 1.03 MB
• Stars: 22
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# solid-error-overlay



  



> Unstyled, headless Error Overlay for SolidJS

[![NPM](https://img.shields.io/npm/v/solid-error-overlay.svg)](https://www.npmjs.com/package/solid-error-overlay) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-error-overlay/tree/main/examples/demo)

## Install

```bash

npm i solid-error-overlay

```

```bash

yarn add solid-error-overlay

```

```bash

pnpm add solid-error-overlay

```

## Features

- Stack Trace - inspect the stack trace of the error

- Source Maps view - View the source code of the stack trace's origin, switch between compiled and original source

- Error Pagination - Capture multiple errors

- Global Errors - Capture unhandled global errors

- No Interruption - Display the overlay without interrupting the current page (only works for errors not originating from the component.)

## Usage

### Simplest usage

```js

import { ErrorOverlay } from 'solid-error-overlay';

 handleError(error)}>

  

```

### Customization

The `` component is unstyled and headless, therefore it is highly customizable.

The internal structure of the component is as follows:

```jsx

  

    

      

      

      

    

    

      

      

    

  

  

    

    

      

      

    

  

```

Each of the components can be overriden through ``'s props:

```js

 (

    Previous

  )}

  {...overrides}

>

  

```

See the [demo](https://github.com/LXSMNSYC/solid-error-overlay/tree/main/examples/demo) for expanded use.

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)