以下所有代码都已整理到 Github：https://github.com/Haixiang6123/learn-error-bounday

参考的轮子：https://www.npmjs.com/package/react-error-boundary

发生甚么事了

朋友们好啊，我是海怪，刚才老板对我说：海怪，发生甚么事了，怎么页面白屏了？我说：怎么回事？给我发了几张截图。我打开控制台一看：

哦！原来是昨天，有个后端年轻人，说要和我联调接口，我说：可以。然后，我说：小兄弟，你的数据尽量按我需要的格式来：

interface User {
    name: string;
    age: number;
}

interface GetUserListResponse {
    retcode: number;
    data: User[]
}

踏不服气，他说你这个没用，我说我这个有用，这是规范，传统前后端联调返回数据是要讲规范的，对项目质量的提高可以起到四两拨千斤的作用。100多万行代码的系统，只要有了类型规范，都不会轻易崩溃。他说试试，我说行。

我请求刚发出去，他的数据，啪！的一下就返回了！很快啊！！

{
    retcode: 0,
    data: [
        {name: '张三', age: 11},
        undefined,
        null
    ]
}

上来先是一个 retcode: 0，然后数组里一个 User 对象，一个 undefined，一个 null，我全部用判断 falsy 值防过去了啊：


if (!u) {
   return 0;
}

const trimName = u.name.trim();

return getScore(trimName);

防过去之后自然是正常处理业务逻辑和页面展示。虽然没有按照规范来，但是数组里偶尔有个 falsy 值也还好，我把数组类型改成 Array，没有和他说，同事之间，点到为止。我笑一下提交测试了，发了正式环境，准备收工。然后，这时候，老板突然说线上白屏爆炸，我一看返回的数据：

{
    retcode: 0,
    data: [
        {name: '张三', age: 11},
        '找不到此用户',
        '找不到此用户',
        '找不到此用户'
    ]
}

我大意了啊！没有做类型判断！马上回滚。加了 if (typeof user === 'string') 的字符串类型判断，准备再次发正式，但是我一想不对，难不成对每个数据我都要像像佛一样供着？

// 这就很离谱
try {
    const scores = users.map(u => {
        // 判空
        if (!u) {
            return;
        }

        // 判断错误类型
        if (typeof u === 'string') {
            return;
        }

        // 判断属性是否存在
        if (!u.name) {
            return;
        }

        const trimName = u.name.trim(0);

        return getScore(trimName);
    })

    return scores;
} catch (e) {
    return null;
}

这明显是后端没有对错误进行特殊处理啊，但是作为前端开发就算被后端百般蹂躏，页面也不应该白屏，应该就那个组件报错就好了。我定了定神，决定使出“闪电五连鞭”。

34fe-kefmphe1371072.gif

相信大家对JS异常捕获很熟悉了，try-catch 一包业务代码就收工了。不过，在组件里对异常捕获，需要用到的是 React 提供的 Error Boundary 错误边界特性，用 componentDidCatch 钩子来对页面异常进行捕获，以至于不会将异常扩散到整个页面，有效防止页面白屏。

下面，我来展示一下怎么打好这套“闪电五连鞭”。

第一鞭：抄

直接把官网例子抄下来，将 ErrorBoundary 组件输出:

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

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    logger.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return Something went wrong.;
    }

    return this.props.children; 
  }
}

然后将业务组件包裹：

 // 捕获错误
   // 使劲报错

如果 UserList 里报错，ErrorBoundary 就会捕获，然后在 getDerivedStateFromError 里更新组件状态，render 里就会显示 Something went wrong，不会渲染 this.props.children。

总结：
1. 将 ErrorBoundary 包裹可能出错的业务组件
2. 当业务组件报错时，会调用 componentDidCatch 钩子里的逻辑，将 hasError 设置 true，直接展示

第二鞭：造个灵活的轮子

上面只是解决了燃眉之急，如果真要造一个好用的轮子，不应直接写死 return

`Something went wrong`

，应该添加 props 来传入报错显示内容（以下统称为 fallback）：

// 出错后显示的元素类型
type FallbackElement = React.ReactElement | null;

// 出错显示组件的 props
export interface FallbackProps {
  error: Error;
}

// 本组件 ErrorBoundary 的 props
interface ErrorBoundaryProps {
  fallback?: FallbackElement;
  onError?: (error: Error, info: string) => void;
}

// 本组件 ErrorBoundary 的 props
interface ErrorBoundaryState {
  error: Error | null; // 将 hasError 的 boolean 改为 Error 类型，提供更丰富的报错信息
}

// 初始状态
const initialState: ErrorBoundaryState = {
  error: null,
}

class ErrorBoundary extends React.Component, ErrorBoundaryState> {
  state = initialState;

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

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    if (this.props.onError) {
      this.props.onError(error, errorInfo.componentStack);
    }
  }

  render() {
    const {fallback} = this.props;
    const {error} = this.state;

    if (error !== null) {
      if (React.isValidElement(fallback)) {
        return fallback;
      }

      throw new Error('ErrorBoundary 组件需要传入 fallback');
    }

    return this.props.children;
  }
}

export default ErrorBoundary

上面提供 onError 和 falback 两个 props，前者为出错的回调，可以做错误信息上报或者用户提示，后者则传入错误提示内容，像下面这样：

const App = () => {
  return (
    出错啦

方法	触发范围	使用场景	思想负担
手动调用 resetErrorBoundary	一般在 fallback 组件里	用户可以在 fallback 里手动点击“重置”实现重置	最直接，思想负担较轻
更新 resetKeys	哪里都行，范围更广	用户可以在报错组件外部重置、`resetKeys` 里有报错组件依赖的数据、渲染时自动重置	间接触发，要思考哪些值放到 `resetKeys` 里，思想负担较重

造一个 React 错误边界的轮子

发生甚么事了

第一鞭：抄

Something went wrong.

第二鞭：造个灵活的轮子

`Something went wrong`

第三鞭：添加重置回调

第四鞭：监听渲染以重置

第五鞭：输出轮子

“闪电五连鞭”总结

耗子尾汁，好好反思

你可能感兴趣的:(造一个 React 错误边界的轮子)