ReactでFirebase/Firestoreのエラーハンドリングをする方法2選!





ReactでFirebase/Firestoreのエラーハンドリングをしたいときはないでしょうか。
けど、そんな中で悩むことは、

・ReactでFirebase/Firestoreのエラーハンドリングをする方法がわからない

ですよね。

今回はそんなお悩みを解決する

・ReactでFirebase/Firestoreのエラーハンドリングをする方法2パターン

についてまとめます!

Firebase/Firestoreのエラーハンドリングをする方法

ReactでFirebase/Firestoreのエラーハンドリングをする方法は大きく分けてPromiseチェーンを使用する方法とasync/awaitを使用する方法の二種類あります。

Promiseチェーンを使用する方法

FirestoreのメソッドはPromiseを返すため、Promiseチェーンを使用してエラーハンドリングを行うことができます。以下は、Promiseチェーンを使用したエラーハンドリングの例です。

const Update = () => {
  const cityRef = doc(db, "citys", count);
  setDoc(cityRef, { name:  "Tokyo", update: serverTimestamp() }, { merge: true })
    .then(() => {
      console.log("Firestore更新", doc.data());
    })
    .catch((error) => {
      console.error("Firestoreの更新処理に失敗しました", error);
    });
};

then()の方は成功した場合の処理、catch()はエラーとなった場合の処理を記述します。

async/awaitを使用する方法

async/awaitを使用することで、Promiseチェーンをネストせずにエラーハンドリングを行うことができます。async/awaitを使用する場合は、try-catch文を使用して、エラーハンドリングを行います。以下は、async/awaitを使用したエラーハンドリングの例です。

const Update = async () => {
  const cityRef = doc(db, "citys", count);
  try {
    await setDoc(
      cityRef,
      { name: "Tokyo", update: serverTimestamp() },
      { merge: true }
    );
    console.log("Firestore更新");
  } catch (error) {
    console.error("Firestoreの更新処理に失敗しました", error);
  }
};

tryの方で処理結果を得たい処理でawaitで非同期状態にします、catchはエラーとなった場合の処理を記述します。


async/awaitを使用することでより直感的なコードが書ける場合があるため、現在ではasync/awaitを使用することが一般的になっています。

Promiseチェーンとasync/awaitの混合はできない

注意いただきたい点として、Promiseチェーンとasync/awaitの混合は避けた方が良いです。
以下は例となります。

const Update = async () => {
  const cityRef = doc(db, "citys", count);
  await setDoc(
    cityRef,
    { name: "Tokyo", update: serverTimestamp() },
    { merge: true }
  )
    .then(() => {
      console.log("Firestore更新");
    })
    .catch((error) => {
      console.error("Firestoreの更新処理に失敗しました", error);
    });
};

この場合、awaitキーワードがthen()メソッドの後ろに置かれているため、Promiseが解決される前にrouter.push()が呼び出されてしまう可能性があります。


また、catch()メソッドはPromiseチェーン内に置かれていますが、awaitキーワードとの併用は推奨されませんので、避けた方がよいでしょう。

さいごに

いかがでしょうか。

今回は、

・ReactでFirebase/Firestoreのエラーハンドリングをする方法2パターン

についてまとめました。

また、他にも便利な方法がありますので、よろしければご参照頂ければと思います。


タカヒロ
タカヒロ
Reactって覚えることが多く難しいですよね...
タカヒロも悩んでいましたが、こちらの本でかなり理解ができるようになりました!


>>Amazonで詳細を見る


電子書籍もいいですが、紙質がやわらかく読みやすいので書籍のほうがおすすめです。


この記事の関連キーワード

こちらの記事の関連キーワード一覧です。クリックするとキーワードに関連する記事一覧が閲覧できます。