@jundao/zut

Pretty error overlay for browser side JS errors.

Zut (French word for "damn", pronouced /zyt/)

Features

UI Agnostic - Built with vanilla JS and DOM & works with any framework.
Useful - Uses source maps when available to preview the exact source code.
Language Agnostic - Config options for extending default preview languages.
Type Safe - Entirely coded in Typescript.
Modern - Uses the latest available ES & CSS features.

Usage

Install @jundao/zut:

npm install @jundao/zut
# or
yarn add @jundao/zut
# or
pnpm add @jundao/zut

Import and run:

import Zut from "@jundao/zut";


try {
  yourCode();
} catch (error) { // Supports any throwable
  new Zut(error);
}

✨ All done!

API

`.close()`

Programmatically close the overlay.

const zut = new Zut(error);

zut.close();

Options

interface ZutOptions {
  maxHighlightLenght?: number;
  noStacktraceTranslation?: string;
  unknownTranslation?: string;
  toggleMutedTranslation?: string;
  presetExtension?: Record<string, string>;
  mutedEntries?: RegExp[];
  closable?: boolean;
  theme?: Partial<ZutTheme>;
}

`maxHighlightLenght`

Maximum code length to highlight (freezes on large files).

new Zut(error, {
  maxHighlightLenght: 4000, // length in characters
});

`noStacktraceTranslation`, `unknownTranslation`, `toggleMutedTranslation`

new Zut(error, {
  noStacktraceTranslation: "No Stacktrace",
  unknownTranslation: "Unknown",
  toggleMutedTranslation: "Show All",
});

`presetExtension`

Preview highlight languages (values from highlight.js) per file extension (key).

new Zut(error, {
  presetExtension: {
    coffee: "coffeescript",
  },
});

`mutedEntries`

Stacklist entries to mute (regex matched on file path).

new Zut(error, {
  mutedEntries: [
    /my_folder/,
  ],
});

`closable`

Whether the overlay should close when clicked outside. (defaults to true)

new Zut(error, {
  closable: false,
});

`theme`

interface ZutTheme {
  background: string; // color
  activeBackground: string; // color
  hoverBackground: string; // color
  highlightedBackground: string; // color
  textColor: string; // color
  mutedOpacity: number; // from 0 to 1
  accentColor: string; // color
  sansFont: string; // font name
  monoFont: string; // font name
}

new Zut(error, {
  theme: {
    background: "#000",
    ...
}});

Contributing

Before contributing please refer to CONTRIBUTING.md.

All contributions are moderated under the Contributor Covenant Code of Conduct.

License

jundaoapp/zut

About

Resources

License

Code of conduct

Contributing

Uh oh!

Stars

Watchers

Forks

Releases 5

Packages 0

Uh oh!

Languages

Packages