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 alternative) — here you go!

• Displays runtime errors in browsers
• Full sourcemap support (shows original code, not transpiled)
• Clickable locations (opens in VS Code), see the notes here
• Minimalistic implementation (bare DOM API), easily hackable
• Uncluttered stacktraces (collapses third party library calls)

npm install panic-overlay

import 'panic-overlay' // should be the very first import in your app!

-TO BE IMPLEMENTED

Once imported, panic-overlay shows itself whenever an uncaught error occurs in a browser. You can disable that behavior:

import panic from 'panic-overlay'

panic.configure ({ handleErrors: false })

panic (error) // where error is either an instance of an Error or a string taken from Error.stack

Currently there is a problem with automatically determining the full file paths, so you need to provide it manually, otherwise the error locations won't be clickable:

import panic from 'panic-overlay'

panic.configure ({ projectRoot: '/full/path/to/my/project' })

You can intercept clicks on call stack entries. For the entry format, see this.

panic.configure ({
    stackEntryClicked (entry) {
        alert (`Clicked on ${entry.fileRelative}:${entry.line}:${entry.column}`)
    }
})

• Implement parsing of React JSX errors (see more here)

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

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 = require ('ololog').handleNodeErrors () // intercepts process errors

Showing locations of log calls:

log.bright.green ('Syncing order books...')