react-error-overlay

What is react-error-overlay?

The react-error-overlay package is used to display an overlay in your React application during development that shows runtime errors, including stack traces. It is commonly included in development environments like Create React App to improve the developer experience by providing clear and immediate feedback on errors that occur during development.

What are react-error-overlay's main functionalities?

Displaying runtime errors in an overlay

This feature allows developers to display a full-screen overlay in their React application when a runtime error occurs. The overlay includes the error message, stack trace, and the file where the error occurred.

import { reportRuntimeError } from 'react-error-overlay';

reportRuntimeError(new Error('This is a runtime error'));

Customizing the overlay

Developers can customize the behavior of the overlay, such as setting a custom handler to open the source file in an editor when an error location is clicked.

import { setEditorHandler } from 'react-error-overlay';

setEditorHandler(function editorHandler(errorLocation) {
  // Custom logic to open the source file in an editor
});

Dismissing the overlay

This feature allows developers to programmatically dismiss the error overlay, which can be useful for handling errors gracefully or when implementing custom error recovery logic.

import { dismissRuntimeErrors } from 'react-error-overlay';

dismissRuntimeErrors();

Other packages similar to react-error-overlay

redbox-react

Redbox-react is a package for displaying error messages in a red box overlay in React applications. It is similar to react-error-overlay but with a simpler and less intrusive UI. It does not provide stack traces by default.

error-overlay-webpack-plugin

This Webpack plugin provides an error overlay that is similar to react-error-overlay. It works with Webpack's dev server and shows compile-time errors. It does not handle runtime errors in the same way as react-error-overlay.

friendly-errors-webpack-plugin

While not providing an overlay, this Webpack plugin improves the developer experience by cleaning up Webpack error messages and presenting them in a more friendly and readable format. It's a different approach to error handling compared to react-error-overlay.

README

react-error-overlay

react-error-overlay is an overlay which displays when there is a runtime error.

Development

When developing within this package, make sure you run npm start (or yarn start) so that the files are compiled as you work. This is ran in watch mode by default.

If you would like to build this for production, run npm run build:prod (or yarn build:prod).
If you would like to build this one-off for development, you can run NODE_ENV=development npm run build (or NODE_ENV=development yarn build).