JavaScriptでの適切なエラー処理のガイド-jsチュートリアル-php.cn

A Guide to Proper Error Handling in JavaScript

キーポイント

try…catchステートメントブロックを巧みに使用して例外を効果的に管理し、コールスタックまでエラーをバブルアップできるようにすることでデバッグプロセスを強化し、エラーをより明確に表示します。
グローバルなエラーハンドラー（window.onerrorイベントなど）を実装して、アプリケーションのさまざまな部分で管理とメンテナンスを容易にするためにエラー処理を一元化および簡素化します。
ブラウザの機能を使用して、詳細なエラー情報（コールスタックを含む）を記録してエラーの診断を改善し、エラーのソースとコンテキストをより明確に理解します。
ブロックでtry…catch>を使用するか、すべての実行コンテキストに適したグローバルエラーハンドラーを使用して、非同期エラー処理パズルを修正し、非同期コードのエラーが効果的にキャプチャおよび管理されるようにします。 setTimeout カスタムエラータイプを作成したり、エラーメッセージを強化したりして、特定の問題を識別および解決し、JavaScriptコードの全体的な堅牢性を改善することにより、エラーメッセージを強化します。
JavaScriptでのエラー処理には課題がたくさんあります。マーフィーの法則に従ってください。間違っている可能性のあるものはすべて間違っています。この記事では、JavaScriptでのエラー処理、トラップ、ベストプラクティスをカバーし、非同期コードとAjaxを例として説明します。

この記事は、読者のフィードバックに対処するために2017年6月8日に更新されました。具体的には、ファイル名がコードスニペットに追加され、単体テストがクリーニングされ、ラッパーパターンが

に追加され、CORSとサードパーティのエラーハンドラーに関するセクションが追加されました。

uglyHandler JavaScriptのイベント主導のパラダイムは、言語に豊かさを加えると思います。私は自分のブラウザをこのイベント駆動型マシンと考えるのが好きです。エラーも例外ではありません。エラーが発生すると、特定の瞬間にイベントがスローされます。理論的には、エラーはJavaScriptの単純なイベントであると言えます。

この奇妙なことを見つけたら、とても素晴らしい旅があるのでシートベルトを着用してください。この記事では、クライアント側のJavaScriptにのみ焦点を当てます。

このトピックは、「JavaScriptの優れた例外処理」で説明されている概念に基づいています。あなたがそれに慣れていないなら、私は基本を読むことをお勧めします。また、この記事では、中程度のレベルのJavaScriptの知識があることも想定しています。レベルを改善したい場合は、SitePoint Premiumにサインアップして、コースJavaScript：次をご覧ください。最初のレッスンは無料です。

どちらの場合でも、私の目標は、例外を処理する以上に必要な条件を探ることです。この記事を読んだ後、次に良い

ブロックを見るときは、行動する前によく考えます。

try...catchdemo

この記事で使用するデモプログラムは、GitHubで見つけることができます。これは次のように表示されます。

すべてのボタンは、クリックすると「爆弾」を爆発させます。この爆弾は、タイプエラーとしてスローされた例外をシミュレートします。以下は、このモジュールの定義です

// scripts/error.js

function error() {
  var foo = {};
  return foo.bar();
}

ログイン後にコピー

最初に、この関数はFooという名前の空のオブジェクトを宣言します。

はどこにも定義されていないことに注意してください。優れたユニットテストを使用して、これが爆弾を爆発させることを確認しましょう。 bar()

このユニットテストでは、テストアサーションにMochaを使用し、Assertionsにshould.jsを使用します。 Mochaはテストランナーであり、should.jsはアサーションライブラリです。慣れていない場合は、テストAPIをお気軽に調べてください。テストは

// tests/scripts/errorTest.js

it('throws a TypeError', function () {
  should.throws(error, TypeError);
});

ログイン後にコピー

で始まり、

のパス/障害で終わります。ユニットテストはノードで実行され、ブラウザは必要ありません。純粋なJavaScriptを使用して重要な概念を証明するため、これらのテストに注意を払うことをお勧めします。 it('description') should

リポジトリをクローン化して依存関係をインストールした後、

を使用してテストを実行できます。または、このようなこの単一のテストを実行することもできます：
。 npm t ./node_modules/mocha/bin/mocha tests/scripts/errorTest.js 示されているように、は空のオブジェクトを定義し、メソッドにアクセスしようとします。オブジェクトには
は存在しないため、例外がスローされます。 JavaScriptのような動的言語については、これは誰にでも起こります！

error()ハンドリングが悪い< bar()次にいくつかの悪いエラー処理があります。実装からボタンのハンドラーを抽出しました。ハンドラーがどのように見えるかは次のとおりです

このハンドラーは、パラメーターとしてAコールバックを受信します。このコールバックは、ハンドラー関数内で呼び出されます。ユニットテストは、それが何のためのものかを示しています：

ご覧のとおり、何かがうまくいかない場合、この悪いエラーハンドラーは

に戻ります。コールバック

は、法的方法または爆弾を指すことができます。

// scripts/badHandler.js

function badHandler(fn) {
  try {
    return fn();
  } catch (e) { }
  return null;
}

ログイン後にコピー

次のクリックイベントハンドラーは、ストーリーの残りの部分を説明しています：fn

// tests/scripts/badHandlerTest.js

it('returns a value without errors', function() {
  var fn = function() {
    return 1;
  };

  var result = badHandler(fn);

  result.should.equal(1);
});

it('returns a null with errors', function() {
  var fn = function() {
    throw new Error('random error');
  };

  var result = badHandler(fn);

  should(result).equal(null);
});

ログイン後にコピー

おっと、1つだけ

を取得します。これは、何がうまくいかなかったかを理解しようとしたとき、私は何も無視しませんでした。このサイレント障害戦略は、ユーザーエクスペリエンスの不良からデータの破損にまで及びます。症状のデバッグに何時間も費やしてnullブロックを無視するかもしれないことはイライラします。この邪悪なハンドラーは、コードのエラーを飲み込み、すべてが問題ないふりをします。これは、コードの品質を評価していない組織では受け入れられる可能性があります。ただし、エラーを隠すと、将来何時間もデバッグすることができます。ディープコールスタックを備えたマルチレイヤーソリューションでは、エラーがどこに向かっているのかを知ることは不可能です。エラー処理に関する限り、これは非常に悪いことです。 fn()

サイレント障害戦略により、より良いエラー処理を望みます。 JavaScriptは、例外を処理するためのよりエレガントな方法を提供します。

// scripts/badHandlerDom.js

(function (handler, bomb) {
  var badButton = document.getElementById('bad');

  if (badButton) {
    badButton.addEventListener('click', function () {
      handler(bomb);
      console.log('Imagine, getting promoted for hiding mistakes');
    });
  }
}(badHandler, error));

ログイン後にコピー

（以下のコンテンツは、記事を簡潔に保ち、複製を避けるために言語と表現が微妙に調整されていることを除いて、以前の出力に似ています。）

null

...（残りは以前の出力に似ていますが、言語と表現は記事を簡潔に保ち、複製を避けるために微妙に調整されています。）...

以上がJavaScriptでの適切なエラー処理のガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。