面试题：React 错误边界与服务端渲染在数据获取方面的兼容策略

设计方案

服务端错误处理：在服务端获取数据时，捕获可能出现的错误，而不是让其抛到上层导致整个渲染失败。
传递错误信息：将捕获到的错误信息通过上下文或其他方式传递到客户端，以便错误边界能够识别并处理。
客户端错误边界处理：客户端的错误边界需要有能力接收服务端传递过来的错误信息，并进行相应的渲染处理，如显示友好的错误提示。

关键代码逻辑

服务端数据获取：

import React from'react';
import { renderToString } from'react-dom/server';
import App from './App';

async function serverSideRender() {
  let error = null;
  let data = null;
  try {
    // 假设这是获取数据的异步操作
    data = await fetchData(); 
  } catch (e) {
    error = e;
  }
  const appHtml = renderToString(<App error={error} data={data} />);
  return appHtml;
}

async function fetchData() {
  // 模拟异步数据获取，这里可能会抛出错误
  throw new Error('Data fetching error');
}

客户端错误边界：

import React, { Component } from'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null
    };
  }

  componentDidMount() {
    if (this.props.error) {
      this.setState({
        hasError: true,
        error: this.props.error
      });
    }
  }

  componentDidCatch(error, errorInfo) {
    this.setState({
      hasError: true,
      error: error
    });
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Something went wrong!</h1>
          <p>{this.state.error.message}</p>
        </div>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

使用错误边界：

import React from'react';
import ReactDOM from'react-dom';
import ErrorBoundary from './ErrorBoundary';
import App from './App';

ReactDOM.render(
  <ErrorBoundary>
    <App />
  </ErrorBoundary>,
  document.getElementById('root')
);

在上述代码中，服务端在获取数据时捕获错误并将其传递给 App 组件。客户端的 ErrorBoundary 组件在挂载时检查是否有服务端传递过来的错误，并根据情况进行渲染。如果在客户端渲染过程中又发生新的错误，componentDidCatch 也会捕获并处理。

星途面试题库

面试题：React 错误边界与服务端渲染在数据获取方面的兼容策略

知识考点

面试题答案

设计方案

关键代码逻辑