tessl/npm-react-error-overlay

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Editor Integration

Name: tessl/npm-react-error-overlay
Author: tessl

Integration with code editors to enable opening files at specific locations when stack frames are clicked in the React Error Overlay.

Capabilities

Set Editor Handler

Configures a custom handler function for opening files in an editor when stack frame locations are clicked.

/**
 * Sets a handler function for opening files in an editor
 * @param handler - Function that handles opening files at specific locations, or null to remove handler
 */
function setEditorHandler(handler: EditorHandler | null): void;

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

interface ErrorLocation {
  /** Path to the file to open */
  fileName: string;
  /** Line number to navigate to (1-indexed) */
  lineNumber: number;
  /** Optional column number to navigate to (1-indexed) */
  colNumber?: number;
}

Usage Examples:

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

// Set up VS Code integration
setEditorHandler((errorLocation) => {
  const { fileName, lineNumber, colNumber } = errorLocation;
  
  // Open in VS Code via command line
  const command = colNumber 
    ? `code --goto ${fileName}:${lineNumber}:${colNumber}`
    : `code --goto ${fileName}:${lineNumber}`;
    
  // Send to development server endpoint
  fetch('/__open-in-editor', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ command })
  });
});

// Set up WebStorm integration
setEditorHandler((errorLocation) => {
  const { fileName, lineNumber } = errorLocation;
  const url = `webstorm://open?file=${fileName}&line=${lineNumber}`;
  window.open(url);
});

// Remove editor integration
setEditorHandler(null);

Create React App Integration

The error overlay integrates seamlessly with Create React App's built-in editor support:

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

// Create React App style integration
setEditorHandler((errorLocation) => {
  fetch('/__open-stack-frame-in-editor', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(errorLocation)
  }).catch(() => {
    // Fallback if development server doesn't support editor integration
    console.log('Could not open in editor:', errorLocation);
  });
});

Custom Editor Protocols

Support for custom editor protocols and URL schemes:

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

// Sublime Text integration
setEditorHandler((errorLocation) => {
  const { fileName, lineNumber, colNumber } = errorLocation;
  const url = `subl://open?url=file://${fileName}&line=${lineNumber}&column=${colNumber || 1}`;
  window.location.href = url;
});

// Atom integration  
setEditorHandler((errorLocation) => {
  const { fileName, lineNumber, colNumber } = errorLocation;
  const url = `atom://core/open/file?filename=${fileName}&line=${lineNumber}&column=${colNumber || 1}`;
  window.location.href = url;
});

// Vim integration via terminal
setEditorHandler((errorLocation) => {
  const { fileName, lineNumber } = errorLocation;
  
  fetch('/api/open-in-vim', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      command: `vim +${lineNumber} ${fileName}`
    })
  });
});

Handler Lifecycle

The editor handler is persistent and automatically applied to new error overlays:

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

// Set handler once
setEditorHandler((errorLocation) => {
  console.log('Opening:', errorLocation);
  // Custom editor logic here
});

// Handler applies to all subsequent errors
reportRuntimeError(new Error('Manual error'));

startReportingRuntimeErrors({
  onError: () => console.log('Auto-detected error')
});

// All stack frames in errors will use the configured handler

Development Server Integration

Common patterns for integrating with development servers:

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

// Webpack Dev Server integration
setEditorHandler((errorLocation) => {
  const params = new URLSearchParams({
    fileName: errorLocation.fileName,
    lineNumber: errorLocation.lineNumber.toString(),
    colNumber: (errorLocation.colNumber || 1).toString()
  });
  
  fetch(`/__open-stack-frame-in-editor?${params}`, {
    method: 'GET'
  });
});

// Vite integration
setEditorHandler((errorLocation) => {
  fetch('/__open-in-editor', {
    method: 'GET',
    headers: {
      'file': errorLocation.fileName,
      'line': errorLocation.lineNumber.toString(),
      'column': (errorLocation.colNumber || 1).toString()
    }
  });
});

Types

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

interface ErrorLocation {
  /** Path to the file to open */
  fileName: string;
  /** Line number to navigate to (1-indexed) */
  lineNumber: number;
  /** Optional column number to navigate to (1-indexed) */
  colNumber?: number;
}

Install with Tessl CLI

npx tessl i tessl/npm-react-error-overlay

docs

editor-integration.md

tessl/npm-react-error-overlay