JavaScriptスタックトレースを恐れないでください

この投稿を読み終えた直後に、新しいプロジェクトの作業を開始します。 それは風変わりなことではありません-あなたが行った前のプロジェクトからそれほど遠くない何か。

プロジェクトベースを準備してから（実際のプロジェクトを開始できるように）20分ほど経つと、エラーが発生します。 それほど悪くはないように見えますが、Googleで1時間検索し、問題を解決するために10の変更を加えると、現実に戻ります。 収益に影響を与えないコードにかなりの時間を費やしただけです。 プロジェクトの報酬が支払われていなくても、敗北したと感じます。

問題を解決する他の方法に飛び込む前に、一歩下がって、心を清め、水を飲んでから、次の点を考慮してください。

• 学ぶのは時間の無駄ではありません-問題を無意識に攻撃するのは無駄です。
• 最初からやり直す価値はありますか？
• おそらく、フレームワークなどの別のセットアップを試して、セットアップエラーの可能性を軽減することができます（これは、偽の現実の問題が発生しているためです）。 これにより、問題がフレームワークの他のユーザーに共通する可能性も高くなります。
• 他の人の洞察を求めます。 正直な質問は弱さの兆候ではありません-実際、それはチームの調和を高めることができます。

ここで、上記のオプションを実行したと仮定します。 前進してこの問題を修正するのが最善だと思います。どのような戦略をとることができますか？ 原因を特定するためにスタックトレースを調べるという、1つの特定の戦略に焦点を当てます。 根本的な原因を見つけることは、戦いのほとんどです。 [この短いリストは私自身の経験に基づいており、包括的ではないことに注意してください。 そうは言っても、新しい戦術を試すために心を開いてみてください。 😄]

1. 問題が発生した場合は、コードを（少なくともローカルGitに）コミットします。 このコードは完全に機能する状態ではないかもしれませんが、最終的に発生する可能性のある混乱よりも優れています。 途中で小さなコミットを行うと、試したことを追跡するのに役立ちます。
2. タイマーを設定します（ポモドーロスタイルまたは通常のタイマー）。 30分以内をお勧めします。 これは、その時間枠で解決策が必要であることを意味するわけではありませんが、少し休憩して再評価することができます。
3. どこを見ればよいかをよく考えてください（プラットフォームによって異なります）。
4. キーワードと詳細を選ぶ方法を知っています。
5. それを調べる方法を理解してください。

上記の最後の3つのポイントについて詳しく説明します。

どこを見れば

いくつかの異なる状況と、スタックトレースが表示される可能性がある場所を次に示します。

• ノード（バックエンド）->ターミナルコンソール
• React / Vue / vanilla JS（フロントエンド）->ブラウザコンソール

スタックトレースはありません。 私は何をしますか？

場合によっては、トレースが表示されません。 何故ですか？ これは通常、論理エラーがあり（思ったとおりに機能しない）、コード自体が正常であるためです。 問題の原因を突き止めるために、問題があると思われる場所の前後にコンソールに情報を記録することができます。

何を探すべきか

スタックトレースは、皿のスタックのように考えてください。 彼らが積み重なって倒れ始めたとき、あなたは最後のカップルのプレートが犯人であることを知っています。 同様に、最新のアクション（問題が存在する可能性が高い）はスタックトレースの最上位にあります。

このトレースに表示される行がすべてエラーで構成されているわけではないことに注意することも重要です。 これは、プログラム/スクリプトがその時点までに上がった場所の履歴であり、実際の問題を特定するための優れたツールになっています。

エラー/例外メッセージ

問題がパッケージに関係している場合、作成者は役立つメッセージやヒントを提供している可能性があります。 言語レベルの例外でさえ、通常はヒントがあります。 これは、開始するのに最適な場所です。

ファイル名

通常、問題は他のパッケージではなく独自のソースコードにあるため（少なくともそれが一般的なルールです）、ベースディレクトリを持つファイルを探します。 ファイルが最近変更したファイルである場合は、そこで確認することをお勧めします。

行番号

あなたは運がいいです。 ファイル名が表示されるだけでなく、トレースには行番号と、場合によっては列番号が含まれます。 このコラムはあまり役に立たない傾向がありますが、ちょっと-それらをそこに入れることに決めた人に感謝します！

例外タイプ

スローされた例外の名前から、確実な手がかりが得られる場合があります。 しかし、それが何を意味するのか正確にはわからないでしょう。 次のセクションから収集した洞察を使用して、これらに基づいて検索します。

この問題が頻繁に発生する場合は、言語またはフレームワークのより一般的な例外のいくつかを覚えておくことを検討してください。

どれくらい深く行きますか？

一部のトレースは非常に長いです。 まるで小説のように全部読まなければならない場合、まぶたが重くなる可能性があります。 では、それは役立つものから時間の無駄へとどこに移行するのでしょうか。

私の経験では、トレースの最初の5つの項目で必要な手がかりを見つけることができます。 注意深く調べても何も見つからない場合は、ぜひ続けてください。

偽のエラーを作成して、これらの手がかりのいくつかが有効になっていることを確認しましょう。 このクライアント側またはサーバー側を実行できます。

firstFunction = () => {
  secondFunction();
}

secondFunction = () => {
  thirdFunction();
}
thirdFunction = () => {
  notDefined();
}

これにより、次のものが生成されます。

何を調べるか

エラーにメッセージが表示された場合は、これが検索に最適な場合があります。

Google検索のヒント

• 引用符を使用して、正確なフレーズを検索します。
• 不明な単語やフレーズを指定するには、これらの引用符の中にアスタリスクを付けます。
• マイナス記号を使用して、単語を含む結果を削除することを示します。
• チュートリアルを探している場合は、最初に「ハウツー」というフレーズを述べてください（Googleはそのように賢くなります）。

スタックオーバーフロー検索のヒント

• タグを角かっこで囲んでクエリに追加します：[vue] trigger an event。
• 通常、緑色の「回答」ボックスが点灯している結果を探します。 これは、正解として受け入れられたことを意味します。
• 正しいとマークされたもの以外の他の答えを見てください。 彼らはより現代的またはきれい、あるいは単にあなたのスタイルかもしれません。

有望と思われるすべての検索結果を右クリックして、新しいタブで開きます。 フローを高速化するには、リンクをクリックするときにプラットフォームのショートカットキー（WindowsではCtrl、MacではCmd）を使用します。

問題は解決しました-それともそれですか？

問題が発生し、検索を行い、回答が記載されたStack Overflowの投稿を見つけて、すでに賛成していることを確認するのは何回ですか？ 😆これを回避するには、ソリューションの問題を文書化し、さらに重要なことに、次の2つのことの少なくとも1つを実行する必要があります。

1. 新しいテストを作成します。
2. エラー処理を記述します。 エラーをキャッチして、カスタムメッセージで独自のエラーを吐き出すこともできます。

if (valueIsNotCorrect) throw new Error(`D'oh, you did it again! Fix me by ...`);

---

最後に、TwitterのJordanHallからの大笑いです。

window.onerror = error => {
  // redirect to SO with error as query
  window.location.href = `https://stackoverflow.com/search?q=[js]${error.message}`;
}