---

---

【React in TypeScript】ErrorBoundariesの使用方法と注意点

投稿日：2021年2月11日

ErrorBoundariesとは子孫要素で発生したエラーの処理をするために作成されたコンポーネントです。エラー発生したことをユーザーに知らせたり、エラーログを作成したりするために使用します。この記事ではErrorBoundariesコンポーネントの使い方・ユースケース・使用の際の注意点について解説しています。

---

はじめに

ErrorBoundariesとは

環境

---

実践

import React, { ErrorInfo } from "react";

/**
 * 子要素でエラーが発生した際に取得し、その情報をコンソールログに出力する
 * エラーが発生したことはユーザーに知らせる
 */
class ErrorBoundary extends React.Component<{}, { hasError: boolean }> {
  constructor(props: {}) {
    super(props);
    this.state = {
      hasError: false,
    };
  }
  static getDerivedStateFromError(): { hasError: boolean } {
    console.log("getDerivedStatefromErrorがよばれました。");
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    console.log(error);
    console.log(errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div>エラーが発生しました</div>;
    }
    return <>{this.props.children}</>;
  }
}

export default ErrorBoundary;

import React from "react";

/**
 * ユーザーデータの構造定義
 */
interface UserData {
  user: {
    name: string;
    age: number;
  };
}

/**
 * APIの呼び出しのMock
 */
const callAPIMock = async (): Promise<UserData> => {
  const sampleResponse = '{"username": "marsquai", "age": 120}';
  return JSON.parse(sampleResponse);
};

/**
 * サンプルコンポーネント
 * ユーザーデータを取得して情報を表示する
 *
 */
const SampleComponent = () => {
  const [userData, setUserData] = React.useState<UserData | undefined>(
    undefined
  );
  callAPIMock().then((data) => {
    setUserData(data);
  });
  if (userData) {
    // 想定しているデータと違う構造であるため必ずエラーが発生する
    return (
      <div>
        <div>{userData.user.name}</div>
        <div>{userData.user.age}</div>
      </div>
    );
  } else {
    return <div>データ取得中</div>;
  }
};

export default SampleComponent;

import React from "react";
import ErrorBoundary from "./components/ErrorBoundary";
import SampleComponent from "./components/SampleComponent";

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

export default App;

---

注意点

npm run start

$ npm install --save-dev serve
$ npm run build
$ npx serve -s build

キャッチできないエラー

import React from "react";

/**
 * ユーザーデータの構造定義
 */
interface UserData {
  user: {
    name: string;
    age: number;
  };
}

/**
 * APIの呼び出しのMock
 */
const callAPIMock = async (): Promise<UserData> => {
  const sampleResponse = '{"username": "marsquai", "age": 120}';
  throw Error("Error in callAPIMock"); // エラー処理を追加
  return JSON.parse(sampleResponse);
};

/**
 * サンプルコンポーネント
 * ユーザーデータを取得して情報を表示する
 *
 */
const SampleComponent = () => {
  const [userData, setUserData] = React.useState<UserData | undefined>(
    undefined
  );
  callAPIMock().then((data) => {
    setUserData(data);
  });
  if (userData) {
    // 想定しているデータと違う構造であるため必ずエラーが発生する
    return (
      <div>
        <div>{userData.user.name}</div>
        <div>{userData.user.age}</div>
      </div>
    );
  } else {
    return <div>データ取得中</div>;
  }
};

export default SampleComponent;

import React from "react";

/**
 * サンプルコンポーネント
 * ユーザーデータを取得して情報を表示する
 *
 */
const SampleComponent = () => {
  return (
    <div>
      <button
        onClick={() => {
          throw Error("Error from button");
        }}
      >
        エラー発生
      </button>
    </div>
  );
};

export default SampleComponent;

render()メソッドについて

render() {
    return (
      <>
        {this.state.hasError && <div>エラーが発生しました。</div>}
        <div>{this.props.children}</div>
      </>
    );
  }

---

---

---