No Console Errors.

JavaScript errors indicate broken functionality that affects users

What does this check test?

This check verifies that no JavaScript errors are logged to the browser console during page load. Console errors indicate that JavaScript code has thrown an unhandled exception, a requested resource failed to load, a deprecated API was called incorrectly, or a browser security policy was violated. Each error represents broken functionality — a button that does not work, a component that did not render, data that was not loaded, or a feature that silently fails. Lighthouse checks for errors logged during its page load audit.

Why does it matter?

JavaScript errors in production mean broken functionality that directly impacts users. Unlike server-side errors which are typically monitored and alerted on, client-side errors often go unnoticed by development teams until users complain. Unhandled exceptions can cascade — a single error in an early-loading script can prevent subsequent scripts from executing, breaking large portions of the page. Console errors also indicate code quality issues that may cause intermittent failures, memory leaks, or performance degradation. From a performance standpoint, failed resource loads waste network requests and may leave the page in an incomplete state that triggers additional retry requests.

Who is affected?

All production websites should be free of console errors. Sites that deploy frequently, sites with many third-party scripts (which may break unexpectedly), sites supporting multiple browsers, and sites that have undergone recent refactoring are most likely to have console errors. Single-page applications where errors in one component can break the entire route are particularly impacted.

Where does this apply?

Open Chrome DevTools Console panel and filter by 'Errors' to see all JavaScript errors on the current page. Common error sources: failed network requests (404s for scripts, images, or APIs), undefined variable references, type errors from null/undefined values, CORS errors on cross-origin requests, CSP violations blocking inline scripts, and deprecated API usage. Check multiple pages and user flows, not just the homepage — errors often appear only on specific routes or after specific interactions.

How to fix it

window.addEventListener('error', (event) => {
  reportError({ message: event.message, stack: event.error?.stack });
});

window.addEventListener('unhandledrejection', (event) => {
  reportError({ message: 'Unhandled rejection', reason: event.reason });
});

class ErrorBoundary extends React.Component<Props, { hasError: boolean }> {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    logErrorToService(error, info.componentStack);
  }

  render() {
    return this.state.hasError ? <FallbackUI /> : this.props.children;
  }
}

References

• No browser errors logged to the console — Chrome Developers
• Error handling — MDN
• Sentry — Error Monitoring