// 1. 變量未定義錯誤
function greet() {
  console.log(name); // name 未聲明，觸發(fā) ReferenceError
}
// 2. 異步操作錯誤（未捕獲的 Promise 拒絕）
const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data.user.name; // 若 data.user 為 undefined，觸發(fā) TypeError
};
fetchData(); // 未添加 catch 處理，導(dǎo)致未捕獲 Promise 錯誤

// 自定義原生模塊中數(shù)組越界
@objc func getRandomItem(_ callback: RCTResponseSenderBlock) {
  let items = ["a", "b"]
  let randomIndex = 3 // 超出數(shù)組長度（0-1）
  let item = items[randomIndex] // 觸發(fā) IndexOutOfRangeException，導(dǎo)致應(yīng)用崩潰
  callback([nil, item])
}

// 原生模塊中空指針異常
@ReactMethod
fun showToast(message: String) {
  val toast = Toast.makeText(null, message, Toast.LENGTH_SHORT) // context 為 null，觸發(fā) NullPointerException
  toast.show()
}

import React, { Component } from 'react';
class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }
  // 靜態(tài)方法：捕獲錯誤并更新組件狀態(tài)，用于渲染降級 UI
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
  // 實例方法：捕獲錯誤信息，可用于日志上報
  componentDidCatch(error, errorInfo) {
    // 上報錯誤到監(jiān)控平臺（如 Sentry）
    console.error('Error Boundary 捕獲錯誤：', error, errorInfo.componentStack);
  }
  render() {
    if (this.state.hasError) {
      // 降級 UI：向用戶展示友好提示
      return (
        <div style={{ padding: 20, textAlign: 'center' }}>
          <h2>頁面加載出錯了</h2>
          <p>{this.state.error?.message}</p>
          <button onClick={() => this.setState({ hasError: false })}>
            刷新頁面
          </button>
        </div>
      );
    }
    // 無錯誤時，渲染子組件樹
    return this.props.children;
  }
}
// 使用方式：包裹可能出錯的組件
export default function App() {
  return (
    <ErrorBoundary>
      <MainComponent /> {/* 可能觸發(fā) JS 錯誤的核心組件 */}
    </ErrorBoundary>
  );
}

import { ErrorUtils } from 'react-native';
// 保存原始錯誤處理函數(shù)（可選，便于后續(xù)恢復(fù)默認(rèn)行為）
const originalErrorHandler = ErrorUtils.getGlobalHandler();
// 自定義全局錯誤處理函數(shù)
const customErrorHandler = (error, isFatal) => {
  // isFatal：布爾值，標(biāo)識錯誤是否致命（可能導(dǎo)致應(yīng)用崩潰）
  console.error(`全局捕獲 JS 錯誤（${isFatal ? '致命' : '非致命'}）：`, error);
  // 上報錯誤信息（如錯誤消息、堆棧跟蹤、設(shè)備信息）
  reportErrorToMonitor({
    message: error.message,
    stack: error.stack,
    isFatal,
    platform: Platform.OS,
  });
  // 若需要保留默認(rèn)行為（如開發(fā)環(huán)境顯示 RedBox），可調(diào)用原始處理函數(shù)
  originalErrorHandler(error, isFatal);
};
// 注冊全局錯誤處理函數(shù)
ErrorUtils.setGlobalHandler(customErrorHandler);

// 監(jiān)聽未捕獲的 Promise 拒絕
if (YellowBox) {
  // 開發(fā)環(huán)境：屏蔽特定警告（可選）
  YellowBox.ignoreWarnings(['Possible Unhandled Promise Rejection']);
}
// 全局捕獲未處理的 Promise 錯誤
process.on('unhandledRejection', (reason, promise) => {
  console.error('未處理的 Promise 錯誤：', reason, promise);
  // 上報錯誤信息
  reportErrorToMonitor({
    type: 'UnhandledPromiseRejection',
    message: reason?.message || String(reason),
    stack: reason?.stack,
  });
});

