如何强制React组件抛出错误以测试错误处理流程？

你需要强制React组件抛出错误，完整验证错误捕获流程并排查Sentry未接收部分错误的问题，之前在按钮中添加的XHR代码未生效，原因是XMLHttpRequest的错误属于异步错误，try/catch无法捕获异步回调中的异常，且异步回调内的错误不在React的同步错误捕获范围内，所以ErrorBoundary和Sentry都无法正常捕获。

以下是几种可行的实现方案：

1. 同步事件中直接抛错（最简单直接） #

在按钮点击的同步逻辑里直接抛出错误，React会将这类事件处理中的错误交给ErrorBoundary处理，同时Sentry也能正常捕获：

const onClick = (event: React.MouseEvent<HTMLElement>): void => {
  throw new Error("强制触发React错误边界");
};

2. 模拟渲染阶段错误 #

通过状态控制触发组件渲染时抛出错误，更贴近业务中渲染逻辑出错的场景：

import { useState } from 'react';

const TestComponent = () => {
  const [triggerError, setTriggerError] = useState(false);

  // 渲染阶段判断，满足条件则抛错
  if (triggerError) {
    throw new Error("渲染阶段强制抛出错误");
  }

  return (
    <button onClick={() => setTriggerError(true)}>
      触发渲染错误
    </button>
  );
};

3. 处理异步操作触发的错误 #

如果需要模拟API请求等异步场景的错误，可通过状态更新将异步错误转化为渲染阶段的错误，确保被ErrorBoundary和Sentry捕获：

import { useState, useEffect } from 'react';

const TestComponent = () => {
  const [hasAsyncError, setHasAsyncError] = useState(false);

  useEffect(() => {
    if (hasAsyncError) {
      throw new Error("异步请求失败触发的错误");
    }
  }, [hasAsyncError]);

  const onClick = () => {
    const http = new XMLHttpRequest();
    http.open("GET", "https://httpstat.us/504");
    http.onerror = () => {
      // 异步请求失败后更新状态，触发渲染时抛错
      setHasAsyncError(true);
    };
    http.send();
  };

  return <button onClick={onClick}>触发异步错误</button>;
};

如果需要直接验证Sentry的上报能力，也可以手动调用Sentry的API：

import * as Sentry from '@sentry/react';

const onClick = () => {
  const testError = new Error("手动上报Sentry的测试错误");
  Sentry.captureException(testError);
  // 若同时需要触发ErrorBoundary，同步抛出错误
  throw testError;
};

内容的提问来源于stack exchange，提问作者FE-P