{"id":38400,"date":"2026-01-30T14:40:59","date_gmt":"2026-01-30T11:40:59","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=38400"},"modified":"2026-01-30T14:40:59","modified_gmt":"2026-01-30T11:40:59","slug":"reactte-hata-sinirlari-error-boundaries-nasil-kullanilir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-hata-sinirlari-error-boundaries-nasil-kullanilir\/","title":{"rendered":"React’te Hata S\u0131n\u0131rlar\u0131 (Error Boundaries) Nas\u0131l Kullan\u0131l\u0131r?"},"content":{"rendered":"

<\/p>\n

React’te Hata S\u0131n\u0131rlar\u0131 (Error Boundaries) Nas\u0131l Kullan\u0131l\u0131r?<\/h2>\n

React uygulamalar\u0131, kullan\u0131c\u0131 aray\u00fczlerinin dinamik ve etkile\u015fimli yap\u0131s\u0131 sayesinde modern web geli\u015ftirmede vazge\u00e7ilmez bir ara\u00e7 haline gelmi\u015ftir. Ancak, her yaz\u0131l\u0131mda oldu\u011fu gibi, React uygulamalar\u0131nda da hatalar ka\u00e7\u0131n\u0131lmazd\u0131r. Beklenmedik durumlar, API sorunlar\u0131, yanl\u0131\u015f veri giri\u015fleri veya geli\u015ftirici hatalar\u0131, uygulaman\u0131n \u00e7\u00f6kmesine veya kullan\u0131c\u0131n\u0131n k\u00f6t\u00fc bir deneyim ya\u015famas\u0131na neden olabilir. \u0130\u015fte tam da bu noktada React’in “Hata S\u0131n\u0131rlar\u0131” (Error Boundaries) devreye girer. React 16 ile tan\u0131t\u0131lan bu g\u00fc\u00e7l\u00fc \u00f6zellik, uygulaman\u0131zdaki JavaScript hatalar\u0131n\u0131 zarif bir \u015fekilde yakalaman\u0131za, kaydetmenize ve kullan\u0131c\u0131ya yedek bir UI (yedek kullan\u0131c\u0131 aray\u00fcz\u00fc) sunarak uygulaman\u0131z\u0131n tamamen \u00e7\u00f6kmesini engellemenize olanak tan\u0131r.<\/p>\n

Bu makalede, React’teki hata s\u0131n\u0131rlar\u0131n\u0131n ne oldu\u011funu, geleneksel hata y\u00f6netimi yakla\u015f\u0131mlar\u0131ndan fark\u0131n\u0131, nas\u0131l olu\u015fturulup kullan\u0131laca\u011f\u0131n\u0131, en iyi uygulamalar\u0131n\u0131 ve dikkat edilmesi gereken noktalar\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Amac\u0131m\u0131z, uygulaman\u0131z\u0131n kararl\u0131l\u0131\u011f\u0131n\u0131 art\u0131rmak ve kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in hata s\u0131n\u0131rlar\u0131n\u0131 etkin bir \u015fekilde kullanman\u0131z\u0131 sa\u011flamakt\u0131r.<\/p>\n

Geleneksel Hata Y\u00f6netimi Yakla\u015f\u0131mlar\u0131 ve S\u0131n\u0131rl\u0131l\u0131klar\u0131<\/h3>\n

Yaz\u0131l\u0131m geli\u015ftirmede hatalar\u0131 y\u00f6netmek i\u00e7in yayg\u0131n olarak kullan\u0131lan bir mekanizma try...catch<\/code> blo\u011fudur. JavaScript’te, bir kod blo\u011fu i\u00e7inde olu\u015fabilecek hatalar\u0131 yakalamak ve i\u015flemek i\u00e7in bu yap\u0131y\u0131 kullan\u0131r\u0131z:<\/p>\n

try {\n  \/\/ Hata potansiyeli olan kod\n  let result = someFunctionThatMightFail();\n  console.log(result);\n} catch (error) {\n  \/\/ Hata olu\u015ftu\u011funda \u00e7al\u0131\u015facak kod\n  console.error(\"Bir hata olu\u015ftu:\", error);\n} finally {\n  \/\/ try veya catch bloklar\u0131 \u00e7al\u0131\u015fsa da \u00e7al\u0131\u015fmasa da her zaman \u00e7al\u0131\u015facak kod\n  console.log(\"\u0130\u015flem tamamland\u0131.\");\n}<\/code><\/pre>\n
Bu yap\u0131, senkron JavaScript kodunda, \u00f6zellikle event handler’lar (olay i\u015fleyicileri), asenkron kodun then<\/code>\/catch<\/code> bloklar\u0131 veya do\u011frudan fonksiyon \u00e7a\u011fr\u0131lar\u0131 gibi yerlerde olduk\u00e7a etkilidir. \u00d6rne\u011fin, bir butona t\u0131klama olay\u0131nda bir API \u00e7a\u011fr\u0131s\u0131 yaparken olu\u015fabilecek a\u011f hatalar\u0131n\u0131 veya veri i\u015fleme hatalar\u0131n\u0131 try...catch<\/code> ile y\u00f6netebiliriz:<\/p>\n
function handleClick() {\n  try {\n    \/\/ API \u00e7a\u011fr\u0131s\u0131 veya ba\u015fka bir i\u015flem\n    fetch('\/api\/data')\n      .then(response => response.json())\n      .then(data => console.log(data))\n      .catch(apiError => console.error(\"API hatas\u0131:\", apiError));\n  } catch (syncError) {\n    console.error(\"Senkron hata:\", syncError);\n  }\n}<\/code><\/pre>\n
Peki, React bile\u015fenlerinde bu yakla\u015f\u0131m neden yetersiz kal\u0131r? React’in \u00e7al\u0131\u015fma \u015fekli, \u00f6zellikle render a\u015famas\u0131 ve ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131, try...catch<\/code> bloklar\u0131n\u0131n do\u011frudan UI hatalar\u0131n\u0131 yakalamas\u0131n\u0131 zorla\u015ft\u0131r\u0131r. try...catch<\/code> bloklar\u0131, React’in bile\u015fen a\u011fac\u0131n\u0131n derinliklerinde, render metodlar\u0131 veya ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131 s\u0131ras\u0131nda olu\u015fan hatalar\u0131 yakalayamaz. Bunun temel nedeni, React’in render s\u00fcrecinin do\u011fas\u0131d\u0131r. React, bile\u015fenlerin render metodlar\u0131n\u0131 \u00e7a\u011f\u0131r\u0131r ve bu metodlar bir JSX a\u011fac\u0131 d\u00f6nd\u00fcr\u00fcr. Bu s\u00fcre\u00e7, genellikle React’in kendi dahili mekanizmalar\u0131 taraf\u0131ndan y\u00f6netilir ve try...catch<\/code> bu ak\u0131\u015f\u0131n i\u00e7ine do\u011frudan m\u00fcdahale edemez.<\/p>\n
\u00d6rne\u011fin, a\u015fa\u011f\u0131daki gibi bir bile\u015fende render metodunda bir hata olu\u015fursa:<\/p>\n
function BuggyComponent() {\n  \/\/ Bu sat\u0131r render s\u0131ras\u0131nda bir hata f\u0131rlatacak\n  throw new Error(\"Bu bir render hatas\u0131!\");\n  return 
Hatas\u0131z i\u00e7erik<\/div>; \/\/ Bu asla render edilmez\n}\n\nfunction App() {\n  return (\n    
\n      \n      \n    <\/div>\n  );\n}<\/code><\/pre>\n
Bu durumda, BuggyComponent<\/code> i\u00e7indeki hata, App<\/code> bile\u015feninin render metodunda veya herhangi bir \u00fcst bile\u015fenin try...catch<\/code> blo\u011fu taraf\u0131ndan yakalanamaz. Sonu\u00e7 olarak, t\u00fcm uygulama beyaz bir ekranla \u00e7\u00f6kebilir veya React geli\u015ftirme ortam\u0131nda kullan\u0131c\u0131ya k\u00f6t\u00fc bir hata overlay’i g\u00f6sterebilir. Bu durum, \u00f6zellikle \u00fcretim ortam\u0131nda kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kabul edilemezdir. \u0130\u015fte bu sorunu \u00e7\u00f6zmek i\u00e7in React, Hata S\u0131n\u0131rlar\u0131 konseptini tan\u0131tt\u0131.<\/p>\n
Error Boundaries Nedir?<\/h3>\n
React Hata S\u0131n\u0131rlar\u0131 (Error Boundaries), alt bile\u015fen a\u011fac\u0131ndaki JavaScript hatalar\u0131n\u0131 yakalayan, bu hatalar\u0131n kayd\u0131n\u0131 tutan ve uygulaman\u0131n \u00e7\u00f6kmesini \u00f6nlemek i\u00e7in yedek bir kullan\u0131c\u0131 aray\u00fcz\u00fc (fallback UI) g\u00f6r\u00fcnt\u00fcleyen React bile\u015fenleridir. Bir hata s\u0131n\u0131r\u0131, bir bile\u015fenin render metodunda, ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131nda veya alt a\u011fac\u0131ndaki herhangi bir kurucu (constructor) metodunda olu\u015fan hatalar\u0131 yakalar.<\/p>\n
Hata S\u0131n\u0131rlar\u0131 Neleri Yakalayabilir?<\/strong><\/p>\n
Hata S\u0131n\u0131rlar\u0131, a\u015fa\u011f\u0131daki senaryolarda olu\u015fan hatalar\u0131 yakalamak i\u00e7in tasarlanm\u0131\u015ft\u0131r:<\/p>\n
*   Render s\u0131ras\u0131nda olu\u015fan hatalar:<\/strong> Bir bile\u015fenin render()<\/code> metodunda veya fonksiyonel bile\u015fenlerin ana g\u00f6vdesinde (JSX d\u00f6nd\u00fcren k\u0131s\u0131m) olu\u015fan hatalar.
\n*   Ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131ndaki hatalar:<\/strong> constructor<\/code>, componentDidMount<\/code>, componentDidUpdate<\/code>, shouldComponentUpdate<\/code>, getDerivedStateFromProps<\/code> gibi s\u0131n\u0131f bile\u015feni ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131nda olu\u015fan hatalar.
\n*   Fonksiyonel bile\u015fenler i\u00e7indeki hook’lardaki hatalar:<\/strong> useState<\/code>, useEffect<\/code>, useContext<\/code> gibi hook’lar i\u00e7inde olu\u015fan hatalar (dolayl\u0131 olarak, \u00e7\u00fcnk\u00fc bu hook’lar render faz\u0131nda veya ya\u015fam d\u00f6ng\u00fcs\u00fc faz\u0131nda tetiklenir).
\n*   Alt a\u011fa\u00e7taki hatalar:<\/strong> Hata S\u0131n\u0131r\u0131 bile\u015feninin sarmalad\u0131\u011f\u0131 herhangi bir alt bile\u015fenin yukar\u0131da belirtilen herhangi bir yerinde olu\u015fan hatalar.<\/p>\n
Hata S\u0131n\u0131rlar\u0131 Neleri Yakalayamaz?<\/strong><\/p>\n
Hata S\u0131n\u0131rlar\u0131 her t\u00fcr hatay\u0131 yakalayamaz. \u00d6zellikle a\u015fa\u011f\u0131daki durumlarda olu\u015fan hatalar hata s\u0131n\u0131rlar\u0131 taraf\u0131ndan yakalanmaz ve geleneksel hata y\u00f6netimi y\u00f6ntemleri veya ba\u015fka yakla\u015f\u0131mlar gerektirir:<\/p>\n
*   Event handler’lardaki hatalar:<\/strong> \u00d6rne\u011fin, bir butona t\u0131klama olay\u0131nda \u00e7al\u0131\u015fan bir fonksiyonda olu\u015fan hatalar. Bu t\u00fcr hatalar try...catch<\/code> bloklar\u0131 ile do\u011frudan y\u00f6netilebilir.
\n*   Asenkron kodlar:<\/strong> setTimeout<\/code> veya requestAnimationFrame<\/code> callback’leri, Promise’lerin then<\/code>\/catch<\/code> metodlar\u0131 i\u00e7inde olu\u015fan hatalar. Bu t\u00fcr hatalar genellikle kendi Promise hata i\u015fleyicileri veya try...catch<\/code> ile ele al\u0131nmal\u0131d\u0131r.
\n*   Hata S\u0131n\u0131r\u0131n\u0131n kendisindeki hatalar:<\/strong> E\u011fer bir Hata S\u0131n\u0131r\u0131 bile\u015feni kendi render()<\/code> metodunda veya ya\u015fam d\u00f6ng\u00fcs\u00fc metodunda hata f\u0131rlat\u0131rsa, bu hatay\u0131 kendi yakalayamaz. Bu durumda, hata hiyerar\u015fideki bir \u00fcst Hata S\u0131n\u0131r\u0131 taraf\u0131ndan yakalan\u0131r veya uygulaman\u0131n tamam\u0131 \u00e7\u00f6ker. Bu nedenle Hata S\u0131n\u0131r\u0131 bile\u015fenlerinin m\u00fcmk\u00fcn oldu\u011funca basit olmas\u0131 \u00f6nemlidir.
\n*   Sunucu taraf\u0131 render (SSR) hatalar\u0131:<\/strong> Hata S\u0131n\u0131rlar\u0131 yaln\u0131zca istemci taraf\u0131nda (taray\u0131c\u0131da) \u00e7al\u0131\u015f\u0131r.<\/p>\n
Hata S\u0131n\u0131rlar\u0131, React s\u0131n\u0131f bile\u015fenleri kullan\u0131larak olu\u015fturulur ve iki \u00f6zel ya\u015fam d\u00f6ng\u00fcs\u00fc metodunu uygular:<\/p>\n
1.  static getDerivedStateFromError(error)<\/code>: Bir alt bile\u015fen hata f\u0131rlatt\u0131\u011f\u0131nda \u00e7a\u011fr\u0131l\u0131r. Bu metod, hatay\u0131 yakalad\u0131ktan sonra state’i g\u00fcncellemek i\u00e7in kullan\u0131l\u0131r ve yedek UI’\u0131n g\u00f6r\u00fcnt\u00fclenmesini sa\u011flar.
\n2.  componentDidCatch(error, errorInfo)<\/code>: Bir alt bile\u015fen hata f\u0131rlatt\u0131\u011f\u0131nda \u00e7a\u011fr\u0131l\u0131r. Bu metod, hata hakk\u0131nda yan etkilere neden olmak i\u00e7in kullan\u0131l\u0131r, \u00f6rne\u011fin bir hata loglama servisine hatay\u0131 g\u00f6ndermek.<\/p>\n
Error Boundaries Nas\u0131l Olu\u015fturulur?<\/h3>\n
Bir Hata S\u0131n\u0131r\u0131 olu\u015fturmak i\u00e7in, React.Component<\/code>‘ten t\u00fcreyen bir s\u0131n\u0131f bile\u015feni tan\u0131mlaman\u0131z ve yukar\u0131da bahsedilen iki ya\u015fam d\u00f6ng\u00fcs\u00fc metodunu uygulaman\u0131z gerekir. \u0130\u015fte basit bir Hata S\u0131n\u0131r\u0131 bile\u015feni \u00f6rne\u011fi:<\/p>\n
import React from 'react';\n\nclass ErrorBoundary extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false, error: null, errorInfo: null };\n  }\n\n  \/\/ getDerivedStateFromError: Bir alt bile\u015fen hata f\u0131rlatt\u0131\u011f\u0131nda \u00e7a\u011fr\u0131l\u0131r.\n  \/\/ Bu metod, hatay\u0131 yakalad\u0131ktan sonra state'i g\u00fcncellemek i\u00e7in kullan\u0131l\u0131r.\n  static getDerivedStateFromError(error) {\n    \/\/ Bir sonraki render'da yedek UI'\u0131 g\u00f6stermek i\u00e7in state'i g\u00fcncelleyin.\n    return { hasError: true };\n  }\n\n  \/\/ componentDidCatch: Bir alt bile\u015fen hata f\u0131rlatt\u0131\u011f\u0131nda \u00e7a\u011fr\u0131l\u0131r.\n  \/\/ Bu metod, hata hakk\u0131nda yan etkilere neden olmak i\u00e7in kullan\u0131l\u0131r (\u00f6rn. loglama).\n  componentDidCatch(error, errorInfo) {\n    \/\/ Hata bilgilerini bir loglama servisine g\u00f6nderebilirsiniz.\n    console.error(\"ErrorBoundary yakalad\u0131:\", error, errorInfo);\n    \/\/ State'i g\u00fcncelleyerek hatan\u0131n detaylar\u0131n\u0131 UI'da g\u00f6sterebiliriz.\n    this.setState({\n      error: error,\n      errorInfo: errorInfo\n    });\n  }\n\n  render() {\n    if (this.state.hasError) {\n      \/\/ Yedek UI'\u0131 g\u00f6r\u00fcnt\u00fcleyebilirsiniz.\n      return (\n        
\n          
Bir \u015feyler ters gitti!<\/h2>\n          
Uygulamada beklenmedik bir hata olu\u015ftu.<\/p>\n          {this.state.error && (\n            
\n              {this.state.error.toString()}\n              
\n              {this.state.errorInfo && this.state.errorInfo.componentStack}\n            <\/details>\n          )}\n