{
    "slug": "js_error_boundaries",
    "term": "Global Error Handling in JavaScript",
    "category": "javascript",
    "difficulty": "intermediate",
    "short": "window.onerror and unhandledrejection catch uncaught errors globally — essential for logging client-side errors back to PHP for monitoring.",
    "long": "window.onerror catches synchronous errors. window.addEventListener('unhandledrejection') catches unhandled Promise rejections. Both should log to your PHP error tracking endpoint. Error.cause (ES2022) chains errors. window.reportError() programmatically triggers error handlers. In React: ErrorBoundary components catch render errors. Always include: message, stack, URL, line, user context, and PHP session ID for correlation. Never expose internal paths in production error messages.",
    "aliases": [
        "window.onerror",
        "unhandledrejection",
        "global error handler",
        "error boundary"
    ],
    "tags": [
        "javascript",
        "error-handling",
        "php-integration"
    ],
    "misconception": "console.error() is sufficient for production error tracking — console.error logs to the browser DevTools only; real monitoring requires sending errors to your PHP backend or a service like Sentry.",
    "why_it_matters": "Client-side errors are invisible to PHP logs — without global error handlers you are blind to JavaScript failures affecting real users.",
    "common_mistakes": [
        "Only using try/catch locally — missing unhandled Promise rejections",
        "Not correlating JS errors with PHP session ID or request ID",
        "Sending error reports on every error — should rate-limit and batch"
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "js_error_types",
        "js_promises",
        "error_tracking",
        "structured_logging"
    ],
    "prerequisites": [
        "js_promises",
        "js_error_types"
    ],
    "refs": [
        "https://developer.mozilla.org/en-US/docs/Web/API/Window/error_event"
    ],
    "bad_code": "// Only catches sync errors, misses promise rejections:\nwindow.onerror = (msg) => console.error(msg);",
    "good_code": "// Comprehensive global handler reporting to PHP:\nfunction reportError(error, context = {}) {\n    navigator.sendBeacon('/api/errors', JSON.stringify({\n        message: error.message,\n        stack:   error.stack,\n        url:     location.href,\n        context: { ...context, sessionId: window.__phpSessionId },\n    }));\n}\n\nwindow.onerror = (msg, src, line, col, err) => {\n    reportError(err ?? new Error(msg), { src, line, col });\n};\n\nwindow.addEventListener('unhandledrejection', (e) => {\n    reportError(e.reason instanceof Error ? e.reason : new Error(e.reason));\n});",
    "quick_fix": "Add both window.onerror and window.addEventListener('unhandledrejection') handlers that POST errors to a PHP endpoint or Sentry",
    "severity": "high",
    "effort": "medium",
    "created": "2026-03-17",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/js_error_boundaries",
        "html_url": "https://codeclaritylab.com/glossary/js_error_boundaries",
        "json_url": "https://codeclaritylab.com/glossary/js_error_boundaries.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Global Error Handling in JavaScript](https://codeclaritylab.com/glossary/js_error_boundaries) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/js_error_boundaries"
            }
        }
    }
}