Console Error & Network Diagnostics Engine

Console Error & Network Failure Detector: JavaScript & Site Reliability Auditor

An enterprise-grade, high-throughput JavaScript Console Error, Uncaught Exception, Chrome DevTools Protocol (CDP) Security Issue & Network Failure Auditor for BrowserMesh.

Automatically crawls and audits client-side JavaScript execution, catches silent unhandled runtime exceptions (TypeError, ReferenceError, syntax errors), attributes logs across Web Worker threads and the main window, intercepts Chrome DevTools Protocol (CDP) Content Security Policy (CSP Level 3) & Trusted Types violations, detects Opaque Response Blocking (ORB v0.2) & Private Network Access (PNA) blocks, audits mixed content (W3C Level 2 active and passive HTTP subresources), monitors subresource HTTP 4xx/5xx status codes, and flags Chromium connection failures (net::ERR_*) across single webpage URLs or entire auto-expanded XML sitemaps.

The ultimate automated QA and technical SEO alternative to manual Chrome DevTools inspection, expensive Application Performance Monitoring (APM) agents (Datadog RUM, Sentry, LogRocket), and brittle Cypress/Selenium test suites.

🎯 Target Audience & Industry Solutions

• Technical SEO Directors & Web Consultants: Discover JavaScript errors and broken API calls that halt Googlebot's Web Rendering Service (WRS), preventing dynamic content, structured data JSON-LD, and internal links from being indexed within Google's rendering queue.
• Frontend Engineers & QA Teams: Uncover silent runtime crashes, unhandled Promise rejections, and broken bundle chunks before users encounter broken checkout buttons, non-interactive modals, or blank white screens ("White Screen of Death").
• E-Commerce & Digital Marketing Managers: Prevent lost revenue caused by third-party tracking scripts, broken marketing pixels, unhandled form validation bugs, and broken payment gateway iframes.
• Security & Compliance Engineers: Audit Content Security Policy (CSP Level 3) enforcement, W3C Trusted Types DOM sink violations, and mixed content (insecure HTTP scripts, images, or <form action> endpoints on HTTPS origins).
• Site Reliability Engineers (SRE) & DevOps: Automate pre-deployment and staging environment health audits using headless Chromium without injecting heavy tracking SDKs into client-side production bundles.

🔍 Why JavaScript Errors & Network Failures Destroy SEO & Conversions

In modern web architecture (Next.js, Nuxt, React 19, Vue, Angular, SvelteKit), client-side execution directly controls organic search rankings and conversion funnels:

1. Googlebot WRS Rendering Budget: Google renders client-side JavaScript with a limited resource budget. If an uncaught script error throws during hydration, script execution halts instantly. Subsequent DOM mutations and critical internal links never render, causing search engines to index a blank or truncated page.
2. Cumulative Layout Shift (CLS) & Core Web Vitals: Missing width and height dimensions on lazy-loaded images trigger massive layout shifts, degrading Google PageSpeed Insights and Core Web Vitals scores.
3. Broken Subresource Dependencies: Broken 404 fonts, stylesheet chunks, or API endpoints result in degraded typography, flash of unstyled content (FOUC), and failed interactive components.
4. Silent Checkout & Lead Form Abandonment: When a form's JavaScript listener throws a silent runtime error, the submit button fails without providing user feedback, leading to silent conversion drops.

🚀 Key Features

1. Quad-Tier Browser Telemetry Engine

• Tier 1 — Playwright Lifecycle Listeners:
  • page.on('console'): Captures console.error, console.warn, console.info, and console.debug. Uses msg.worker() to accurately attribute logs to background Web Workers or the main execution thread.
  • page.on('pageerror'): Intercepts unhandled JavaScript runtime exceptions that crash execution threads (which Chromium bypasses in standard console streams).
  • page.on('response'): Evaluates subresource HTTP statuses (4xx/5xx) and tracks same-domain payload transfer sizes.
  • page.on('requestfailed'): Intercepts Chromium network-layer failures (net::ERR_*).
• Tier 2 — BrowserContext Web Errors:
  • context.on('weberror'): Catches context-wide unhandled errors across background iframes, ad frames, and crashed worker threads.
