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 as a lightweight zero-configuration alternative) — here you go!
- Displays runtime errors in browsers
- Minimalistic implementation (bare DOM API), easily hackable
- Full sourcemap support (shows original code, not transpiled)
- Clickable locations (opens in VS Code), see the notes here
- Uncluttered stacktraces (collapses third party library calls)
How It Looks
npm install panic-overlay
Using Without A Bundler
All-in-one browser bundle (batteries included), served from a CDN of your choice. Creates a global
- jsDelivr: https://cdn.jsdelivr.net/npm/panic-overlay/build/panic-overlay.browser.js
- unpkg: https://unpkg.com/panic-overlay
Here's how you can find an example usage of
panic-overlay in various development environments:
git clone https://github.com/xpl/panic-overlay.gitcd panic-overlaynpm install
|Environment||Run with||Source folder|
|Parcel (React JSX)||
Disabling Automatic Error Handling
panic-overlay shows itself whenever an uncaught error occurs in a browser. You can disable that behavior:
// 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:
Custom Click Handler
You can intercept clicks on call stack entries. For the
entry format, see this.
panic-overlay is just a GUI for the
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(see more here)
- Determining the full file paths for clickable locations
- 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 library which is built on the same stack and is maintained by me also. Check it out!
const log = // intercepts process errors
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: