Unified monitoring of Vue component errors

1.window.onerror

  • Globally monitor all JS error reports
  • But it is at the JS level and cannot recognize Vue component information.
  • Capture some errors that Vue cannot listen to

Insert image description here

Insert image description here
You can also write it like this
Insert image description here

window.onerror
However, if the error is captured using try...catch..., it cannot be captured by window.onerror.
Insert image description here

2. errorCaptured life cycle

  • Listen for errors in all subordinate components
  • Returning false will prevent upward propagation
    Insert image description here
    . window.onerror is also monitored (there is upward propagation)
    Insert image description here
    return false to prevent upward propagation: (prevent repeated capture)
    Insert image description here
    Insert image description here

3. errorHandler configuration

  • Vue global error monitoring, all component errors will be summarized here
  • But errorCaptured returns false and will not be propagated here.

Insert image description here
Insert image description here
There is no return false, and window.onerror is not executed. errorHandler is already a global monitor
. window.onerror and errorHandler are mutually exclusive.

async error

  • Errors in asynchronous callbacks cannot be monitored by errorHandler
  • Need to use window.onerror

Insert image description here
Insert image description here
Only window.onerror monitors the error

Summarize

  • errorCaptured monitors the errors of subordinate components and returns false to prevent upward propagation.
  • errorHandler listens for errors in global Vue components
  • window.onerror monitors other JS errors, such as asynchronous
    Insert image description here

Guess you like

Origin blog.csdn.net/weixin_44582045/article/details/133206006