Firebaseでメモアプリを作成した時のエラー対処について~400 (Bad Request)~

はじめに

こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。Firebasaを使用してデータベースと連携するシンプルなメモアプリを作成した際に発生したエラーの解決までの流れを整理してみました。

アプリの概要

今回は、HTML・CSS・JavaScriptのフロントエンド技術に加えて、サーバーサイドではNode.js、Vite、Firebaseを利用しています。
構成は以下の通りです。

• ホーム画面：ユーザーがメモを入力するページ
• 履歴画面：入力されたメモが履歴として表示されるページ
  
  
  このアプリは、FirebaseのFirestoreを利用してデータを保存し、履歴として表示する仕組みです。

エラーの概要

しかし、実際にアプリを動作させたところ、ホーム画面で入力した値が履歴画面に反映されないという問題が発生しました。

エラーへの対応 part1

どこにエラーがあるかアプリの動きをイメージして仮説を立ててみました。

想定①：クライアントサイドでのエラー
→Submitを押しても、機能していない
想定②：サーバーサイドでのエラー
→入力された情報が、サーバーサイドで受け取れていない

1. クライアントサイドのエラー確認(1回目のトライ)

• ホーム画面で入力した情報がサーバーに送信されているかを確認するため、console.log(formData)を使用して、送信データを確認しました
• 結果として、「400エラー」が表示され、送信時に問題がある事が判明しました
• さらに調査すると、Firestoreのフィールド名に「date」と記載していたのに対し、JavaScript側では「data」として送信していたため、不一致が原因でエラーが発生していることを確認しました
• フィールド名を一致させても問題は解決せず、エラーの内容が少し変わったため、他にも原因があると推測しました

Firestore Databaseの画面

実際のコード

export const submitData = async (e, addDoc, collection, db) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  console.log(formData);
  try {
    const docRef = await addDoc(collection(db, "reports"), {
      date: new Date(),
      name: formData.get("name"),
      work: formData.get("work"),
      comment: formData.get("comment"),
    });
    console.log("Document written with ID:", docRef.id);
  } catch (e) {
    console.error("Error adding document:", e);
  }
};

上記のJSのコードが、date: new Date(),ではなくdata: new Data().となっていました。

エラーへの対応 part2

2. クライアントサイドのエラー確認(2回面のトライ)

• エラーの詳細を再度確認すると、Firestoreとの通信に問題があることが示唆されていました
• 次に、環境変数の設定に問題があると仮定し、.envファイルとJavaScriptコードの環境変数の設定を確認しました
• 実際には、.envファイルに記載していたFirebaseのAPIキーなどの設定値が、JavaScript側で読み込んでいる値と一致していませんでした。これにより、Firestoreとの接続が正しく行われていなかったようです
• そこで、環境変数を修正し、再度ビルドとデプロイを行ったところ、エラーが解消され、データの送信と表示が正常に動作するようになりました

エラーの文面

submit-data.js:6 
 GET https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channe…rpc&SID=uHAJ1pgpAQ3Rfi3Zb8a7zQ&AID=0&CI=0&TYPE=xmlhttp&zx=11lhs7adpymf&t=1 400 (Bad Request)
submit-data.js:6 [2024-07-25T21:54:20.403Z]  @firebase/firestore: Firestore (10.12.4): WebChannelConnection RPC 'Write' stream 0x295106fd transport errored: 
jd {type: 'c', target: Y2, g: Y2, defaultPrevented: false, status: 1}

エラーの文面をどのように噛み砕いたか

エラーメッセージ内にあるhttps://firestore.googleapis.comの部分が重要なヒントになりました。これは、Firestoreに対して行われたリクエストが失敗していることを示しています。さらに、エラーステータスとして400 (Bad Request)が返ってきており、これはリクエストが無効であることを意味しています。このことから、Firestoreの連携が正しく機能していない可能性があると推測しました。

また、@firebase/firestoreというエラーメッセージ内のライブラリ名も重要な情報で、FirebaseのFirestoreに関わる問題であることを示しています。特にWebChannelConnection RPC 'Write' streamという部分が、書き込みの処理中にエラーが発生していることを明示していました。

以上のことから、FirebaseとFirestoreの設定や連携に何か問題があると考え、環境変数や連携設定の見直しを行いました。

まとめ

今回の問題は、クライアントサイドとサーバーサイドの連携における設定のミスが原因でした。主なポイントは以下の通りです：

• クライアントサイドでは、データの送信が正しく行われているかをconsole.logなどで確認する事が重要
• サーバーサイドでは、環境変数の設定ミスが多くのエラーの原因になるため、正確に記述し、JavaScriptで正しく読み込んでいるか確認する必要があります

Firebaseを使ったプロジェクトでは、環境変数の確認とFirestoreのフィールド名の一致が特に重要だと感じました。

最後までご覧いただき本当にありがとうございました！！