errorbuttons

A lightweight frontend debugging and status-display utility that renders messages, errors, and responses directly into the browser UI as dismissible, copyable buttons.

errorbuttons is designed to help with:

• frontend debugging
• surfacing runtime errors
• displaying API response status information
• showing lightweight success/error notifications
• quickly copying structured error details to the clipboard

Each message is rendered as a button that:

1. copies its associated error data to the clipboard
2. dismisses itself when clicked

The UI is intentionally non-invasive and sits above your application without interfering with the rest of your layout.

Features

• Zero dependencies besides buttonizer
• Framework agnostic
• Works with:
  • Error
  • Response
  • ErrorEvent
  • PromiseRejectionEvent
  • strings
  • arrays
  • arbitrary values
• Fully styleable
• Automatically creates and removes its own container
• Clipboard integration
• SSR-safe
• Multiple independent containers supported

Installation

npm install errorbuttons

Basic Usage

import setupErrorButtons from 'errorbuttons';

try {
  throw new Error('Something went wrong');
} catch (err) {
  setupErrorButtons(err);
}

Response Example

const response = await fetch('/api/test');

setupErrorButtons(response);

Promise Rejection Example

window.addEventListener('unhandledrejection', (event) => {
  setupErrorButtons(event);
});

Global Error Example

window.addEventListener('error', (event) => {
  setupErrorButtons(event);
});

Success Message Example

setupErrorButtons('Successfully saved!', {
  ok: true
});

API

setupErrorButtons(myError, options?)

Creates a new dismissible status button.

Parameters

| Parameter | Type | Description | |---|---|---| | myError | any | The value to display | | options | object | Optional configuration |

Options

General Options

| Option | Default | Description | |---|---|---| | ok | false | Forces success styling | | altMode | false | Passed directly to buttonizer | | clickEffect | false | Passed directly to buttonizer | | title | "Copy to clipboard and dismiss" | Button title attribute | | idValue | "statusbuttonerrholder" | Unique holder ID |

Style Options

Button State Styles

| Option | |---| | pressedSuccessStyles | | pressedErrStyles | | optionalSuccessStyles | | optionalErrStyles |

These are passed directly into buttonizer.

Other Style Options

| Option | Description | |---|---| | holderStyles | Styles applied to the container | | spanStyles | Styles applied to all spans | | tsStyles | Styles applied to the timestamp |

Return Value

Returns the generated button element.

const button = setupErrorButtons(error);

Clipboard Behavior

Clicking a button copies structured error information to the clipboard as JSON.

Example clipboard output:

{
  "name": "Error",
  "message": "Something exploded",
  "timestamp": "5/7/2026, 1:42:00 PM",
  "ok": false
}

Additional fields are included automatically when available:

• status
• statusText
• url
• filename
• lineno
• colno
• reason
• stack

Supported Input Types

Error

setupErrorButtons(new Error('Oops'));

Response

setupErrorButtons(response);

ErrorEvent

window.addEventListener('error', setupErrorButtons);

PromiseRejectionEvent

window.addEventListener('unhandledrejection', setupErrorButtons);

Arrays

setupErrorButtons([
  'Validation Error',
  'Username already exists'
]);

The first item becomes the title line and the second becomes the message line.

Strings

setupErrorButtons('Hello world');

Styling

The package ships with default success and error styles, but everything can be overridden.

Example:

setupErrorButtons(error, {
  holderStyles: {
    top: 'auto',
    bottom: '20px'
  },
  spanStyles: {
    color: 'red'
  }
});

SSR Compatibility

errorbuttons safely exits in non-browser environments.

const result = setupErrorButtons(error);

// null during SSR

Notes

• This package is intentionally lightweight.
• It is not intended to replace a full notification/toast framework.
• Response bodies are intentionally not consumed.
• Buttons remove themselves after being clicked.
• Empty containers automatically clean themselves up.

License

ISC

Working Example

https://stackblitz.com/edit/vitejs-vite-ew5gmmhj?file=index.js