// AppDelegate.swift
import UIKit
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // 注冊異常捕獲處理器
    NSSetUncaughtExceptionHandler { exception in
      let name = exception.name.rawValue
      let reason = exception.reason ?? "未知原因"
      let stackTrace = exception.callStackSymbols.joined(separator: "\n")
      // 保存錯誤日志到本地或上報
      let errorLog = "iOS 崩潰：\n名稱：\(name)\n原因：\(reason)\n堆棧：\(stackTrace)"
      print(errorLog)
      // 調(diào)用自定義上報方法
      ErrorReporter.shared.report(errorLog: errorLog)
    }
    // 監(jiān)聽信號量錯誤（如 SIGSEGV、SIGABRT）
    let signals = [SIGABRT, SIGILL, SIGSEGV, SIGFPE, SIGBUS, SIGPIPE]
    for signal in signals {
      signal(signal) { sig in
        let errorLog = "iOS 信號量錯誤：信號 \(sig)"
        print(errorLog)
        ErrorReporter.shared.report(errorLog: errorLog)
        // 退出應(yīng)用（避免僵尸進(jìn)程）
        exit(sig)
      }
    }
    return true
  }
}

// CrashHandler.kt
import android.content.Context
import java.io.PrintWriter
import java.io.StringWriter
class CrashHandler(private val context: Context) : Thread.UncaughtExceptionHandler {
  // 保存默認(rèn)異常處理器
  private val defaultHandler = Thread.getDefaultUncaughtExceptionHandler()
  override fun uncaughtException(t: Thread, e: Throwable) {
    // 收集錯誤信息
    val errorLog = StringBuilder()
    errorLog.append("Android 崩潰：\n線程：${t.name}\n")
    // 獲取堆棧跟蹤
    val sw = StringWriter()
    val pw = PrintWriter(sw)
    e.printStackTrace(pw)
    errorLog.append("堆棧：${sw.toString()}")
    // 保存日志或上報
    print(errorLog.toString())
    ErrorReporter.report(context, errorLog.toString())
    // 調(diào)用默認(rèn)處理器（觸發(fā)系統(tǒng)崩潰提示）
    defaultHandler?.uncaughtException(t, e)
  }
  companion object {
    // 在 Application 中初始化
    fun init(context: Context) {
      Thread.setDefaultUncaughtExceptionHandler(CrashHandler(context))
    }
  }
}
// 初始化（在自定義 Application 類中）
class MyApp : Application() {
  override fun onCreate() {
    super.onCreate()
    CrashHandler.init(this)
  }
}

import axios from 'axios';
import { Alert } from 'react-native';
// 創(chuàng)建 axios 實例
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});
// 請求攔截器：添加請求頭（如 Token）
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);
// 響應(yīng)攔截器：統(tǒng)一處理錯誤
api.interceptors.response.use(
  (response) => response.data, // 成功時直接返回數(shù)據(jù)
  (error) => {
    let errorMessage = '網(wǎng)絡(luò)請求失敗，請稍后重試';
    // 分類處理錯誤
    if (error.response) {
      // 服務(wù)器返回錯誤（4xx/5xx）
      const status = error.response.status;
      const data = error.response.data;
      errorMessage = data?.message || `請求錯誤（${status}）`;
      // 特殊狀態(tài)碼處理（如 401 未授權(quán)）
      if (status === 401) {
        // 觸發(fā)登出邏輯
        logout();
        errorMessage = '登錄已過期，請重新登錄';
      }
    } else if (error.request) {
      // 無響應(yīng)（網(wǎng)絡(luò)錯誤、超時）
      errorMessage = error.code === 'ECONNABORTED' ? '請求超時' : '網(wǎng)絡(luò)異常，請檢查網(wǎng)絡(luò)連接';
    } else {
      // 請求配置錯誤（如參數(shù)錯誤）
      errorMessage = `請求配置錯誤：${error.message}`;
    }
    // 上報錯誤信息
    reportErrorToMonitor({
      type: 'NetworkError',
      message: errorMessage,
      stack: error.stack,
      requestConfig: error.config,
    });
    // 向用戶展示錯誤提示
    Alert.alert('提示', errorMessage);
    return Promise.reject(error);
  }
);
// 使用示例：獲取用戶數(shù)據(jù)
const fetchUser = async (userId) => {
  try {
    const data = await api.get(`/users/${userId}`);
    return data;
  } catch (error) {
    // 業(yè)務(wù)層可額外處理（如重試、降級）
    console.error('獲取用戶數(shù)據(jù)失?。?, error);
    throw error; // 向上傳遞錯誤，供組件處理
  }
};

// CustomModule.kt
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
import com.facebook.react.bridge.Promise
class CustomModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
  override fun getName() = "CustomModule"
  // 用 Promise 封裝原生方法，便于 JS 捕獲錯誤
  @ReactMethod
  fun processData(input: String, promise: Promise) {
    try {
      // 校驗參數(shù)
      if (input.isEmpty()) {
        throw IllegalArgumentException("輸入?yún)?shù)不能為空")
      }
      // 業(yè)務(wù)邏輯
      val result = "處理后的結(jié)果：$input"
      promise.resolve(result) // 成功回調(diào)
    } catch (e: Exception) {
      // 錯誤回調(diào)：傳遞錯誤信息到 JS 層
      promise.reject("PROCESS_ERROR", e.message, e)
    }
  }
}

