solid-error-overlay

Unstyled, headless Error Overlay for SolidJS

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