{"id":782,"date":"2026-05-18T23:02:16","date_gmt":"2026-05-18T15:02:16","guid":{"rendered":"https:\/\/junai.ai\/blog\/react-error-boundary-18\/"},"modified":"2026-05-19T20:26:26","modified_gmt":"2026-05-19T12:26:26","slug":"react-error-boundary-18","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/react-error-boundary-18\/","title":{"rendered":"React Error Boundary (Ch.18)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 756 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n:root {--color-primary:#0891b2;--color-accent:#06b6d4;--color-bg:#f8fafc;--color-bg-card:#fff;--color-text:#0f172a;--color-text-muted:#64748b;--hero-start:#0f172a;--hero-end:#0891b2;}\n*{box-sizing:border-box;}\n.container{max-width:760px;margin:0 auto;padding:0 24px 80px;}\n.hero{background:linear-gradient(135deg,var(--hero-start) 0%,var(--hero-end) 100%);color:#fff;padding:80px 24px 60px;text-align:center;}\n.hero .eyebrow{display:inline-block;font-size:14px;color:#67e8f9;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;}\n.hero h1{font-size:36px;margin:0 0 16px;line-height:1.3;font-weight:800;}\n.hero p{color:#cffafe;font-size:18px;max-width:640px;margin:0 auto;line-height:1.6;}\n.hero img{width:100%;max-width:640px;height:auto;margin:32px auto 0;border-radius:10px;display:block;}\narticle{padding-top:48px;}\narticle h2{font-size:26px;margin:56px 0 20px;padding-left:14px;border-left:5px solid var(--color-accent);line-height:1.4;}\narticle h3{font-size:19px;margin:32px 0 12px;color:var(--color-primary);}\narticle p{margin:16px 0;}\narticle strong{color:var(--color-primary);font-weight:700;}\narticle code{background:#ecfeff;padding:2px 8px;border-radius:4px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;color:#0e7490;}\n.databox{background:#ecfeff;border-left:4px solid var(--color-accent);padding:16px 20px;margin:24px 0;border-radius:0 8px 8px 0;font-size:15.5px;}\n.databox strong{color:var(--color-primary);}\n.warnbox{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);padding:16px 20px;margin:24px 0;border-radius:8px;font-size:15.5px;}\n.code-block{background:#0f172a;color:#e2e8f0;padding:16px 20px;border-radius:8px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;line-height:1.6;margin:20px 0;overflow-x:auto;white-space:pre;}\n.cta{background:linear-gradient(135deg,#0891b2 0%,#06b6d4 100%);color:#fff;padding:28px 24px;border-radius:12px;margin:48px 0 0;text-align:center;}\n.cta h3{color:#fff;margin:0 0 8px;font-size:20px;}\n.cta p{color:#cffafe;margin:0;font-size:15.5px;}\n.footer-nav{margin-top:32px;padding-top:20px;border-top:1px solid #e2e8f0;font-size:14px;color:var(--color-text-muted);}\n.footer-nav a{color:var(--color-primary);text-decoration:none;}\n@media (max-width:480px){.hero h1{font-size:26px;}.hero p{font-size:16px;}article h2{font-size:21px;}article h3{font-size:17px;}body{font-size:16px;}}\n<\/style>\n<section class=\"hero\">\n  <span class=\"eyebrow\">React \uad50\uc7ac \u00b7 \uace0\uae09 18\ud3b8<\/span>\n  <h1>React Error Boundary \u2014 \ucef4\ud3ec\ub10c\ud2b8 \uc5d0\ub7ec \uaca9\ub9ac<\/h1>\n  <p>\ud55c \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc8fd\uc5c8\ub2e4\uace0 \uc571 \uc804\uccb4\uac00 \ud770 \ud654\uba74? \uadf8\uac74 1990\ub144\ub300 \uc598\uae30. Error Boundary \ud55c \ubc88\uc5d0.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-39.jpg\" alt=\"UI \ucef4\ud3ec\ub10c\ud2b8\uc758 \uae68\uc9c4 \ud53d\uc140\uc744 \ubc29\ud328\uac00 \ub9c9\uc544\ub0b4\ub294 \uc77c\ub7ec\uc2a4\ud2b8 \u2014 Error Boundary \ucee8\uc149\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>React \uc758 \ub2e8\uc810 \ud558\ub098 \u2014 \ucef4\ud3ec\ub10c\ud2b8 \ud2b8\ub9ac \uc548 \uc5b4\ub518\uac00\uc5d0\uc11c \uc5d0\ub7ec\uac00 throw \ub418\uba74 <strong>\uc804\uccb4 \ud654\uba74\uc774 \uc0ac\ub77c\uc9c4\ub2e4<\/strong>. \ucf58\uc194\uc5d0 \uc5d0\ub7ec + DOM \ube44\uc5b4\uc788\uc74c. \uc0ac\uc6a9\uc790 \uc785\uc7a5\uc5d0\uc120 &#8220;\ud770 \ud654\uba74&#8221; \uc0ac\uace0. <strong>Error Boundary<\/strong> \uac00 \uc774 \uc5d0\ub7ec\ub97c \uc7a1\uc544 \uaca9\ub9ac\ud558\uace0 fallback UI \ub97c \ubcf4\uc5ec\uc900\ub2e4.<\/p>\n\n<p>\uc774\ubc88 18\ud3b8\uc740 Error Boundary \uc758 \uc815\ud655\ud55c \ub3d9\uc791 + \ud68c\uc0ac stack \ud45c\uc900 <code>react-error-boundary<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac + 17\ud3b8 TanStack Query \uc640 \uacb0\ud569 + Sentry \uac19\uc740 \uc5d0\ub7ec \ucd94\uc801 \ud1b5\ud569.<\/p>\n\n<h2>1. Error Boundary \uac00 \uc7a1\ub294 \uac83 \/ \ubabb \uc7a1\ub294 \uac83<\/h2>\n\n<p>\uba3c\uc800 \ud55c\uacc4\ub97c \uc54c\uc544\uc57c. Error Boundary \ub294 <strong>&#8220;\ub80c\ub354 \uc911 throw \ub41c \uc5d0\ub7ec&#8221;<\/strong> \ub9cc \uc7a1\ub294\ub2e4.<\/p>\n\n<div class=\"code-block\">\/\/ \u2705 \uc7a1\ud798 \u2014 \ub80c\ub354 \uc911\nfunction Broken() {\n  throw new Error(&#8216;\ub80c\ub354 \uc2e4\ud328!&#8217;);\n  return &lt;div&gt;&#8230;&lt;\/div&gt;;\n}\n\n\/\/ \u274c \uc548 \uc7a1\ud798 \u2014 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\nfunction Button() {\n  return &lt;button onClick={() =&gt; { throw new Error(&#8216;!&#8217;) }}&gt;\ud074\ub9ad&lt;\/button&gt;;\n}\n\/\/ \ud578\ub4e4\ub7ec \uc548 throw \ub294 React \uac00 catch \uc548 \ud568. try\/catch \uc9c1\uc811 \uc368\uc57c\n\n\/\/ \u274c \uc548 \uc7a1\ud798 \u2014 \ube44\ub3d9\uae30\nuseEffect(() =&gt; {\n  fetch(&#8230;).then(() =&gt; { throw new Error(&#8216;!&#8217;) });  \/\/ \uc9c1\uc811 catch\n}, []);\n\n\/\/ \u274c \uc548 \uc7a1\ud798 \u2014 Error Boundary \uc790\uae30 \uc790\uc2e0\n\/\/ \u274c \uc548 \uc7a1\ud798 \u2014 SSR (server-side rendering, Next.js \ub4f1)<\/div>\n\n<div class=\"databox\">\n<strong>\uc7a1\ud788\ub294 \uc2dc\ub098\ub9ac\uc624<\/strong> \u2014 useQuery\u00b7useSuspenseQuery \uac00 throw \ud558\ub294 \uc5d0\ub7ec (17\ud3b8 \uc790\ub3d9 catch), \ucef4\ud3ec\ub10c\ud2b8 \ubcf8\ubb38\uc5d0\uc11c <code>data.user.name<\/code> \ucc98\ub7fc null \uc811\uadfc, \uc798\ubabb\ub41c JSX \ubc18\ud658, render \uc911 \ud638\ucd9c\ud55c \ud568\uc218\uc5d0\uc11c throw \u2014 \uc774 \ubaa8\ub450 Error Boundary \uac00 catch.\n<\/div>\n\n<h2>2. \ub77c\uc774\ube0c\ub7ec\ub9ac \u2014 react-error-boundary \uac00 \ud45c\uc900<\/h2>\n\n<p>React \uacf5\uc2dd\uc740 \ud074\ub798\uc2a4 \ucef4\ud3ec\ub10c\ud2b8 + <code>componentDidCatch<\/code>\u00b7<code>getDerivedStateFromError<\/code> \ub85c \ub9cc\ub4e4\ub77c\uace0 \ud588\uc5c8\uc9c0\ub9cc, \ud568\uc218\ud615 \uc2dc\ub300\uc5d0 \uc9c1\uc811 \ub9cc\ub4e4 \uc774\uc720 0. <strong>react-error-boundary<\/strong> \uac00 \uc0ac\uc2e4\uc0c1 \ud45c\uc900.<\/p>\n\n<div class=\"code-block\">npm install react-error-boundary\n\nimport { ErrorBoundary } from &#8216;react-error-boundary&#8217;;\n\nfunction MyFallback({ error, resetErrorBoundary }) {\n  return (\n    &lt;div role=&#8221;alert&#8221; className=&#8221;error-box&#8221;&gt;\n      &lt;h2&gt;\ubb38\uc81c\uac00 \ubc1c\uc0dd\ud588\uc5b4\uc694<\/h2&gt;\n      &lt;p&gt;{error.message}&lt;\/p&gt;\n      &lt;button onClick={resetErrorBoundary}&gt;\ub2e4\uc2dc \uc2dc\ub3c4&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n\nfunction App() {\n  return (\n    &lt;ErrorBoundary\n      FallbackComponent={MyFallback}\n      onError={(error, info) =&gt; logToSentry(error, info)}\n      onReset={() =&gt; { \/* \uc0c1\ud0dc \ucd08\uae30\ud654 *\/ }}\n    &lt;&gt;\n      &lt;Dashboard \/&gt;\n    &lt;\/ErrorBoundary&gt;\n  );\n}<\/div>\n\n<p>\ud575\uc2ec props \u2014 <code>FallbackComponent<\/code> (\uc5d0\ub7ec \uc2dc \ud45c\uc2dc), <code>onError<\/code> (Sentry\u00b7DataDog \ub4f1 \uc678\ubd80 \ub85c\uae45), <code>onReset<\/code> (\uc7ac\uc2dc\ub3c4 \uc2dc \uc815\ub9ac), <code>resetKeys<\/code> (\uc774 \uac12\uc774 \ubc14\ub00c\uba74 \uc790\ub3d9 reset).<\/p>\n\n<h2>3. \ubc30\uce58 \uc804\ub7b5 \u2014 \uc5ec\ub7ec \ub2e8\uacc4\ub85c \uaca9\ub9ac<\/h2>\n\n<p>Error Boundary \ud55c \uac1c\ub97c \ucd5c\uc0c1\uc704\uc5d0\ub9cc \ub450\uba74 \u2014 \uc791\uc740 \uc5d0\ub7ec\ub3c4 \ud654\uba74 \uc804\uccb4\uac00 fallback \uc73c\ub85c \ubc14\ub01c. \uacb0\uc81c \uc704\uc82f \uc5d0\ub7ec\ub85c \ud5e4\ub354\uae4c\uc9c0 \uc8fd\ub294 \uc2dd. <strong>\uc5ec\ub7ec \ub2e8\uacc4\ub85c \uc911\ucca9<\/strong>\ud574 \uc601\ud5a5\uc744 \uaca9\ub9ac.<\/p>\n\n<div class=\"code-block\">function App() {\n  return (\n    &lt;ErrorBoundary FallbackComponent={FatalFallback}&gt;\n      &lt;Header \/&gt;\n      &lt;Layout&gt;\n        &lt;ErrorBoundary FallbackComponent={SidebarFallback}&gt;\n          &lt;Sidebar \/&gt;\n        &lt;\/ErrorBoundary&gt;\n        &lt;ErrorBoundary FallbackComponent={MainFallback}&gt;\n          &lt;Suspense fallback={&lt;Spinner \/&gt;}&gt;\n            &lt;MainContent \/&gt;\n          &lt;\/Suspense&gt;\n        &lt;\/ErrorBoundary&gt;\n        &lt;ErrorBoundary FallbackComponent={WidgetFallback}&gt;\n          &lt;PaymentWidget \/&gt;\n        &lt;\/ErrorBoundary&gt;\n      &lt;\/Layout&gt;\n    &lt;\/ErrorBoundary&gt;\n  );\n}<\/div>\n\n<p>\ub808\uc774\uc5b4 \u2014 \u2460 \ucd5c\uc0c1\uc704 (Fatal): \uc804\uccb4 \ud2b8\ub9ac\uac00 \uc8fd\uc5c8\uc744 \ub54c\ub9cc (rare). \u2461 \ud398\uc774\uc9c0 \ub2e8\uc704: \ud55c \ud398\uc774\uc9c0 \uc5d0\ub7ec\uac00 \ub2e4\ub978 \ud398\uc774\uc9c0\uc5d0 \uc601\ud5a5 \uc548 \uac00\uac8c. \u2462 \uc704\uc82f \ub2e8\uc704: \uacb0\uc81c\u00b7\ucc28\ud2b8\u00b7\uc2e4\uc2dc\uac04 \uc54c\ub9bc \uac19\uc740 \ub3c5\ub9bd \uc704\uc82f. 17\ud3b8 Suspense \uc640 \uc9dd\uc9c0\uc5b4 &#8220;\ub85c\ub529 \u2192 \ub370\uc774\ud130 \ub3c4\ucc29&#8221; \uc774 \uc548\uc804\ud55c \uaca9\ub9ac.<\/p>\n\n<h2>4. Sentry \u00b7 \uc5d0\ub7ec \ucd94\uc801 \ud1b5\ud569<\/h2>\n\n<p>production \uc5d0\uc120 \uc5d0\ub7ec\ub97c \uc0ac\uc6a9\uc790\uc5d0\uac8c\ub9cc \ubcf4\uc5ec\uc8fc\uace0 \ub05d\ub098\uba74 \uc548 \ub428. \uac1c\ubc1c\uc790\uac00 \ubc1b\uc544 \ub514\ubc84\uae45 \uac00\ub2a5\ud574\uc57c. Sentry \uac00 \uac00\uc7a5 \ud754\ud55c \uc120\ud0dd.<\/p>\n\n<div class=\"code-block\">npm install @sentry\/react\n\n\/\/ main.tsx\nimport * as Sentry from &#8216;@sentry\/react&#8217;;\nSentry.init({ dsn: &#8216;https:\/\/&#8230;@sentry.io\/&#8230;&#8217; });\n\n\/\/ Error Boundary \uc548 onError \uc5d0\uc11c\n&lt;ErrorBoundary\n  FallbackComponent={MyFallback}\n  onError={(error, info) =&gt; {\n    Sentry.captureException(error, {\n      contexts: { react: { componentStack: info.componentStack } }\n    });\n  }}\n&gt;<\/div>\n\n<p>Sentry \uac00 \uc790\ub3d9 \uc218\uc9d1 \u2014 stack trace, \uc0ac\uc6a9\uc790 \ube0c\ub77c\uc6b0\uc800\u00b7OS, \uc9c1\uc804 \uc561\uc158 (breadcrumb), session replay (\uc635\uc158). \ud55c \uc0ac\uc6a9\uc790\uac00 &#8220;\uc5d0\ub7ec \ub0ac\uc5b4\uc694&#8221; \ub77c\uace0\ub9cc \uc54c\ub824\uc640\ub3c4 \uc815\ud655\ud55c \ucee8\ud14d\uc2a4\ud2b8 \ud655\ubcf4.<\/p>\n\n<div class=\"warnbox\">\n<strong>\uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\u00b7\ube44\ub3d9\uae30 \uc5d0\ub7ec\ub3c4 \uc7a1\uc73c\ub824\uba74<\/strong> \u2014 useErrorHandler \ud6c5 (react-error-boundary \uc81c\uacf5). <code>const handleError = useErrorHandler(); try { ... } catch (e) { handleError(e) }<\/code> \ud328\ud134\uc73c\ub85c \uac15\uc81c\ub85c boundary \uae4c\uc9c0 \uc804\ub2ec. 17\ud3b8 useQuery \ub294 \uc790\ub3d9\uc73c\ub85c boundary \uae4c\uc9c0 throw \ud574\uc11c \uc774 \ud328\ud134 \ubd88\ud544\uc694.\n<\/div>\n\n<p>Error Boundary \uac00 \uc790\ub9ac \uc7a1\uc73c\uba74 production \uc0ac\uace0\uac00 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc5d0 \ubbf8\uce58\ub294 \uc601\ud5a5\uc774 \ud55c \ub2e8\uacc4 \ub5a8\uc5b4\uc9c4\ub2e4. 19\ud3b8\ubd80\ud130\ub294 \ub514\uc790\uc778\u00b7\uc2a4\ud0c0\uc77c \u2014 React \uc758 CSS \uc804\ub7b5 3\ub300 \uc635\uc158 \ube44\uad50.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \uae00<\/h3>\n<p>React \uad50\uc7ac 19\ud3b8 \u2014 CSS \uc804\ub7b5 \ube44\uad50. Tailwind \u00b7 CSS Modules \u00b7 CSS-in-JS \uc911 \ubb34\uc5c7\uc744 \uc5b8\uc81c.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\nReact \uad50\uc7ac \uc2dc\ub9ac\uc988 \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-performance-16\/\">16\ud3b8 \uc131\ub2a5<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-suspense-tanstack-17\/\">17\ud3b8 Suspense+Query<\/a> \u00b7\n<strong>18\ud3b8 Error Boundary<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>React Error Boundary \u2014 \ub80c\ub354 \uc5d0\ub7ec \uaca9\ub9ac\u00b7\ud770 \ud654\uba74 \ubc29\uc9c0. react-error-boundary + Sentry \ud1b5\ud569. \uad50\uc7ac 18\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":756,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-782","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=782"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/782\/revisions"}],"predecessor-version":[{"id":805,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/782\/revisions\/805"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/756"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}