ReactでFirebase/Firestoreのエラーハンドリングをしたいときはないでしょうか。
けど、そんな中で悩むことは、
ですよね。
今回はそんなお悩みを解決する
についてまとめます！
もくじ
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キーワードとの併用は推奨されませんので、避けた方がよいでしょう。
さいごに
いかがでしょうか。
今回は、
についてまとめました。
また、他にも便利な方法がありますので、よろしければご参照頂ければと思います。
タカヒロも悩んでいましたが、こちらの本でかなり理解ができるようになりました！
＞＞Amazonで詳細を見る
電子書籍もいいですが、紙質がやわらかく読みやすいので書籍のほうがおすすめです。
この記事の関連キーワード
「Firebase」の関連記事
こちらの記事の内容「Firebase」に関連する記事一覧です。
