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