• Tier 3 — Chrome DevTools Protocol (CDP) Domains:
  • Audits.enable & Audits.issueAdded: Intercepts ContentSecurityPolicyIssue, GenericIssue (form input autocomplete violations), DeprecationIssue, MixedContentIssue, and Trusted Types policy violations.
  • Log.enable & Log.entryAdded: Captures low-level browser engine interventions, security warnings, unused preload notices, and deprecation notices.
• Tier 4 — Client-Side DOM & Navigation Timing:
  • Injected evaluation detects insecure DOM declarations (<script src="http://...">, <form action="http://...">).
  • Audits form inputs missing autocomplete attributes and lazy-loaded images missing explicit width/height dimensions (CLS layout shift prevention).
  • Detects unused <link rel="preload"> assets not consumed above the fold.
  • Extracts high-precision timings via W3C Navigation Timing API (performance.getEntriesByType('navigation')).

2. Chromium net::ERR_* & Security Taxonomy

• net::ERR_BLOCKED_BY_ORB: Flags Opaque Response Blocking (ORB v0.2) when cross-origin resources lack appropriate CORS headers or carry mismatched MIME types.
• net::ERR_BLOCKED_BY_PRIVATE_NETWORK_ACCESS_CHECKS: Intercepts Private Network Access (PNA) preflight failures.
• net::ERR_NAME_NOT_RESOLVED / net::ERR_CONNECTION_REFUSED: Flags DNS resolution failures and unreachable host servers.
• net::ERR_CERT_* / net::ERR_SSL_VERSION_OR_CIPHER_MISMATCH: Detects expired, misconfigured, or untrusted SSL/TLS certificates.
• net::ERR_QUIC_PROTOCOL_ERROR / net::ERR_HTTP2_PROTOCOL_ERROR: Detects HTTP/3 or HTTP/2 transport corruption.
• Defensive Filtering: Harmless net::ERR_ABORTED on canceled non-critical images/fonts is filtered out to eliminate false alarms.

3. Mixed Content & Insecure Form Inspection

• Active Mixed Content (Blockable): Insecure HTTP scripts, styles, iframes, fonts, or fetch calls on an HTTPS page (automatically blocked by modern browsers). Severity: Critical (-15 pts).
• Passive Mixed Content (Optionally Blockable): Insecure HTTP images, audio, or video that drop the secure padlock icon. Severity: Warning (-5 pts).
• Insecure Form Actions: <form action="http://..."> submitting user data over cleartext HTTP. Severity: Warning (-10 pts).

4. React 19 & Modern SSR Hydration Mismatch Triage

Accurately detects React 19 and Next.js 15+ Server Component hydration mismatch diff warnings, differentiating them from fatal unhandled component crashes.

5. Synthetic User Interaction & Cookie Consent

• TCF v2.2 & Google Consent Mode v2 Auto-Dismissal: Triggers vendor APIs (OneTrust.AllowAll(), UC_UI.acceptAllConsents(), Cookiebot.submitCustomConsent(), dataLayer.push()) and clicks consent buttons to test unblocked scripts.
• Smooth Lazy-Load Scrolling: Incrementally scrolls down the page in steps, triggering IntersectionObserver handlers and lazy-loaded scripts before returning to top.

6. Calibrated 0–100 Health Scoring Engine

Starts at 100 points, subtracts weighted deductions, enforces Category Safety Caps, applies Severity Ceiling Caps, and assigns a letter grade:

• A (90–100): Pristine health, zero critical errors, zero broken assets.
• B (75–89): Good health, minor warnings or isolated non-critical asset 404s.
• C (60–74): Fair health, deprecation notices, moderate console errors, passive mixed content.
• D (45–59): Poor health, uncaught runtime exceptions, broken scripts, active mixed content.
• E (30–44): Very poor health, multiple fatal runtime crashes, broken server endpoints.
• F (0–29): Failing, complete page execution failure.

7. Dual Input Modality & Automatic XML Sitemap Crawling

