or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

editor-integration.mderror-dismissal.mderror-reporting.mdindex.md
tile.json

tessl/npm-react-error-overlay

An overlay for displaying stack frames and error messages in React development environments.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-error-overlay@6.1.x

To install, run

npx @tessl/cli install tessl/npm-react-error-overlay@6.1.0

index.mddocs/

React Error Overlay

React Error Overlay is a development-only error reporting system for React applications. It displays formatted runtime errors and compilation errors in an iframe-based overlay with syntax highlighting, source code context, and clickable stack frames that can open files in editors. The library provides error deduplication, automatic error listening, and seamless integration with Create React App's development workflow.

Package Information

  • Package Name: react-error-overlay
  • Package Type: npm
  • Language: JavaScript (with Flow types)
  • Installation: npm install react-error-overlay
  • Environment: Development only (warnings if used in production)

Core Imports

import {
  startReportingRuntimeErrors,
  stopReportingRuntimeErrors,
  reportBuildError,
  reportRuntimeError,
  dismissBuildError,
  dismissRuntimeErrors,
  setEditorHandler
} from "react-error-overlay";

For CommonJS:

const {
  startReportingRuntimeErrors,
  stopReportingRuntimeErrors,
  reportBuildError,
  reportRuntimeError,
  dismissBuildError,
  dismissRuntimeErrors,
  setEditorHandler
} = require("react-error-overlay");

Basic Usage

import { 
  startReportingRuntimeErrors, 
  stopReportingRuntimeErrors,
  setEditorHandler 
} from "react-error-overlay";

// Start automatic error reporting in development mode
if (process.env.NODE_ENV === 'development') {
  startReportingRuntimeErrors({
    onError: () => {
      console.log('Error detected and displayed in overlay');
    }
  });

  // Set up editor integration (optional)
  setEditorHandler((errorLocation) => {
    // Open file in editor at specific location
    fetch('/__open-stack-frame-in-editor', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(errorLocation)
    });
  });
}

// Later: stop error reporting when switching modes
// stopReportingRuntimeErrors();

Architecture

React Error Overlay consists of several key components:

  • Error Reporting System: Core functions for starting/stopping error monitoring and manually reporting errors
  • Overlay Management: iframe-based overlay that displays errors with formatted stack traces and source context
  • Editor Integration: Configurable handlers for opening files in editors when stack frames are clicked
  • Error Processing: Stack frame parsing with source mapping support and error deduplication
  • Global Hooks: Browser-level error listeners for unhandled exceptions and promise rejections

Capabilities

Error Reporting

Core error reporting functionality for both automatic monitoring and manual error reporting. Handles runtime errors, build errors, and provides error deduplication.

function startReportingRuntimeErrors(options: RuntimeReportingOptions): void;
function stopReportingRuntimeErrors(): void;
function reportRuntimeError(error: Error, options?: RuntimeReportingOptions): void;
function reportBuildError(error: string): void;

interface RuntimeReportingOptions {
  onError: () => void;
  filename?: string;
  /** @deprecated launchEditorEndpoint is no longer supported. Use setEditorHandler instead. */
  launchEditorEndpoint?: string;
}

Error Reporting

Error Dismissal

Functions for clearing and dismissing errors from the overlay interface.

function dismissRuntimeErrors(): void;
function dismissBuildError(): void;

Error Dismissal

Editor Integration

Integration with code editors to enable opening files at specific locations when stack frames are clicked.

function setEditorHandler(handler: EditorHandler | null): void;

type EditorHandler = (errorLoc: ErrorLocation) => void;

interface ErrorLocation {
  fileName: string;
  lineNumber: number;
  colNumber?: number;
}

Editor Integration

Types

interface RuntimeReportingOptions {
  onError: () => void;
  filename?: string;
  /** @deprecated launchEditorEndpoint is no longer supported. Use setEditorHandler instead. */
  launchEditorEndpoint?: string;
}

type EditorHandler = (errorLoc: ErrorLocation) => void;

interface ErrorLocation {
  fileName: string;
  lineNumber: number;
  colNumber?: number;
}