Common Front-End Error Types and Their Capture Methods

As front‑end pages carry more functions, browsers become complex, making it impossible to guarantee error‑free releases even with thorough testing. Therefore front‑end monitoring is essential.

Monitoring typically includes performance, error, and user behavior reporting. This article focuses on error monitoring, describing common error types and how to capture and report them.

Common error categories

1. JavaScript runtime errors – caused by undefined variables, compatibility issues, etc. Example screenshot (omitted).

2. Resource loading errors – failures when loading JS, CSS, images, often via CDN.

3. Unhandled promise rejections – promises rejected without a catch.

4. Asynchronous request errors – errors from fetch or XMLHttpRequest (XHR).

Capture methods

1. window.onerror and window.addEventListener('error') for runtime errors.

window.onerror = function (msg, url, lineNo, columnNo, error) {
    // handle error information
};
// demo
msg: Uncaught TypeError: ReferenceError: a is not defined
error.stack: TypeError: ReferenceError: a is not defined at http://xxxx.js:1:13
window.addEventListener('error', event => {
    // handle error information
}, false); // false = bubble phase, true = capture phase

2. Resource loading errors – listen to the error event on elements like , 2) If CORS headers cannot be added, wrap code in try…catch and manually report the caught exception. Summary: The article covers the main error scenarios needed for front‑end monitoring and provides practical capture implementations. Frameworks like Vue or React require additional handling, and cross‑origin script errors may need CORS configuration or fallback try‑catch reporting.