Error Reporting

/**
 * Starts automatic runtime error reporting with configurable options
 * @param options - Configuration object with error callback and optional filename
 * @throws Error if already listening for errors
 */
function startReportingRuntimeErrors(options: RuntimeReportingOptions): void;

interface RuntimeReportingOptions {
  /** Callback function executed when an error is detected and processed */
  onError: () => void;
  /** Optional filename for source mapping, defaults to '/static/js/bundle.js' */
  filename?: string;
  /** @deprecated launchEditorEndpoint is no longer supported. Use setEditorHandler instead. */
  launchEditorEndpoint?: string;
}

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

// Basic error reporting
startReportingRuntimeErrors({
  onError: () => {
    console.log('An error occurred and is being displayed');
  }
});

// With custom filename for source mapping
startReportingRuntimeErrors({
  onError: () => {
    // Handle error detection
    analytics.track('development_error_detected');
  },
  filename: '/static/js/main.bundle.js'
});

/**
 * Stops runtime error reporting and removes all error listeners
 * @throws Error if not currently listening for errors
 */
function stopReportingRuntimeErrors(): void;

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

// Start error reporting
startReportingRuntimeErrors({
  onError: () => console.log('Error detected')
});

// Later, stop error reporting (e.g., when switching to production mode)
try {
  stopReportingRuntimeErrors();
  console.log('Error reporting stopped');
} catch (error) {
  console.log('Error reporting was not active');
}

/**
 * Manually reports a runtime error for display in the overlay
 * @param error - JavaScript Error object to report
 * @param options - Optional configuration object
 */
function reportRuntimeError(
  error: Error, 
  options?: RuntimeReportingOptions
): void;

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

// Report a caught error
try {
  riskyOperation();
} catch (error) {
  reportRuntimeError(error, {
    onError: () => {
      console.log('Manually reported error is displayed');
    }
  });
}

// Report a custom error
const customError = new Error('Something went wrong in data processing');
customError.stack = getCustomStackTrace();
reportRuntimeError(customError);

/**
 * Reports a build/compilation error for display in the overlay
 * @param error - String containing the formatted build error message
 */
function reportBuildError(error: string): void;

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

// Report webpack compilation error
const webpackError = `
Module build failed: SyntaxError: Unexpected token (15:4)

  13 |   return (
  14 |     <div>
> 15 |       <p>Hello World</p
  16 |     </div>
  17 |   );
  18 | }
`;

reportBuildError(webpackError);

// Report TypeScript error
const tsError = `
TypeScript error in /src/components/Button.tsx(12,5):
Type 'string' is not assignable to type 'number'.
`;

reportBuildError(tsError);

// These will only show once, even if the same error occurs multiple times
const error = new Error('Duplicate error');
reportRuntimeError(error);
reportRuntimeError(error); // Deduplicated - won't show again
reportRuntimeError(error); // Deduplicated - won't show again

interface RuntimeReportingOptions {
  /** Callback function executed when an error is detected and processed */
  onError: () => void;
  /** Optional filename for source mapping, defaults to '/static/js/bundle.js' */
  filename?: string;
  /** @deprecated launchEditorEndpoint is no longer supported. Use setEditorHandler instead. */
  launchEditorEndpoint?: string;
}