{"id":10245,"date":"2026-09-01T09:02:52","date_gmt":"2026-09-01T08:02:52","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=10245"},"modified":"2026-09-01T09:02:53","modified_gmt":"2026-09-01T08:02:53","slug":"react-error-boundary","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/react-error-boundary\/","title":{"rendered":"React Error Boundary"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">With a fallback with <a href=\"https:\/\/ant.design\">https:\/\/ant.design<\/a> components<\/p>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"tsx\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">import {\n    Component,\n    type ErrorInfo,\n    type ReactNode,\n    useState,\n} from \"react\";\n\nimport { Alert, Button, Collapse, Space, Typography } from \"antd\";\n\nconst { Text, Paragraph } = Typography;\n\ninterface ErrorBoundaryProps {\n    children: ReactNode;\n}\n\ninterface ErrorBoundaryState {\n    hasError: boolean;\n    error: Error | null;\n    errorInfo: ErrorInfo | null;\n}\n\ninterface ErrorBoundaryFallbackProps {\n    error: Error | null;\n    errorInfo: ErrorInfo | null;\n}\n\nfunction ErrorBoundaryFallback({\n    error,\n    errorInfo,\n}: ErrorBoundaryFallbackProps) {\n    const [showDetails, setShowDetails] = useState(false);\n\n    const errorMessage =\n        error?.message || \"Er is een onbekende fout opgetreden.\";\n\n    const errorStack =\n        error?.stack || \"Geen stack trace beschikbaar.\";\n\n    const componentStack =\n        errorInfo?.componentStack || \"Geen component stack beschikbaar.\";\n\n    return (\n        &lt;div style={{ padding: 16 }}>\n            &lt;Alert\n                title=\"Er is een fout opgetreden\"\n                showIcon\n                description={errorMessage}\n                type=\"error\"\n                action={\n                    &lt;Button\n                        size=\"small\"\n                        danger\n                        onClick={() => setShowDetails((value) => !value)}\n                    >\n                        {showDetails ? \"Verberg details\" : \"Detail\"}\n                    &lt;\/Button>\n                }\n            \/>\n\n            {showDetails &amp;&amp; (\n                &lt;Collapse\n                    style={{ marginTop: 16 }}\n                    items={[\n                        {\n                            key: \"error\",\n                            label: \"Error details\",\n                            children: (\n                                &lt;Space\n                                    size=\"middle\"\n                                    style={{ width: \"100%\" }}\n                                >\n                                    &lt;div>\n                                        &lt;Text strong>Message&lt;\/Text>\n                                        &lt;Paragraph\n                                            copyable\n                                            style={{ marginBottom: 0 }}\n                                        >\n                                            {errorMessage}\n                                        &lt;\/Paragraph>\n                                    &lt;\/div>\n\n                                    &lt;div>\n                                        &lt;Text strong>Stack trace&lt;\/Text>\n                                        &lt;Paragraph\n                                            copyable\n                                            style={{\n                                                whiteSpace: \"pre-wrap\",\n                                                marginBottom: 0,\n                                            }}\n                                        >\n                                            {errorStack}\n                                        &lt;\/Paragraph>\n                                    &lt;\/div>\n\n                                    &lt;div>\n                                        &lt;Text strong>Component stack&lt;\/Text>\n                                        &lt;Paragraph\n                                            copyable\n                                            style={{\n                                                whiteSpace: \"pre-wrap\",\n                                                marginBottom: 0,\n                                            }}\n                                        >\n                                            {componentStack}\n                                        &lt;\/Paragraph>\n                                    &lt;\/div>\n                                &lt;\/Space>\n                            ),\n                        },\n                    ]}\n                \/>\n            )}\n        &lt;\/div>\n    );\n}\n\nclass ErrorBoundaryClass extends Component&lt;\n    ErrorBoundaryProps,\n    ErrorBoundaryState\n> {\n    state: ErrorBoundaryState = {\n        hasError: false,\n        error: null,\n        errorInfo: null,\n    };\n\n    static getDerivedStateFromError(error: Error): Partial&lt;ErrorBoundaryState> {\n        return {\n            hasError: true,\n            error,\n        };\n    }\n\n    componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n        console.error(\"ErrorBoundary:\", error);\n        console.error(\"ErrorInfo:\", errorInfo);\n\n        this.setState({\n            error,\n            errorInfo,\n        });\n    }\n\n    render() {\n        if (this.state.hasError) {\n            return (\n                &lt;ErrorBoundaryFallback\n                    error={this.state.error}\n                    errorInfo={this.state.errorInfo}\n                \/>\n            );\n        }\n\n        return this.props.children;\n    }\n}\n\n\/**\n * Functionele wrapper zodat je deze component\n * gewoon als JSX component kunt gebruiken.\n *\/\nexport function ErrorBoundary({\n    children,\n}: ErrorBoundaryProps) {\n    return (\n        &lt;ErrorBoundaryClass>\n            {children}\n        &lt;\/ErrorBoundaryClass>\n    );\n}\n\nexport default ErrorBoundary;<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>With a fallback with https:\/\/ant.design components<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10245","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/10245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=10245"}],"version-history":[{"count":1,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/10245\/revisions"}],"predecessor-version":[{"id":10246,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/10245\/revisions\/10246"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=10245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=10245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=10245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}