😸

【開発ログ】動作確認・エラー処理

に公開
Firebase
Next.js
TypeScript
個人開発
Prisma
tech

デザイン強化をするつもりでしたが、まずは動作確認とエラー処理が必要だと判断し、UI/UX の改善は後回しにしました。

今回の作業では、画像アップロードや単語の保存が DB・Firebase に正しく反映されるか、またエラーが出た場合にどのように処理するかを中心に記録しています。

前回

  • 公開 / 下書き切り替え機能
  • Firebase Storage での画像アップロード

今回

  • 画像アップロードの動作確認
  • 単語を DB / Firebase へ保存する処理の検証
  • エラー発生時のログ確認とハンドリング方法の記録

① チェックリスト

  1. 画像アップロード

    • ファイル選択 → preview 表示を確認
    • Firebase Storage への保存（images/ファイル名-タイムスタンプ 経路）を確認
    • getDownloadURL の結果が正常か

    画像アップロード{:width="150"}

  2. API 呼び出し

    • /api/words/new または /api/words/{id} に POST できるか
    • サーバログを確認し、DB 保存まで到達しているか
    • Response が res.json() で正常に返ってくるか

  3. FormData の確認

    • 韓国語 / 日本語が DB に保存されているか
    • imageUrl, storagePath, contentType が DB に保存されているか

結果

  • storageBucket が初期化されていないというエラーが発生
  • getStorage(app, "gs://...") と明示的に書くことで解決
  • タグを書く欄がなかったことに気づいた（やばい）

悩んだこと / 学んだこと

  • useContext でグローバルユーザ管理を試した
  • クライアントから直接 UID を渡すのは危険。セッション経由でサーバ側から取得すべきというセキュリティの学び
  • Firebase Storage は bucket の指定が甘いとエラーになりがち

次回やること

  • タグ機能（検索・フィルタリング対応も検討）
  • レッスンカードを API から取得

Discussion