tessl/npm-next--react-dev-overlay

A development-only overlay for developing React applications with comprehensive error reporting and debugging capabilities.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Client Error Handling

Name: tessl/npm-next--react-dev-overlay
Author: tessl

Client-side error handling and overlay functionality for React applications, providing comprehensive error capture and display capabilities.

Capabilities

Error Handler Registration

/**
 * Registers global error handlers for unhandled errors and promise rejections
 * Sets Error.stackTraceLimit to 50 for detailed stack traces
 */
function register(): void;

/**
 * Unregisters global error handlers and restores original Error.stackTraceLimit
 */
function unregister(): void;

Usage Examples:

import { register, unregister } from "@next/react-dev-overlay";

// Register error handlers when starting development
register();

// Unregister when shutting down (optional, usually not needed)
unregister();

ReactDevOverlay Component

Main React component that provides the development overlay interface for displaying errors and build status.

/**
 * Main React component for the development overlay
 * Renders error displays, build status, and development tools
 */
const ReactDevOverlay: React.ComponentType<ReactDevOverlayProps>;

interface ReactDevOverlayProps {
  /** Child components to render */
  children?: React.ReactNode;
  /** Array of error types to prevent from displaying */
  preventDisplay?: ErrorType[];
  /** Whether to show overlay globally across the application */
  globalOverlay?: boolean;
}

type ErrorType = 'runtime' | 'build';

Usage Examples:

import { ReactDevOverlay } from "@next/react-dev-overlay";
import React from "react";

// Basic usage
function App() {
  return (
    <ReactDevOverlay>
      <MyApplication />
    </ReactDevOverlay>
  );
}

// Prevent certain error types from displaying
function ProductionApp() {
  return (
    <ReactDevOverlay preventDisplay={['runtime']}>
      <MyApplication />
    </ReactDevOverlay>
  );
}

// Global overlay configuration
function GlobalOverlayApp() {
  return (
    <ReactDevOverlay globalOverlay={true}>
      <MyApplication />
    </ReactDevOverlay>
  );
}

Error Processing Utilities

Utilities for processing and formatting different types of errors with full type information.

/**
 * Processes and formats errors by type, returning structured error objects
 * @param ev - Error event with ID and event data
 * @returns Promise resolving to formatted runtime error
 */
function getErrorByType(ev: SupportedErrorEvent): Promise<ReadyRuntimeError>;

/**
 * Creates server errors with proper stack traces and context
 * @param error - Original error object
 * @param type - Type of error context ('server' | 'edge-server' | null)
 * @returns Enhanced error object with server context
 */
function getServerError(error: Error, type: ErrorType): Error;

interface SupportedErrorEvent {
  id: number;
  event: BusEvent;
}

interface ReadyRuntimeError {
  id: number;
  runtime: true;
  error: Error;
  frames: OriginalStackFrame[];
  componentStack?: string[];
}

interface BusEvent {
  type: string;
  reason?: Error;
  message?: string;
  frames?: StackFrame[];
  componentStack?: string[];
}

Usage Examples:

import { getErrorByType, getServerError } from "@next/react-dev-overlay";

// Process error events
async function handleError(errorEvent: SupportedErrorEvent) {
  const processedError = await getErrorByType(errorEvent);
  console.log('Processed error:', processedError);
}

// Create server error
function createServerError(originalError: Error) {
  const serverError = getServerError(originalError, 'server');
  return serverError;
}

Error Types

Core type definitions for error handling and processing.

type OriginalStackFrame = 
  | OriginalStackFrameError 
  | OriginalStackFrameExternal 
  | OriginalStackFrameInternal;

interface OriginalStackFrameError {
  error: true;
  reason: string;
  external: false;
  expanded: false;
  sourceStackFrame: StackFrame;
}

interface OriginalStackFrameExternal {
  error: false;
  external: true;
  expanded: boolean;
  sourceStackFrame: StackFrame;
}

interface OriginalStackFrameInternal {
  error: false;
  reason: null;
  external: false;
  expanded: boolean;
  sourceStackFrame: StackFrame;
  originalCodeFrame: string | null;
  originalStackFrame: StackFrame;
}

interface StackFrame {
  file: string | null;
  methodName: string | null;  
  arguments: string[];
  lineNumber: number | null;
  column: number | null;
}