--- id: e1r2r3o4-h5a6-4n7d-l8i9-n0g1s2t3a4b5 category: Unified confidence_score: 0.99 tags: [react, error-handling, stability, error-boundary, monitoring, resilience] last_reinforced: 2026-05-01 github_commit: "wikification-error-handling" --- # Frontend Error Handling & Application Stability ## ๐Ÿ“Œ ํ•œ ์ค„ ํ†ต์ฐฐ (The Karpathy Summary) > ํ”„๋ก ํŠธ์—”๋“œ ์•ˆ์ •์„ฑ์€ ๋ชจ๋“  ์—๋Ÿฌ๋ฅผ ๋ง‰๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ๋ฐœ์ƒํ•œ ์—๋Ÿฌ๊ฐ€ ์ „์ฒด ์•ฑ์˜ ํ™”์ดํŠธ ์Šคํฌ๋ฆฐ์œผ๋กœ ๋ฒˆ์ง€์ง€ ์•Š๋„๋ก ๊ตฌํš์„ ๋‚˜๋ˆ„๊ณ (Error Boundary), ์‹ค์‹œ๊ฐ„ ๋ชจ๋‹ˆํ„ฐ๋ง์„ ํ†ตํ•ด ๋น ๋ฅด๊ฒŒ ์ธ์ง€ํ•˜๊ณ  ๋ณต๊ตฌํ•˜๋Š” ํšŒ๋ณต ํƒ„๋ ฅ์„ฑ(Resilience)์— ์žˆ๋‹ค. ## ๐Ÿ“– ๊ตฌ์กฐํ™”๋œ ์ง€์‹ (Synthesized Content) ### 1. ๊ณ„์ธต์  ์—๋Ÿฌ ์ฒ˜๋ฆฌ ์ „๋žต - **Error Boundaries**: React ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ ์ƒ์œ„์—์„œ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์˜ ๋Ÿฐํƒ€์ž„ ์—๋Ÿฌ๋ฅผ ์บก์ฒ˜ํ•˜์—ฌ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋Œ€์ฒด UI๋ฅผ ๋ณด์—ฌ์ค€๋‹ค. ํ•ต์‹ฌ ๋น„์ฆˆ๋‹ˆ์Šค ์˜์—ญ๋ณ„๋กœ ์•ˆ์ „์žฅ์น˜๋ฅผ ๋ฐฐ์น˜ํ•œ๋‹ค. - **Global Error Handling**: `window.onerror`, `unhandledrejection` ์ด๋ฒคํŠธ๋ฅผ ๊ตฌ๋…ํ•˜์—ฌ ์˜ˆ๊ธฐ์น˜ ๋ชปํ•œ ๋น„๋™๊ธฐ ์—๋Ÿฌ๋ฅผ ์ „์—ญ์—์„œ ์บก์ฒ˜ํ•˜๊ณ  ์„œ๋ฒ„๋กœ ์ „์†กํ•œ๋‹ค. - **Local Error Handling**: `try-catch` ๋ธ”๋ก๊ณผ API ์š”์ฒญ ๊ณ„์ธต์˜ ์ธํ„ฐ์…‰ํ„ฐ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ฆ‰๊ฐ์ ์ธ ํ”ผ๋“œ๋ฐฑ์„ ์ œ๊ณตํ•œ๋‹ค. ### 2. ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์•ˆ์ •์„ฑ ํ™•๋ณด - **Fallback UI**: ์—๋Ÿฌ ๋ฐœ์ƒ ์‹œ ๋‹จ์ˆœํžˆ ์•ฑ์„ ์ค‘๋‹จ์‹œํ‚ค๋Š” ๋Œ€์‹ , ์ƒˆ๋กœ๊ณ ์นจ ๋ฒ„ํŠผ์ด๋‚˜ ๊ณ ๊ฐ์„ผํ„ฐ ์—ฐ๊ฒฐ ๋“ฑ ๋‹ค์Œ ํ–‰๋™์„ ์œ ๋„ํ•˜๋Š” UI๋ฅผ ์ œ๊ณตํ•œ๋‹ค. - **Graceful Degradation**: ์ผ๋ถ€ ๊ธฐ๋Šฅ(์˜ˆ: ์ถ”์ฒœ ๋ชฉ๋ก)์ด ์‹คํŒจํ•˜๋”๋ผ๋„ ํ•ต์‹ฌ ๊ธฐ๋Šฅ(์˜ˆ: ๊ฒฐ์ œ)์€ ์œ ์ง€๋  ์ˆ˜ ์žˆ๋„๋ก ๋ชจ๋“ˆ ๊ฐ„ ๊ฒฐํ•ฉ๋„๋ฅผ ๋‚ฎ์ถ˜๋‹ค. ### 3. ๋ชจ๋‹ˆํ„ฐ๋ง ๋ฐ ๋ถ„์„ - **Sentry ํ†ตํ•ฉ**: ์—๋Ÿฌ ๋ฐœ์ƒ ์‹œ์ ์˜ ์‚ฌ์šฉ์ž ์„ธ์…˜, ๊ธฐ๊ธฐ ์ •๋ณด, ์Šคํƒ ํŠธ๋ ˆ์ด์Šค๋ฅผ ์ˆ˜์ง‘ํ•˜์—ฌ ์žฌํ˜„ ๋ฐ ์ˆ˜์ •์„ ์šฉ์ดํ•˜๊ฒŒ ํ•œ๋‹ค. ## โš ๏ธ ๋ชจ์ˆœ ๋ฐ ์—…๋ฐ์ดํŠธ (Contradictions & RL Update) - **๊ณผ๋„ํ•œ ์—๋Ÿฌ ๋ฌด์‹œ**: ๋ชจ๋“  ์—๋Ÿฌ๋ฅผ ๋ฌต๋ฌตํžˆ ์ฒ˜๋ฆฌํ•˜๋ฉด ์‹ค์ œ ์‹ฌ๊ฐํ•œ ๋…ผ๋ฆฌ ์˜ค๋ฅ˜๋ฅผ ๋†“์น  ์ˆ˜ ์žˆ๋‹ค. ๋กœ๊ทธ ์ˆ˜์ง‘๊ณผ ๊ฒฝ๊ณ  ์•Œ๋ฆผ(Alerting) ์ฒด๊ณ„๊ฐ€ ๋ณ‘ํ–‰๋˜์–ด์•ผ ํ•œ๋‹ค. - **์—๋Ÿฌ ๋ฐ”์šด๋”๋ฆฌ์˜ ํ•œ๊ณ„**: ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋‚˜ ๋น„๋™๊ธฐ ์ฝ”๋“œ ๋‚ด๋ถ€์˜ ์—๋Ÿฌ๋Š” Error Boundary๊ฐ€ ์ง์ ‘ ์บก์ฒ˜ํ•˜์ง€ ๋ชปํ•˜๋ฏ€๋กœ ๋ณ„๋„์˜ ์ฒ˜๋ฆฌ๊ฐ€ ํ•„์š”ํ•˜๋‹ค. ## ๐Ÿ”— ์ง€์‹ ์—ฐ๊ฒฐ (Graph) - **Parent**: 10_Wiki/Topics/Development - **Related**: Frontend Governance & Observability, Sentry and LogRocket Integration - **Raw Source**: 00_Raw/Error Handling, 00_Raw/Frontend Application Stability, 00_Raw/React แ„‹แ…ขแ„‘แ…ณแ†ฏแ„…แ…ตแ„แ…ฆแ„‹แ…ตแ„‰แ…งแ†ซ แ„‹แ…จ\354\231\270 \353\260\217 \354\227\220\353\237\254 \354\262\230\353\246\254 ## ๐Ÿ’ป GitHub ๋™๊ธฐํ™” ์ž๋™ํ™” ์›Œํฌํ”Œ๋กœ์šฐ 1. Stage: git add . 2. Commit: `git commit -m "[P-Reinforce] Wikify Frontend Error Handling and Application Stability Standard"` 3. Push: `git push origin main` ## ๐Ÿ”— Knowledge Connections ### Related Concepts (Auto-Linked) * [[2026-05-01]] * [[Boundaries]] * [[Error Boundaries]] * [[Frontend]] * [[Frontend_Governance_and_Observability]] * [[Observability]] * [[P-Reinforce]] * [[React]] * [[Resilience]]