[English](./README.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)

> 涂鸦异常兜底组件

- 1. 当小程序有异常时会捕获小程序异常，并展示一个通用的兜底页面，引导用户进行日志上传，方便开发人员定位问题
- 2. 提供接口给小程序开发者来自定义添加日志
- 3. 注意 ⚠️：
  - 1. 小程序基础库版本要求：
    - 大于等于 2.13.0
  - 2. 捕获范围
    - 只能自动捕获 js 同步执行代码的异常
    - 异步代码如 setTimeout 和 setInterval、AJAX 请求、Web Workers、客户端 Storage 等代码的执行无法触发自动捕获

## 安装

```sh
$ npm install @ray-js/ray-error-catch
// 或者
$ yarn add @ray-js/ray-error-catch
```

## 使用

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

// 基本用法，自动捕获错误，展示异常上传页
const Home = () => {
  return (
    <RayErrorCatch>
      {/* 业务根组件 */}
      <RootELement />
    </RayErrorCatch>
  );
};

// 高阶用法 允许开发者根据业务情况 自定义文案
const Home = () => {
  return (
    <RayErrorCatch
      errorTitle="自定义异常标题"
      errorText="自定义异常文案"
      submitText="自定义提交文案"
      reloadText="自定义重新加载文案"
    >
      {/* 业务根组件 */}
      <RootELement />
    </RayErrorCatch>
  );
};

// 高阶用法 允许开发者根据业务情况, 自定义展示异常页面
const Home = () => {
  const [forceShow, setForceShow] = useState(false);

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

## 版本日志

### 0.0.26

- 增加重新加载按钮，点击后会重新加载小程序