Your page logs errors to the browser console, indicating unresolved problems that may affect functionality or user experience.

What's Happening

Lighthouse scans the browser console for error-level messages during page load. These errors come from JavaScript exceptions, failed network requests, CORS issues, deprecated API usage, or security policy violations. Each error represents something broken or misconfigured.

Console errors signal problems users might experience—broken features, missing content, or degraded performance. Even if the page appears to work, these errors often indicate edge cases where things fail.

Diagnose

Chrome DevTools

1. Open DevTools (F12) and go to the Console tab
2. Refresh the page and watch for red error messages
3. Filter by "Errors" using the dropdown to hide warnings and info
4. Click error messages to see stack traces and source locations

Common Error Types

JavaScript Runtime Errors:

Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at ProductList.js:42

Failed Network Requests:

GET https://api.example.com/data 404 (Not Found)

CORS Errors:

Access to fetch at 'https://api.example.com' from origin 'https://yoursite.com'
has been blocked by CORS policy

Content Security Policy Violations:

Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self'"

Fix

1. Fix JavaScript Runtime Errors

These are bugs in your code. The stack trace points to the source.

Null/Undefined Access:

// Before - crashes if user.profile is undefined
const name = user.profile.name

// After - defensive access
const name = user?.profile?.name ?? 'Anonymous'

Array on Non-Array:

// Before - crashes if data isn't an array
const items = data.map(item => item.id)

// After - ensure array exists
const items = Array.isArray(data) ? data.map(item => item.id) : []

Missing DOM Elements:

// Before - crashes if element doesn't exist
document.getElementById('app').innerHTML = content

// After - check element exists
const app = document.getElementById('app')
if (app)
  app.innerHTML = content

2. Fix Failed Network Requests

404 and 500 errors indicate missing or broken resources.

Missing Assets:

• Check if the file exists at the expected path
• Verify the build process includes the asset
• Update references if files were renamed or moved

API Failures:

• Verify the API endpoint exists and is accessible
• Check authentication tokens haven't expired
• Handle error responses gracefully:

const response = await fetch('/api/data')
if (!response.ok) {
  console.warn(`API returned ${response.status}`)
  return fallbackData
}
return response.json()

3. Fix CORS Errors

Cross-origin requests fail without proper server configuration.

Server-Side Fix (API server):

// Express.js
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://yoursite.com')
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization')
  next()
})

add_header Access-Control-Allow-Origin "https://yoursite.com";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";

If You Don't Control the API:

• Use a backend proxy to make the request server-side
• Check if the API offers JSONP or a CORS-enabled endpoint

4. Fix Third-Party Script Errors

Errors from external scripts (analytics, widgets, ads) still count against your page.

Ad Blocker Errors: Lighthouse ignores ERR_BLOCKED_BY_CLIENT by default, but other blocking patterns might slip through.

Outdated Third-Party Scripts:

<!-- Check for newer versions -->
<script src="https://cdn.example.com/widget-v2.js"></script>

Missing Fallbacks:

// Handle missing third-party gracefully
if (typeof ThirdPartyWidget !== 'undefined') {
  ThirdPartyWidget.init()
}

5. Fix Deprecation and CSP Errors

Deprecated APIs: Update code using deprecated browser features. The console message typically suggests the replacement:

[Deprecation] SharedArrayBuffer requires cross-origin isolation.

CSP Violations: Adjust your Content Security Policy or fix the code violating it:

<!-- Instead of inline scripts -->
<script>doSomething()</script>

<!-- Use external files -->
<script src="/js/init.js"></script>

Verify the Fix

1. Clear browser cache and refresh the page
2. Check Console tab with "Errors" filter—should be empty
3. Navigate through key user flows to trigger any interaction-based errors
4. Run Lighthouse—"No browser errors logged to the console" should pass
5. Test in incognito mode to catch issues masked by extensions

Common Mistakes

• Swallowing errors silently — Wrapping everything in empty catch blocks hides problems without fixing them. Log errors to a monitoring service even if you handle them gracefully.
• Only testing locally — Production environments have different API URLs, CDN configurations, and CSP policies. Errors might only appear in production.
• Ignoring intermittent errors — Race conditions and timing issues cause errors that don't reproduce consistently. Use error monitoring tools to catch these in real user sessions.
• Fixing symptoms not causes — Adding null checks everywhere masks architectural problems. If data is frequently undefined, fix the data flow rather than patching every access point.

Related Issues

Console error issues often appear alongside:

• Deprecated APIs — Deprecated APIs often log warnings before becoming errors
• DevTools Issues — Other browser-detected problems
• HTTPS — Mixed content warnings appear in console

Test Your Entire Site

Console errors often hide on specific pages—a contact form with a broken validation script, a product page referencing missing images, or an admin section with outdated dependencies. Scan every page to find errors across your entire application.

Related

• All Best Practices Issues
• Best Practices Overview