Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xpl/panic-overlay
Displays JS errors in browsers. Shows sources. Use with any framework. 💥✨
https://github.com/xpl/panic-overlay
debug error-handling error-overlay error-reporting javascript panic-overlay parcel snowpack stack stacktrace vanilla-js webpack
Last synced: 13 days ago
JSON representation
Displays JS errors in browsers. Shows sources. Use with any framework. 💥✨
- Host: GitHub
- URL: https://github.com/xpl/panic-overlay
- Owner: xpl
- License: unlicense
- Created: 2019-03-10T20:56:12.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-06-23T09:40:55.000Z (over 2 years ago)
- Last Synced: 2024-04-27T03:26:47.770Z (7 months ago)
- Topics: debug, error-handling, error-overlay, error-reporting, javascript, panic-overlay, parcel, snowpack, stack, stacktrace, vanilla-js, webpack
- Language: JavaScript
- Homepage: http://npmjs.com/package/panic-overlay
- Size: 1.25 MB
- Stars: 79
- Watchers: 3
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# panic-overlay BETA 💥✨[](https://travis-ci.org/xpl/panic-overlay) [](http://npmjs.com/package/panic-overlay)
A lightweight standalone plain JS alternative to `react-error-overlay` that is not tied to React / Webpack and works with any framework or even without one.
If you miss that thing from `create-react-app` but do not want to use that framework (e.g. you want to use [Parcel](https://parceljs.org/) as a lightweight zero-configuration alternative) — here you go!
## Features
- Displays runtime errors in browsers
- Minimalistic implementation (bare DOM API), [easily hackable](https://github.com/xpl/panic-overlay/blob/master/README.md#hacking)
- Full sourcemap support (shows original code, not transpiled)
- Clickable locations (opens in VS Code), [see the notes here](https://github.com/xpl/panic-overlay#vs-code-notes)
- Uncluttered stacktraces (collapses third party library calls)
## How It Looks
## Installation
```bash
npm install panic-overlay
```
```javascript
import 'panic-overlay' // should be the very first import in your app!
```
## Using Without A Bundler
All-in-one browser bundle (batteries included), served from a CDN of your choice. Creates a global `panic` object.
- jsDelivr: https://cdn.jsdelivr.net/npm/panic-overlay/build/panic-overlay.browser.js
- unpkg: https://unpkg.com/panic-overlay
```html
```
## Demos
Here's how you can find an example usage of `panic-overlay` with various bundlers:
```sh
git clone https://github.com/xpl/panic-overlay.git
cd panic-overlay
npm install
```
| Environment | Run with | Source folder |
| ----------------------- | ----------------------------------- | --------------------------------------------------------- |
| `` tag | `npm run demo-no-bundler` | [`demo/no-bundler`](/demo/no-bundler) |
| Parcel | `npm run demo-parcel-vanilla` | [`demo/parcel-vanilla`](/demo/parcel-vanilla) |
| Parcel (React JSX) | `npm run demo-parcel-react` | [`demo/parcel-react`](/demo/parcel-react) |
| Webpack | `npm run demo-webpack-vanilla` | [`demo/webpack-vanilla`](/demo/webpack-vanilla) |
| Snowpack | `npm run demo-snowpack-vanilla` | [`demo/snowpack-vanilla`](/demo/snowpack-vanilla) |
## Disabling Automatic Error Handling
Once imported, `panic-overlay` shows itself whenever an uncaught error occurs in a browser. This can be undesirable in a production environment. You can disable that behavior in run-time:
```javascript
import panic from 'panic-overlay'
panic.configure ({ handleErrors: false })
```
Although it is better to _not import_ the `panic-overlay` in a production build, to minimize the bundle size. Unfortunately, there is no universal way to do a conditional module import at compile-time — in each bundler/framework it is achieved in its own way.
## Showing Manually
```javascript
panic (error) // where error is either an instance of an Error or a string taken from Error.stack
```
## VS Code Notes
Currently there is a problem with automatically determining the full file paths (at least, when using Parcel bundler), so you need to provide it manually, otherwise the error locations won't be clickable:
```javascript
import panic from 'panic-overlay'
panic.configure ({ projectRoot: '/full/path/to/my/project' })
```
## Custom Click Handler
You can intercept clicks on call stack entries. For the `entry` format, [see this](https://github.com/xpl/stacktracey#how-to).
```javascript
panic.configure ({
stackEntryClicked (entry) {
alert (`Clicked on ${entry.fileRelative}:${entry.line}:${entry.column}`)
}
})
```
## Hacking
The `panic-overlay` is just a GUI for the [**`stacktracey`**](https://github.com/xpl/stacktracey) library that provides all the magic related to callstack parsing, source code extraction and filtering of the clutter. I also maintain that library, so any contributions to its code are welcome as well.
I highly appreciate any help from the community with the following:
- [ ] Testing with various module bundlers / frameworks
- [ ] Implementing parsing of React JSX errors in [**`stacktracey`**](https://github.com/xpl/stacktracey) ([see more here](https://github.com/parcel-bundler/parcel/issues/2765))
- [ ] Determining the full file paths for [clickable locations](https://github.com/xpl/panic-overlay#vs-code-notes)
- [ ] Animations & better layout (probably need to center it for wide screens)
## ...One More Thing™
There is also a way to improve your Node errors (and the overall debug output) legibility by using the **[`Ololog`](https://github.com/xpl/ololog)** library which is built on the same stack and is maintained by me also. Check it out!
```javascript
const log = require ('ololog').handleNodeErrors () // intercepts process errors
```
<a href="https://github.com/xpl/ololog"><img width="1091" alt="Screen Shot 2019-04-06 at 00 56 17" src="https://user-images.githubusercontent.com/1707/55658599-d8b06e00-5806-11e9-935c-32a11d689c92.png"></a>
Color logging with displaying of the _log call location_ (file + line), so you can quickly find out from the logs, where it was called in the code:
```javascript
log.bright.green ('Syncing order books...')
```
<img width="423" alt="Screen Shot 2019-05-15 at 17 38 15" src="https://user-images.githubusercontent.com/1707/57784232-3f934200-7738-11e9-8136-d2cc88879c92.png">