Error Boundary Component

A robust ErrorBoundary component built with TypeScript and React. This component catches JavaScript errors anywhere in the child component tree and displays a fallback UI. It also provides navigation functionality via keyboard or clickable links.

Features

• Catches and handles JavaScript errors in the component tree.
• Displays a fallback UI when an error occurs.
• Allows users to navigate back to the home menu via the "Enter" key or a clickable link.
• Fully written in TypeScript for type safety.

Project Structure

src/
  index.scss          # Styles for the ErrorBoundary component
  ErrorBoundary.tsx   # ErrorBoundary component implementation
  App.tsx             # Example usage of ErrorBoundary

Installation

1. Clone the repository:

   git clone https://git.inorain.com/hotelsmarters-v2/tv/modules/-/tree/master/error-boundary?ref_type=heads
   cd error-boundary-component

2. Install dependencies:

   npm install

Usage

To use the ErrorBoundary component, wrap it around any child components in your app:

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary fallbackUI={<div>Something went wrong. Please try again later.</div>}>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

Keyboard Navigation

• When an error occurs, pressing the Enter key will redirect users to the home menu (/).
• Alternatively, clicking the "Go to home" link will also navigate back to the menu.

TypeScript Conversion Details

During the conversion of the original JavaScript ErrorBoundary to TypeScript, the following changes were made:

• State and Props Types: The component state and props were explicitly typed to improve type safety.
• Non-Null Assertion Operator: Used the ! operator to ensure boundGoToMenu was properly recognized as initialized later.
• Keyboard Event Handling: TypeScript types were added for better event handling (KeyboardEvent and MouseEvent).

Key Changes in Code

private boundGoToMenu!: (e: KeyboardEvent) => void; // Ensures TypeScript recognizes it as initialized later

The ! operator was essential to avoid TypeScript's initialization error for the boundGoToMenu property.

Scripts

• Start Development Server: npm start
  Starts the local development server.

• Build Project: npm run build
  Compiles the TypeScript and React files into production-ready JavaScript.

Development

Feel free to modify and extend the ErrorBoundary as needed:

• Add custom fallback UI elements.
• Log errors to external services for tracking.
• Handle additional keyboard events for better navigation.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contributions

Contributions are welcome! Feel free to open issues or submit pull requests for bug fixes or enhancements.

Author

Developed by [Vahe Petrosyan]