import { NativeModules } from 'react-native';
const { CustomModule } = NativeModules;
// 調(diào)用原生模塊方法
const processNativeData = async (input) => {
  try {
    const result = await CustomModule.processData(input);
    return result;
  } catch (error) {
    // 捕獲原生模塊拋出的錯誤
    console.error('原生模塊調(diào)用失敗：', error.code, error.message);
    // 上報錯誤
    reportErrorToMonitor({
      type: 'NativeModuleError',
      module: 'CustomModule',
      method: 'processData',
      code: error.code,
      message: error.message,
    });
    // 向用戶提示
    Alert.alert('錯誤', `處理失?。?{error.message}`);
    throw error;
  }
};
// 使用示例
processNativeData('測試輸入')
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

import AsyncStorage from '@react-native-async-storage/async-storage';
import { Alert } from 'react-native';
// 封裝 AsyncStorage 操作，統(tǒng)一處理錯誤
const StorageService = {
  async setItem(key, value) {
    try {
      const jsonValue = JSON.stringify(value);
      await AsyncStorage.setItem(key, jsonValue);
    } catch (error) {
      console.error(`存儲 ${key} 失?。篳, error);
      // 上報錯誤
      reportErrorToMonitor({
        type: 'StorageError',
        operation: 'setItem',
        key,
        message: error.message,
      });
      // 提示用戶
      Alert.alert('存儲錯誤', '數(shù)據(jù)保存失敗，請檢查存儲空間');
      throw error;
    }
  },
  async getItem(key) {
    try {
      const jsonValue = await AsyncStorage.getItem(key);
      return jsonValue != null ? JSON.parse(jsonValue) : null;
    } catch (error) {
      console.error(`獲取 ${key} 失?。篳, error);
      reportErrorToMonitor({
        type: 'StorageError',
        operation: 'getItem',
        key,
        message: error.message,
      });
      // 降級處理：返回默認(rèn)值
      return null;
    }
  },
};

// 安裝依賴：npm install @sentry/react-native && npx pod-install ios
import * as Sentry from '@sentry/react-native';
// 初始化 Sentry（在 App 入口處）
Sentry.init({
  dsn: '你的 Sentry DSN',
  environment: __DEV__ ? 'development' : 'production',
  tracesSampleRate: 1.0, // 性能監(jiān)控采樣率
});
// 手動上報錯誤（可選）
try {
  // 可能出錯的邏輯
} catch (error) {
  Sentry.captureException(error, {
    extra: { customInfo: '額外上下文信息' },
    tags: { module: 'user', action: 'login' },
  });
}

import { StrictMode } from 'react';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
AppRegistry.registerComponent(appName, () => () => <StrictMode><App /></StrictMode>);