English | [简体中文](./README-zh_CN.md)

# @ray-js/ray-error-catch

[![latest](https://img.shields.io/npm/v/@ray-js/ray-error-catch/latest.svg)](https://www.npmjs.com/package/@ray-js/ray-error-catch) [![download](https://img.shields.io/npm/dt/@ray-js/ray-error-catch.svg)](https://www.npmjs.com/package/@ray-js/ray-error-catch)

> Exception Handling Component

- 1. When there is an exception in the mini-program, it will be captured and a generic fallback page will be displayed, guiding the user to upload logs to help developers locate the problem.
- 2. Provide interfaces for mini-program developers to customize and add logs.
- 3. Note ⚠️:
  - Mini-program basic library version requirement:
    - Greater than or equal to 2.13.0.
  - Capture scope:
    - Only exceptions in synchronously executed JavaScript code can be automatically captured.
    - Asynchronous code such as setTimeout and setInterval, AJAX requests, Web Workers, client-side storage, and other asynchronous execution code cannot trigger automatic error catching.

## Installation

```sh
$ npm install @ray-js/ray-error-catch
# or
$ yarn add @ray-js/ray-error-catch
```

## Usage

```tsx
import RayErrorCatch from '@ray-js/ray-error-catch';

// Basic usage
const Home = () => {
  return (
    <RayErrorCatch>
      {/* 业务根组件 */}
      <RootELement />
    </RayErrorCatch>
  );
};

// Advanced usage: Allow developers to customize copywriting based on business conditions
const Home = () => {
  return (
    <RayErrorCatch
      errorTitle="自定义异常标题"
      errorText="自定义异常文案"
      submitText="自定义提交文案"
      reloadText="自定义重新加载文案"
    >
      {/* 业务根组件 */}
      <RootELement />
    </RayErrorCatch>
  );
};
// Advanced usage: allows developers to customize the display of exception pages based on business conditions.
const Home = () => {
  const [forceShow, setForceShow] = useState(false);

  return (
    <RayErrorCatch
      forceShow={forceShow}
      errorTitle="自定义异常标题"
      errorText="自定义异常文案"
      submitText="自定义提交文案"
      reloadText="自定义重新加载文案"
    >
      {/* 业务根组件 */}
      <RootELement />
    </RayErrorCatch>
  );
};
```

## Changelog

### 0.0.26

- Add reload button, click to reload the mini-program