npm package: @hotel-smarters/error-boundary
Description: 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.
Author: DeadpoolAdmin
Latest version: 1.0.1

# 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

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

## Installation

1. Clone the repository:

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

2. Install dependencies:

   ```bash
   npm install
   ```

## Usage

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

```tsx
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

```tsx
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]