创建一个TypeScript错误边界组件，用于捕获子组件树中的JavaScript错误，并优雅地向用户显示错误信息。如何确保错误处理的类型兼容性？

在前端应用中，错误是不可避免的。就像保险丝保护电路一样，错误边界组件能够在子组件发生JavaScript错误时捕获这些错误，并提供备选UI，避免整个应用崩溃。

文末有我帮助400多位同学成功领取到前端offer的面试综合题哦，包含了工程化，场景题，八股文，简历模板，等等

为什么需要错误边界组件？

• 容错性：防止一个组件的崩溃影响到整个应用。
• 用户体验：在发生错误时向用户提供友好的反馈。
• 类型安全：确保错误处理逻辑与组件类型兼容。

如何创建TypeScript错误边界组件并确保类型兼容性？

1. 定义错误边界组件结构：

2. 创建一个React组件，使用生命周期方法static getDerivedStateFromError和componentDidCatch来捕获子组件的错误。

import React from 'react';

interface ErrorBoundaryProps {
  children: React.ReactNode;
}

interface ErrorBoundaryState {
  error: Error | null;
  errorInfo: React.ErrorInfo | null;
}

class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = {
      error: null,
      errorInfo: null,
    };
  }

  static getDerivedStateFromError(error: Error): { error: Error } {
    return { error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    this.setState({
      error: error,
      errorInfo: errorInfo,
    });
    // 可以在这里上报错误信息
  }

  render() {
    if (this.state.error) {
      // 渲染备用UI
      return (
        <div>
          <h2>Something went wrong.</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

1. 确保类型****兼容性：

2. 使用TypeScript的类型注解来确保error和errorInfo的类型兼容性。

// TypeScript会自动从React.ErrorInfo类型中推断errorInfo的类型

1. 使用错误边界组件：

2. 将ErrorBoundary组件包裹在需要错误捕获的组件树外。

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

1. 上报错误信息：

2. 在componentDidCatch中，可以调用错误上报服务，将错误信息发送到服务器。

3. 测试错误边界组件：

4. 编写单元测试来验证错误边界组件的行为。

// 使用Jest和React Testing Library进行测试
import { render, screen } from '@testing-library/react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

test('ErrorBoundary catches errors in children', () => {
  const { container } = render(
    <ErrorBoundary>
      <MyComponent /> {/* 假设MyComponent会抛出错误 */}
    </ErrorBoundary>
  );

  expect(container.firstChild).toMatchSnapshot();
});

通过TypeScript创建的错误边界组件，我们不仅能够捕获子组件树中的错误，还能确保错误处理逻辑的类型兼容性，提升应用的健壮性和用户体验。
堪称2024最强的前端面试场景题，已帮助432人成功拿到offer