{"id":3400,"date":"2024-11-09T08:15:14","date_gmt":"2024-11-09T05:15:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/reactte-hata-sinirlari-neden-ve-nasil-kullanilir\/"},"modified":"2024-11-09T08:15:14","modified_gmt":"2024-11-09T05:15:14","slug":"reactte-hata-sinirlari-neden-ve-nasil-kullanilir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-hata-sinirlari-neden-ve-nasil-kullanilir\/","title":{"rendered":"React’te Hata S\u0131n\u0131rlar\u0131: Neden ve Nas\u0131l Kullan\u0131l\u0131r?"},"content":{"rendered":"

React’te Hata S\u0131n\u0131rlar\u0131: Neden ve Nas\u0131l Kullan\u0131l\u0131r?<\/p>\n

React uygulamalar\u0131nda hata y\u00f6netimi, \u00f6zellikle karma\u015f\u0131k uygulamalar geli\u015ftirirken kritik bir \u00f6neme sahiptir. Hata s\u0131n\u0131rlar\u0131, React’in g\u00fc\u00e7l\u00fc hata y\u00f6netimi mekanizmalar\u0131ndan biridir ve uygulaman\u0131n beklenmedik hatalar kar\u015f\u0131s\u0131nda daha sa\u011flam ve kullan\u0131c\u0131 dostu olmas\u0131n\u0131 sa\u011flar. Bu makalede, hata s\u0131n\u0131rlar\u0131n\u0131n \u00f6nemini, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 ayr\u0131nt\u0131l\u0131 bir \u015fekilde ele alaca\u011f\u0131z.<\/p>\n

Hata S\u0131n\u0131rlar\u0131 Neden \u00d6nemlidir?<\/h2>\n

Hatalar, yaz\u0131l\u0131m geli\u015ftirmenin ka\u00e7\u0131n\u0131lmaz bir par\u00e7as\u0131d\u0131r. React uygulamalar\u0131 da hata durumlar\u0131yla kar\u015f\u0131la\u015fabilir. \u00d6rne\u011fin, bir API \u00e7a\u011fr\u0131s\u0131 ba\u015far\u0131s\u0131z olabilir, ge\u00e7ersiz bir prop verilebilir veya bir bile\u015fenin render i\u015flemi s\u0131ras\u0131nda bir hata olu\u015fabilir. Bu hatalar, uygulaman\u0131n \u00e7\u00f6kmesine veya beklenmedik davran\u0131\u015flara neden olabilir.<\/p>\n

Hata s\u0131n\u0131rlar\u0131, bu t\u00fcr hatalar\u0131 yakalamak ve y\u00f6netmek i\u00e7in React’te kullan\u0131l\u0131r. Bir hata s\u0131n\u0131r\u0131, bile\u015fen a\u011fa\u00e7lar\u0131nda hatalar\u0131 yakalayan ve bunlara kar\u015f\u0131 \u00f6nlemler alan \u00f6zel bir React bile\u015fenidir.<\/p>\n

Hata S\u0131n\u0131rlar\u0131n\u0131n \u00c7al\u0131\u015fma Mekanizmas\u0131<\/h2>\n

Hata s\u0131n\u0131rlar\u0131, bir bile\u015fenin kendisinin veya alt bile\u015fenlerinin render i\u015flemi s\u0131ras\u0131nda olu\u015fan hatalar\u0131 yakalar. Bir hata olu\u015ftu\u011funda, hata s\u0131n\u0131r\u0131 devreye girer ve \u015fu ad\u0131mlar\u0131 ger\u00e7ekle\u015ftirir:<\/p>\n

    \n
  1. Hata s\u0131n\u0131r\u0131, hata mesaj\u0131n\u0131 yakalar ve kaydeder.<\/li>\n
  2. Hata s\u0131n\u0131r\u0131, hata mesaj\u0131 i\u00e7eren fallback UI’yi (yedek aray\u00fcz\u00fc) render eder.<\/li>\n
  3. Hata s\u0131n\u0131r\u0131, alt bile\u015fenlerin render i\u015flemini durdurur.<\/li>\n<\/ol>\n

    Bu \u015fekilde, hata s\u0131n\u0131r\u0131 uygulaman\u0131n \u00e7\u00f6kmesini engeller ve kullan\u0131c\u0131ya hata hakk\u0131nda bilgi sa\u011flar. Ayr\u0131ca, hata s\u0131n\u0131r\u0131, uygulaman\u0131n geri kalan\u0131n\u0131n \u00e7al\u0131\u015fmaya devam etmesini sa\u011flayarak kullan\u0131c\u0131 deneyimini iyile\u015ftirir.<\/p>\n

    Hata S\u0131n\u0131rlar\u0131n\u0131 Kullanma<\/h2>\n

    Bir hata s\u0131n\u0131r\u0131 tan\u0131mlamak i\u00e7in React’in ErrorBoundary<\/code> bile\u015fenini kullanabilirsiniz. ErrorBoundary<\/code> bile\u015feni, static getDerivedStateFromError()<\/code>, componentDidCatch()<\/code> ve render()<\/code> olmak \u00fczere \u00fc\u00e7 \u00f6nemli y\u00f6ntem i\u00e7erir.<\/p>\n

    static getDerivedStateFromError()<\/code> y\u00f6ntemi, bir hata olu\u015ftu\u011funda hata s\u0131n\u0131r\u0131n\u0131n durumunu g\u00fcncellemek i\u00e7in kullan\u0131l\u0131r. Bu y\u00f6ntem, fallback UI’nin render edilmesini sa\u011flar.<\/p>\n

    componentDidCatch()<\/code> y\u00f6ntemi, bir hata olu\u015ftu\u011funda hata s\u0131n\u0131r\u0131n\u0131n \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 y\u00f6ntemdir. Bu y\u00f6ntem, hatay\u0131 yakalamak ve ek hata i\u015fleme i\u015flemleri yapmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n

    render()<\/code> y\u00f6ntemi, hata s\u0131n\u0131r\u0131n\u0131n UI’s\u0131n\u0131 render eder. Hata olu\u015fursa, fallback UI’yi render eder; aksi halde, normal UI’yi render eder.<\/p>\n

    \u0130\u015fte basit bir hata s\u0131n\u0131r\u0131 \u00f6rne\u011fi:<\/p>\n

    “`jsx
    \nimport React, { Component } from ‘react’;<\/p>\n

    class ErrorBoundary extends Component {
    \n constructor(props) {
    \n super(props);
    \n this.state = { hasError: false };
    \n }<\/p>\n

    static getDerivedStateFromError(error) {
    \n return { hasError: true };
    \n }<\/p>\n

    componentDidCatch(error, errorInfo) {
    \n console.error(error, errorInfo);
    \n }<\/p>\n

    render() {
    \n if (this.state.hasError) {
    \n return Something went wrong.;
    \n }<\/p>\n

    return this.props.children;
    \n }
    \n}<\/p>\n

    export default ErrorBoundary;
    \n“`<\/p>\n

    Bu \u00f6rnekte, ErrorBoundary<\/code> bile\u015feni, hasError<\/code> durumunu kullanarak hata olu\u015fup olu\u015fmad\u0131\u011f\u0131n\u0131 izler. Hata olu\u015fursa, Something went wrong.<\/code> mesaj\u0131 render edilir. Ayr\u0131ca, componentDidCatch()<\/code> y\u00f6ntemi hatay\u0131 konsola yazar.<\/p>\n

    Hata S\u0131n\u0131rlar\u0131n\u0131 Etkin Kullan\u0131m<\/h2>\n

    Hata s\u0131n\u0131rlar\u0131n\u0131 etkili bir \u015fekilde kullanmak i\u00e7in a\u015fa\u011f\u0131daki ipu\u00e7lar\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurabilirsiniz:<\/p>\n