说明

这是一个支持捕捉bundle包的内部异常的示例工程。

目录结构

ReactProject – RN 侧工程
NativeProject – 原生工程

环境搭建

1. 在 ReactProject 目录下执行 npm i @react-native-oh/react-native-harmony@x.x.x或yarn add @react-native-oh/react-native-harmony@x.x.x 安装依赖，执行 npm run dev 生成 bundle；
2. 在 entry 目录下执行 ohpm i @rnoh/react-native-openharmony@x.x.x 安装依赖；
3. 检查 NativeProject、entry 目录下是否生成 oh-modules 文件夹；
4. 用 DevEco Studio 打开 NativeProject，执行 Sync and Refresh Project；
5. 点击 File > Project Structure > Signing Configs，登录并完成签名；
6. 点击右上角的 run 启动项目。

import React, { useState } from 'react';
import { View, Text, Button, Alert, StyleSheet } from 'react-native'

const App: React.FC = () => {
  const [errorMessage, setErrorMessage] = useState('');

  const handleReferenceError = () => {
    try {
      const erro = new ReferenceError('Some error happened');
      throw error;
    } catch (e) {
      console.error('Caught an error:', e);

      setErrorMessage(e.message);
    }
  };

  const handleStandardError = () => {
    try {
      const error = new Error('Some error happened');
      throw error;
    } catch (e) {
      console.error('Caught an error:', e);

      setErrorMessage(e.message);
    }
  };

  const handleFrozenError = () => {
    try {
      const error = Object.freeze(new Error('Some error happened'));
      throw error;
    } catch (e) {
      console.error('Caught an error:', e);

      setErrorMessage(e.message);
    }
  };

  const handleWarningError = () => {
    try {
      const warning = new Error('This is a warning message') as any;
      warning.type = 'warn';
      throw warning;
    } catch (e) {
      Alert.alert('Warning', e.message);
      setErrorMessage('Warning displayed:' + e.message);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Press a Button to trigger an error or warning:</Text>
      <View style={styles.buttonContainer}>
        <Button title="ReferenceError" onPress={handleReferenceError} />
        <Button title="Standard Error" onPress={handleStandardError} />
        <Button title="Frozen Error" onPress={handleFrozenError} />
        <Button title="Warning" onPress={handleWarningError} />
      </View>
      {
        errorMessage && <Text style={styles.errorMessage}>{errorMessage}</Text>
      }
    </View>
  );

};

const styles =
  StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      padding: 20,
    },
    title: {
      fontSize: 18,
      marginBottom: 20,
    },
    buttonContainer: {
      width: '80%',
      justifyContent: 'space-around',
      flexDirection: 'row',
      flexWrap: 'wrap',
    },
    errorMessage: {
      color: 'red',
      marginTop: 20,
    },
  });

export default App;

这是一个 React Native 应用程序，专门用于演示不同类型的错误处理和警告机制。应用程序创建了一个交互式界面，用户可以通过点击不同的按钮来触发各种错误场景，从而观察错误捕获和处理的实际效果。该应用使用了 React 的 useState Hook 来管理错误消息的状态，通过 try-catch 语句来捕获和处理异常。

在 handleReferenceError 函数中，代码故意创建了一个变量名拼写错误的 ReferenceError，然后在 throw 语句中引用了未定义的 error 变量，这本身就会导致 ReferenceError 被抛出。handleStandardError 函数展示了标准的 Error 对象的创建和抛出过程。handleFrozenError 函数演示了如何处理被 Object.freeze 冻结的错误对象，测试错误对象的不可变性对错误处理的影响。handleWarningError 函数则模拟了警告消息的处理，通过给错误对象添加 type 属性来标识警告类型，并使用 Alert.alert 来显示警告对话框。

效果预览

启动后页面效果如下：