Wrong type

  • When JavaScript runtime errors (including syntax errors) occur, the window raises an error event from the ErrorEvent interface and executeswindow.onerror().
  • When a resource (e.gOr processing functions. These error events do not bubble up to Windows, but (at least in Firefox) can be caught by a single Window.addeventListener (en-us).
/ / from MDN: / / https://developer.mozilla.org/zhCN/docs/Web/API/GlobalEventHandlers/onerror message error messages, the source: Error script URL, lineno: error line number // colno: error column number Function (MSG, url, lineNo, columnNo, Error) {var string = msg.tolowerCase (); var substring = "script error"; if (string.indexOf(substring) > -1){ alert('Script Error: See Browser Console for Detail'); } else { var message = [ 'Message: ' + msg, 'URL: ' + url, 'Line: ' + lineNo, 'Column: ' + columnNo, 'Error object: ' + JSON.stringify(error) ].join(' - '); alert(message); } // This function returns true, preventing the default event handler from returning false; } window.addEventListener('error', function(event) { ... }) element.onerror = function(event) {} interface Error { message: string; // Error message name: string; // Error name stack; // Provides a trace of which functions are called, in which order, from which line and file, and with what parameters. The stack string continues from the most recent call to the earlier call, returning to the original global scope call. // function@filePath:lineNumber:columnNumber }Copy the code
  • When a Promise is rejected and there is no Reject handler, the unhandledrejection event is emitted. This can happen under Windows, but it can also happen in workers. This is useful for debugging fallback error handling.
// https://developer.mozilla.org/zh-CN/docs/Web/API/Window/unhandledrejection_event
window.addEventListener("unhandledrejection", event => {
  console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
});
​
window.onunhandledrejection = event => {
  console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
};
Copy the code

  • The react error

    If either (or both) of the static getDerivedStateFromError() or componentDidCatch() lifecycle methods are defined in a class component, it becomes an error boundary.

    The error boundary is a React component that catches JavaScript errors that occur anywhere in the child component tree and prints those errors while displaying the degraded UI without rendering the child component tree that crashed. Error bounds catch errors during rendering, in lifecycle methods, and in constructors throughout the component tree

    Pay attention to

    Error bounds cannot catch errors in the following scenarios:

    • Event Handling (learn more)
    • Asynchronous code (e.gsetTimeout 或 requestAnimationFrameCallback function)
    • Server side rendering
    • Errors thrown by itself (not by its children)
// https://zh-hans.reactjs.org/docs/error-boundaries.html class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) {// Update state so that the next render can display the degraded UI return {hasError: true}; } componentDidCatch(error, ErrorInfo) {/ / you can also ask to the server error log / / here I used the self-defining sendReactCatchLog methods reported error / / the window. The Sentry. SendReactCatchLog (error, { componentStack }) logErrorToMyService(error, errorInfo); } render() {if (this.state.haserror) {// You can customize the UI and render return <h1>Something went wrong. } return this.props.children; } } <ErrorBoundary> <MyWidget /> </ErrorBoundary>Copy the code
  • Custom Error
class CustomError extends Error { constructor(foo = 'bar', ... params) { super(... params) if (Error.captureStackTrace) { Error.captureStackTrace(this, CustomError) } this.name = 'CustomError' this.foo = foo this.date = new Date() } } try { throw new CustomError('baz', 'bazMessage') } catch(e) { console.error(e.name) //CustomError console.error(e.foo) //baz console.error(e.message) / / bazMessage console. Error (e.s tack) / / stacktrace} / / here I will use the window. The Sentry. SendCustomErrorLog upload error (error)Copy the code

  • other

    When a syntax error occurs in a script loaded from a different domain, details of the syntax error are not reported to avoid disclosure (see error 363897)

    Therefore, cross – domain errors are not handled by error monitoring systems

Here is an error handling demo of various cases

Flow chart

Overall flow chart

Error monitoring script SDK logical flow

Here is the key code implementation

\