• Direct URLs: Supply individual webpage URLs or comma-separated lists.
• XML Sitemap Crawling: Supply any standard XML sitemap URL (https://example.com/sitemap.xml) or gzipped sitemap (.xml.gz) to recursively unpack child sitemaps and audit catalog pages with concurrency.
• Automatic Fallback Engine: If a sitemap returns HTTP 404, the plugin automatically probes alternative paths (/sitemap_index.xml, /wp-sitemap.xml) or falls back to crawling homepage internal links.
• Smart Slot Reservation: Automatically reserves the final result slot for the consolidated [Site Audit Summary] rollup record so users never have to guess offset limits.

📊 Comparison with Alternatives

📋 25-Field Output Contract

Every yielded record strictly adheres to these 25 structured fields:

⚙️ Configuration Parameters (schema.ts)

💻 Example Result Record

{
  "url": "https://www.browsermesh.in/",
  "domain": "www.browsermesh.in",
  "statusCode": 200,
  "status": "clean",
  "healthScore": 100,
  "grade": "A",
  "totalErrors": 0,
  "totalWarnings": 0,
  "consoleErrors": [],
  "consoleWarnings": [],
  "uncaughtExceptions": [],
  "failedRequests": [],
  "httpErrorResponses": [],
  "cspViolations": [],
  "mixedContentIssues": [],
  "corsErrors": [],
  "pageSizeBytes": 1420500,
  "requestCount": 42,
  "loadTimeMs": 950,
  "domContentLoadedMs": 420,
  "requestsSummary": {
    "total": 42,
    "successful": 42,
    "failed": 0,
    "totalTransferBytes": 1420500,
    "slowRequestCount": 0,
    "byType": {
      "document": 1,
      "script": 18,
      "stylesheet": 6,
      "image": 12,
      "font": 5
    },
    "byStatus": {
      "200": 42
    }
  },
  "slowRequests": [],
  "networkRequests": [],
  "audit": {
    "score": 100,
    "grade": "A",
    "status": "clean",
    "summary": {
      "totalErrors": 0,
      "totalWarnings": 0,
      "uncaughtExceptions": 0,
      "failedRequests": 0,
      "http5xxErrors": 0,
      "http404Errors": 0,
      "cspViolations": 0,
      "mixedContentIssues": 0,
      "orbBlockedResources": 0,
      "corsErrors": 0
    },
    "deductions": [],
    "recommendations": [
      "All client scripts and network resources executed cleanly with zero errors."
    ]
  },
  "error": null
}

❓ Frequently Asked Questions (FAQ)

Why do JavaScript console errors hurt Googlebot indexing and SEO?

Googlebot uses the Web Rendering Service (WRS) based on Chromium. Because rendering JavaScript requires substantial computing resources, Google allocates a finite rendering budget per URL. If an uncaught JavaScript error throws during initial hydration, script execution halts. Critical elements—such as client-rendered text, internal navigation links, image galleries, and JSON-LD schema markup—are never injected into the DOM, causing Google to index an incomplete or blank page.

How is BrowserMesh different from Sentry or LogRocket?

Sentry and LogRocket are Application Performance Monitoring (APM) tools that require installing an SDK directly into your production application code. They only capture errors when real users trigger them. BrowserMesh is an external synthetic auditor powered by headless Chromium: it requires zero code changes or SDKs, audits staging or production sites proactively, unpacks entire XML sitemaps automatically, and runs synthetic user flows before customers experience bugs.

What is net::ERR_BLOCKED_BY_ORB and how do I resolve it?

Opaque Response Blocking (ORB) is Chromium's modern security standard that supersedes CORB. It prevents cross-origin data leaks by blocking cross-origin read requests (such as images, scripts, or API fetches) that lack proper Access-Control-Allow-Origin headers or serve mismatched MIME types (e.g., serving HTML with an image/png header). BrowserMesh detects ORB blocks and provides actionable remediation steps in the audit recommendations.

Does this detector catch React 19 and Next.js SSR hydration mismatches?

Yes. BrowserMesh monitors Chrome DevTools Protocol console events for React 18/19 and Next.js 14/15 hydration diff notices (Hydration failed because the server-rendered HTML didn't match the client). It classifies these as diagnostic warnings rather than fatal crashes, allowing frontend teams to maintain clean SSR hydration.