How to self-develop front-end monitoring platform

Posted Jun 16, 20202 min read

For a large project, the collection of all information is extremely important, not just the collection of error information, exposure collection, behavior collection, and action collection are very useful data... here is not much to elaborate, only to say monitoring!

For the back-end, there are various services and logs to escort, no need to build wheels so hard

The front end also has various monitoring platform wheels sentry, zabbix, etc. The following mainly describes how to make a monitoring platform wheel. The whole process can be divided into 3 parts

Error information collection-"Data analysis and processing-"Statistics display(notification)

Error information collection

The most important step is the collection of error information, how to collect effective error information, and notify the service, the following specifically describes how to collect errors

Front-end error type

  1. SyntaxError,

    Grammatical errors, often occurring parenthesis mismatch,

  2. Uncaught ReferenceError

    Example console.log(c) is not defined, it will report this kind of error

  3. RangeError

    Number out of range, stack overflow

  4. TypeError

    Wrong type:number is a number directly new object number is an undefined operation attribute will report an error

  5. URIError

    Mainly the parameters of related functions are incorrect, for example

  1. EvalError eval()

    When the eval function is not executed correctly

Conventional method of catching exceptions

  1. try/catch, but explain more conventional methods

  2. window.addEventListener("unhandledrejection")

    The reject parameter PromiseRejectionEvent to capture the promise object

  3. window.onerror can also use addEventListener parameter

    event:string | Event event object e
    source?:string Event source file
    lineno?:number, which line gives an error
    colno?:number, which column

  1. vue and react also have their own functions for handling errors

vue has global configuration
The current component has a hook function errorCaptured

react can be passed directly in the parent component
componentDidCatch to listen
static getDerivedStateFromError to handle errorUI fallback~