エラー処理は、JavaScript 開発者なら誰もが遭遇する作業の 1 つですが、誰もがそれを習得することに深く取り組むわけではありません。単純な try...catch ステートメントに依存している場合は、ゲームを改善する時期が来ました。この投稿では、基本的なエラー処理からカスタム エラーの作成までを説明し、コードの復元力を高め、デバッグを容易にします。

1. 基本: トライ...キャッチ

古典的な try...catch から始めましょう:

try {
  const data = JSON.parse('{"name": "John"}');
  console.log(data.age.toUpperCase()); // This will cause an error
} catch (error) {
  console.error("Something went wrong:", error);
}

これはシンプルで効果的です。 try ブロックを使用すると、エラーをスローする可能性のあるコードを実行でき、catch ブロックがエラーをキャプチャして、エラーを適切に処理できるようになります。

ただし、アプリケーションが成長するにつれて、これだけに依存すると、情報が少なくなるエラー メッセージが表示される可能性があり、デバッグは悪夢のようなものになります。ここでカスタム エラー処理が威力を発揮します。

2. ネイティブエラータイプを理解する

JavaScript には次のような組み込みエラー タイプが付属しています。

• エラー: 一般的なエラー オブジェクト。
• TypeError: 変数が予期された型ではない場合にスローされます。
• SyntaxError: コードに構文ミスが含まれている場合にスローされます。
• ReferenceError: 存在しない変数を参照するとスローされます。

例：

try {
  let result = myUndefinedFunction();
} catch (error) {
  if (error instanceof ReferenceError) {
    console.error("ReferenceError detected:", error.message);
  } else {
    console.error("Unexpected error:", error);
  }
}

これらのタイプを利用することで、より説明的なエラー処理パスの構築を開始できます。しかし、アプリケーション ロジックに固有のエラーを定義したい場合はどうすればよいでしょうか?ここでカスタム エラーが発生します。

3. カスタムエラーの作成

なぜカスタムエラーなのか?

カスタム エラーは、コード内の特定の問題を特定するのに役立ち、デバッグがはるかに簡単になります。たとえば、API を構築している場合、ValidationError、AuthenticationError、または DatabaseError を区別する必要がある場合があります。

カスタムエラーの作成方法

例として ValidationError を作成してみましょう:

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

try {
  const age = -5;
  if (age 



Error クラスを拡張することで、より意味のある ValidationError を作成できます。このアプローチにより、問題の性質が明確になり、デバッグが容易になり、コードがクリーンになります。


  
  
  4. カスタム エラーをより多くの情報で強化する


なぜカスタム メッセージだけで終わるのでしょうか? errorCode や statusCode などの追加プロパティを使用してカスタム エラーを充実させましょう。



class HttpError extends Error {
  constructor(statusCode, message) {
    super(message);
    this.name = "HttpError";
    this.statusCode = statusCode;
  }
}

try {
  const response = { status: 404 };
  if (response.status === 404) {
    throw new HttpError(404, "Resource not found");
  }
} catch (error) {
  if (error instanceof HttpError) {
    console.error(`Error ${error.statusCode}: ${error.message}`);
  } else {
    console.error("Unexpected error:", error);
  }
}




これにより、エラーに関するより多くのコンテキストを取得できるため、対処や効果的なログ記録が容易になります。


  
  
  5. グローバルなエラー処理戦略の構築


アプリケーションが拡大するにつれて、エラーを一元的に処理する方法が必要になります。 1 つのアプローチは、さまざまな種類のエラーを処理するエラー処理ユーティリティを作成することです。



function handleError(error) {
  if (error instanceof ValidationError) {
    console.error("Validation failed:", error.message);
  } else if (error instanceof HttpError) {
    console.error(`HTTP error (${error.statusCode}):`, error.message);
  } else {
    console.error("An unexpected error occurred:", error);
  }
}

try {
  throw new HttpError(500, "Internal Server Error");
} catch (error) {
  handleError(error);
}




この一元化されたエラー処理により、コードを DRY (繰り返さない) に保ち、アプリケーション全体で一貫したエラー処理が保証されます。


  
  
  6. 最後にクリーンアップに活用する


多くの場合、データベース接続の終了やタイムアウトのクリアなどのクリーンアップ タスクの実行が必要になることがあります。ここで最終的に役に立ちます:



try {
  // Attempt to execute code
} catch (error) {
  // Handle errors
} finally {
  console.log("This will always execute, whether an error occurred or not.");
}




finally を使用すると、エラーがスローされたかどうかに関係なくこのブロックが確実に実行されるため、クリーンアップ操作に最適です。


  
  
  7. ロギングサービスとの統合


実稼働アプリケーションでは、エラーをログに記録することが不可欠です。 Sentry、LogRocket、Datadog などのサービスは、フル スタック トレースでエラーをキャプチャできるため、トラブルシューティングがはるかに簡単になります。

例：



import * as Sentry from '@sentry/browser';

Sentry.init({ dsn: 'YOUR_SENTRY_DSN' });

try {
  // Your code that might throw an error
} catch (error) {
  Sentry.captureException(error);
  handleError(error);
}




この統合により、問題の可視性が向上し、アプリケーションの状態をリアルタイムで監視できるようになります。


  
  
  最終的な考え


try...catch の基本を超えてカスタム エラーを組み込むことで、より保守しやすく、読みやすく、堅牢な JavaScript コードを作成できます。これらのプラクティスを実装すると、デバッグが簡単になるだけでなく、アプリケーションの全体的な信頼性も向上します。


  
  
  次は何ですか？

• 現在のプロジェクトでカスタム エラーを試してください。
• 集中エラー ハンドラーを実装します。
• アプリにエラー ログ サービスを統合します。

プロジェクトでエラーをどのように処理しているか、または共有すべき素晴らしいヒントやコツがあれば教えてください。

この投稿は気に入りましたか? JavaScript のヒントやテクニックをもっと知りたい方は私をフォローしてください!