デバッグの現実

初心者は、経験豊富な開発者はミスをしないと思いがちです。

実態は異なります。

経験豊富な開発者は、単にミスを見つけて修正するのが早いだけなのです。

最近、React、Zustand、Express、Prisma、PostgreSQLを使用して、フルスタックのプロジェクト管理アプリを構築しました。その過程で、数十もの小さなバグに直面しました。これらのバグのおかげで、モダンなフロントエンドアプリがどのように動作するのかを学ぶことができました。

学んだ教訓は以下の通りです：

  • Reactの useEffect と Async useEffect に async 関数を直接渡すことはできません。Reactはクリーンアップ関数、あるいは何も返さないことを期待しています。async 関数は Promise を返すため、このルールに違反してしまいます。代わりに、エフェクトの中で関数を定義して呼び出してください。

  • 呼び出し忘れた関数 かつて、useEffect の中に async 関数を書いたものの、実際に呼び出すのを忘れてしまったことがありました。コンポーネントはマウントされましたが、何も起こりませんでした。バグの中には、単なる関数の呼び出し忘れであることもあります。

  • Axiosのデータ構造 Axiosはオブジェクトを返します。データは response.data の中に格納されています。レスポンス全体をステートに保存しようとすると、アプリは正常に動作しません。

  • URLの重複 私のAxiosインスタンスには base URL が設定されていました。それなのに、リクエスト時に再びAPIのプレフィックスを追加してしまったのです。その結果、/api/api/projects のような二重のパスが生成されてしまいました。抽象化した部分は常に確認しましょう。

  • ナビゲーションのエラー Navigate コンポーネントはレンダリング中にのみ機能します。クリック後にユーザーを遷移させたい場合は、代わりに useNavigate フックを使用してください。

  • バックエンドのコントラクト バックエンドは accessToken というプロパティを送信していましたが、フロントエンドは token という名前のプロパティを探していました。名前が一致しなかったため、認証ステートは undefined のままになってしまいました。フロントエンドとバックエンドは、常に同じ名前を使用する必要があります。

  • タイミングの問題 アプリがユーザーのログイン前に通知を取得しようとしたため、401 エラーが発生しました。解決策は、通知を確認することではなく、リクエストを送信する前に認証状態を確認することでした。

最大の教訓は、ワークフローについてでした。推測するのはやめましょう。

代わりに、このプロセスに従ってください：

  • ブラウザのコンソールを確認する。
  • Network タブを確認する。
  • APIのレスポンスを調査する。
  • バックエンドのコントラクトを検証する。
  • ステートを調査する。
  • データベースからUIに至るまでのデータの流れを追う。

ソフトウェア開発は、タイピングの速さではありません。データの動きを理解することです。チュートリアルは簡単な道を示してくれますが、プロジェクトは現実の道を教えてくれます。

本物のものを作りましょう。バグは、どんなチュートリアルよりも多くのことを教えてくれます。

出典: https://dev.to/chinwuba_jeffrey/debugging-this-stuff-59b5