Unstyled, dev error overlays for SolidJS

Overview

solid-error-overlay

Example

Unstyled, headless Error Overlay for SolidJS

NPM JavaScript Style GuideOpen in CodeSandbox

Install

npm i solid-error-overlay
yarn add solid-error-overlay
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

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

<ErrorOverlay onError={(error) => handleError(error)}>
  <App />
</ErrorOverlay>

Customization

The <ErrorOverlay> component is unstyled and headless, therefore it is highly customizable.

The internal structure of the component is as follows:

<ErrorOverlayContainer>
  <ErrorOverlayNavbar>
    <ErrorOverlayPagination>
      <ErrorOverlayPrevButton />
      <ErrorOverlayNextButton />
      <ErrorOverlayPageCounter />
    </ErrorOverlayPagination>
    <ErrorOverlayControls>
      <ErrorOverlayToggleCompiledButton />
      <ErrorOverlayResetButton />
    </ErrorOverlayControls>
  </ErrorOverlayNavbar>
  <ErrorOverlayContent>
    <ErrorOverlayErrorInfo />
    <ErrorOverlayStackFrames>
      <ErrorOverlayCompiledStackFrame />
      <ErrorOverlayOriginalStackFrame />
    </ErrorOverlayStackFrames>
  </ErrorOverlayContent>
</ErrorOverlayContainer>

Each of the components can be overriden through <ErrorOverlay>'s props:

<ErrorOverlay
  ErrorOverlayPrevButton={(props) => (
    <button onClick={props.onClick}>Previous</button>
  )}
  {...overrides}
>
  <App />
</ErrorOverlay>

See the demo for expanded use.

License

MIT © lxsmnsyc

You might also like...

Polyfill `error.cause`

Polyfill error.cause. error.cause is a recent JavaScript feature to wrap errors. try { doSomething() } catch (cause) { throw new Error('message',

Dec 15, 2022

1kb js library contains development debugging, error monitoring and reporting, user problem localization features

1kb js library contains development debugging, error monitoring and reporting, user problem localization features

1kb js library contains development debugging, error monitoring and reporting, user problem localization features

Dec 22, 2022

💣 Error handler for CLI applications 💥

Error handler for CLI applications. Features 💣 Error type-specific handling 🚒 Graceful exit ⛑️ Normalize invalid errors 📕 Log verbosity: full, shor

Dec 20, 2022

VS Code extension that adds a red error squiggle to every word in your code.

VS Code extension that adds a red error squiggle to every word in your code.

Dumbisense Dumbisense is a VS Code extension that adds a red error squiggle to every word in your code, with an interesting error message and dino ima

Sep 3, 2022

A form management library for SolidJS that is very lightweight and simple!

solform A form management library for SolidJS that is very lightweight and simple! Why solform Very easy, fast, lightweight and powerful! It has built

Nov 15, 2022

Solidex is a list of SolidJS ecosystem resources and packages.

Solidex is a list of SolidJS ecosystem resources and packages.

Solidex The following is a list of articles, packages and other resources that focus on the SolidJS ecosystem. Solidex is a platform for listing and m

Dec 18, 2022

A modern solidjs based UI library ~ it is very lightweight!

🚧 目前正在开发中,敬请期待~ cerises-ui 一个现代的基于 solidjs 的 UI 库~它是非常轻量级的! 官网:https://cerises-ui.edoc.wiki 目前计划组件 组件 说明 认领人 进度 Review & Unit Test Button、ButtonGroup

Jul 19, 2022

Utility to track the boundaries of html-elements in SolidJS

solid-boundaries Helps you to track the size and position of html-elements in solid-js. What does it do? See it in action here, or see it on CodeSandb

Jan 6, 2023

A SolidJS template built with Hope-UI

solid-hope-admin 名称 简介 solid JavaScript框架 hope-ui UI组件库 solid-app-router 路由 vite-plugin-pages 自动生成文件路由 query-string 解析URL地址 steeze-ui/solid-icon 图标 功能

Dec 13, 2022
Comments
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 53% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /images/preview.png | 653.98kb | 304.44kb | 53.45% | | /examples/demo/favicon.svg | 1.49kb | 1.46kb | 2.17% | | | | | | | Total : | 655.47kb | 305.89kb | 53.33% |


    📝 docs | :octocat: repo | 🙋🏾 issues | 🏪 marketplace

    ~Imgbot - Part of Optimole family

    opened by imgbot[bot] 0
  • Rework the ErrorOverlay API

    Rework the ErrorOverlay API

    So I took a stab at reworking the ErrorOverlay API so that what's getting rendered doesn't have to be declared as a list of 14 components, but rather only one (actually 3) that has everything provided to it as props.

    Not using omitProps anymore allows us to remove the solid-use dep.

    Replaced the createComponent calls with untrack, because there isn't really any value in createComponent besides for development purposes, as those are internal components, there is no point in seeing them in the devtools.

    The readme (actually there are two, lol) is yet to be changed, I just wanted to get this reviewed before doing that.

    opened by thetarnav 2
Owner
Alexis H. Munsayac
- Web Developer - Vice President of Software Engineering, Research and Development @LyonInc - Administrator @ProgrammersDevelopers
Alexis H. Munsayac
Webpack dev tools to make performance analysis, error investigation and loader development more convenient

build-tool-inspector Introduction Webpack dev tools to make performance analysis, error investigation and loader development more convenient. Provide

Modern JS 25 Nov 17, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
This is a Next.js app that powers my Twitch overlays. Good luck and godspeed!

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Adam Elmore 17 Sep 27, 2022
p5.grain is a p5.js addon for conveniently adding grain and texture overlays to artworks.

?? p5.grain p5.grain is a p5.js addon for conveniently adding grain and texture overlays to artworks. p5.grain was also created with fxhash projects i

meezwhite 39 Dec 24, 2022
The JavaScript library let’s you transform native tooltip’s into customizable overlays.

iTooltip The JavaScript library let’s you transform native tooltip’s into customizable overlays. Use: <script src="/path/to/iTooltip.js"></script> <sc

null 2 Dec 17, 2021
A Little explanation of the famous Javascript parseInt(0.0000005); error meme.

Explaining the meme Internet is made of millions of memes flowing everyday, so, devs create a ton of new images showing how their code doesn't work, t

akrck02 2 Feb 3, 2022
Error and Success Handler for Passport.js

passport-handler Developed with ❤️ by Swôth ?? Installation npm i passport-handler --save yarn add passport-handler ?? Importing import Handler from '

Swôth 2 Oct 29, 2022
Colorconsole provides an interesting way to display colored info, success, warning and error messages on the developer console in your browser

ColorConsole NPM Package Colorconsole provides an interesting way to display colored info, success, warning and error messages on the developer consol

Hasin Hayder 17 Sep 19, 2022