私の React の旅: 17 日目

エラー処理とデバッグ
プログラムの実行中にエラーは避けられませんが、適切な処理技術を使用すればエラーを効果的に管理できます。これにより、プログラムが予期せずクラッシュすることがなくなり、ユーザーに有意義なフィードバックが提供されます。

エラーとは何ですか?
エラーは、プログラムの実行中に発生する問題を表すオブジェクトです。
エラーが正しく処理されないと、プログラムのフローが中断される可能性があります。

一般的なタイプのエラー:

1. ネットワーク エラー: 接続の確立に関する問題 (API 呼び出しの失敗など)。
2. Promise の拒否: 未処理の Promise は拒否された状態になります。
3. セキュリティ エラー: 権限、アクセス、またはその他のセキュリティ制限に関連する問題。

エラー処理メソッド
試して...捕まえて...最後に 構造:
1.try{ } ブロック:

• エラーをスローする可能性のあるコードが含まれています。

2.catch { } ブロック:

• try ブロックでスローされたエラーをキャプチャして処理します。
• デバッグ時の可視性を高めるには、console.log の代わりに console.error を使用します。

3.finally { } ブロック (オプション):

• エラーが検出されたかどうかに関係なく、常に実行されます。
• クリーンアップ タスク (ファイルを閉じる、リソースを解放するなど) によく使用されます。

** 例**

一般的なエラー処理

try {
    console.log(x); // Throws ReferenceError because 'x' is not defined
}
catch (error) {
    console.error(error); // Outputs: ReferenceError: x is not defined
}
finally {
    console.log("This always executes");
}

console.log("You have reached the end!");

ユーザー入力エラーの処理

try {
    const dividend = Number(window.prompt("Enter a dividend: "));
    const divisor = Number(window.prompt("Enter a divisor: "));

    if (divisor === 0) {
        throw new Error("You can't divide by zero!");
    }
    if (isNaN(dividend) || isNaN(divisor)) {
        throw new Error("Values must be numbers.");
    }

    const result = dividend / divisor;
    console.log(result);
}
catch (error) {
    console.error(error.message); // Logs the custom error message
}
finally {
    console.log("You have reached the end");
}

エラー処理のベストプラクティス

1.説明的なエラー メッセージを使用する:

• デバッグやユーザーのフィードバックのためにエラーを理解しやすくします。

• 例: 「ネットワーク エラー」の代わりに「サーバーに接続できません」。
  2.クリーンアップタスクにはfinallyを使用します:

• ファイル ハンドル、データベース接続などのリソースを常に解放します。

3.特定のエラーをキャッチする:

• 過度に汎用的な catch ブロックは避けてください。さまざまなエラーを適切に処理します。
• 例:

try {
    // Code
}
catch (error) {
    if (error instanceof TypeError) {
        console.error("Type Error:", error.message);
    } else {
        console.error("General Error:", error.message);
    }
}

4.サイレント失敗を避ける:

• エラーを黙って抑制するのではなく、常にエラーをログに記録するか、通知してください。

反省

学んだこと:

• try...catch...finally を使用してエラーを適切に管理する方法。
• デバッグに console.error を使用することの重要性。
• 意味のあるメッセージを含むカスタム エラーをスローします。

ゆっくりと着実にレースに勝つ!

以上が私の React の旅: 17 日目の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。