Vue コンポーネントエラーの統合監視

一、window.onerror

  • すべての JS エラー レポートをグローバルに監視する
  • ただし、JS レベルであり、Vue コンポーネントの情報を認識できません。
  • Vue がリッスンできないいくつかのエラーをキャプチャします

ここに画像の説明を挿入します

ここに画像の説明を挿入します
このように書くこともできます
ここに画像の説明を挿入します

window.onerror
ただし、エラーが try...catch... を使用してキャプチャされた場合、window.onerror ではキャプチャできません。
ここに画像の説明を挿入します

2. errorCaptured ライフサイクル

  • すべての下位コンポーネントのエラーをリッスンする
  • false を返すと上向きの伝播が防止されます
    ここに画像の説明を挿入します
    。window.onerror も監視されます (上向きの伝播があります)
    ここに画像の説明を挿入します
    false を返すと上向きの伝播が防止されます: (キャプチャの繰り返しを防止します)
    ここに画像の説明を挿入します
    ここに画像の説明を挿入します

3.errorHandlerの設定

  • Vue のグローバル エラー監視。すべてのコンポーネント エラーがここに要約されます。
  • ただし、errorCaptured は false を返すため、ここには伝播されません。

ここに画像の説明を挿入します
ここに画像の説明を挿入します
false を返すことはなく、window.onerror は実行されません。errorHandler はすでにグローバル モニターです
。window.onerror と errorHandler は相互に排他的です。

非同期エラー

  • 非同期コールバックのエラーは errorHandler では監視できません
  • window.onerror を使用する必要があります

ここに画像の説明を挿入します
ここに画像の説明を挿入します
window.onerror のみがエラーを監視します

要約する

  • errorCaptured は下位コンポーネントのエラーを監視し、上方への伝播を防ぐために false を返します。
  • errorHandler はグローバル Vue コンポーネントのエラーをリッスンします
  • window.onerror は、非同期などの他の JS エラーを監視します。
    ここに画像の説明を挿入します

おすすめ

転載: blog.csdn.net/weixin_44582045/article/details/133206006