Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 52 additions & 56 deletions content/docs/error-boundaries.md
Original file line number Diff line number Diff line change
@@ -1,28 +1,27 @@
---
id: error-boundaries
title: Error Boundaries
title: Xəta Sərhədləri
permalink: docs/error-boundaries.html
---

In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to [emit](https://github.com/facebook/react/issues/4026) [cryptic](https://github.com/facebook/react/issues/6895) [errors](https://github.com/facebook/react/issues/8579) on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.
Keçmişdə, komponent daxilində baş verən Javascript xətaları, React-in daxili vəziyyətini korlayıb, sonrakı renderlərdə [kriptik](https://github.com/facebook/react/issues/6895) [xətalar](https://github.com/facebook/react/issues/8579) [göstərirdi](https://github.com/facebook/react/issues/4026). Bu xətaların həmişə applikasiya kodunda əvvəlki xətalara görə baş verməyinə baxmayaraq, React bu xətaların komponent daxilində idarəsi üçün və bu xətalardan bərpa olunmaq üçün heç bir mexanizm təmin etmirdi.

## Xəta Sərhədlərinin Təqdim Edilməsi {#introducing-error-boundaries}

## Introducing Error Boundaries {#introducing-error-boundaries}
UI-ın bir hissəsində baş verən Javascript xətası bütün applikasiyanı sındırmamalıdır. Bu problemin React-də həll olunması üçün, React 16 "xəta sərhədi" adında yeni bir konsepsiya təqdim edir.

A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.
Xəta sərhədləri **uşaq komponent ağacında baş verən Javascript xətaları tutan, bu xətaları qeydiyyata alan və xəta olduqda fallback UI göstərən** bir React komponentidir. Xəta sərhədləri render zamanı, lifecycle metodlarında, və bütün altında olan ağacdakı konstruktorlarda baş verən xətaları tutur.

Error boundaries are React components that **catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI** instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

> Note
> Qeyd
>
> Error boundaries do **not** catch errors for:
> Xəta sərhədləri aşağıda baş verən xətaları **tutmur**:
>
> * Event handlers ([learn more](#how-about-event-handlers))
> * Asynchronous code (e.g. `setTimeout` or `requestAnimationFrame` callbacks)
> * Server side rendering
> * Errors thrown in the error boundary itself (rather than its children)
> * Hadisə işləyicilərində ([daha ətraflı](#how-about-event-handlers))
> * Asinxron kod (məsələn `setTimeout` və ya `requestAnimationFrame` callback-ləri)
> * Serverdə render edilməsi zamanı
> * Xəta sərhədinin daxilində atılan xətalar (uşaqda atılmağın yerinə)

A class component becomes an error boundary if it defines either (or both) of the lifecycle methods [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror) or [`componentDidCatch()`](/docs/react-component.html#componentdidcatch). Use `static getDerivedStateFromError()` to render a fallback UI after an error has been thrown. Use `componentDidCatch()` to log error information.
Klass komponenti göstərilən [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror) və ya [`componentDidCatch()`](/docs/react-component.html#componentdidcatch) lifecycle metodlarının birini (və ya hər ikisini) tətbiq etdikdə xəta sərhədinə çevrilir. `static getDerivedStateFromError()` funskiyasını xəta atıldıqdan sonra fallback UI render etmək üçün işlədin. `componentDidCatch()` funskiyasını xətaları qeydiyyata almaq üçün işlədin.

```js{7-10,12-15,18-21}
class ErrorBoundary extends React.Component {
Expand All @@ -32,81 +31,78 @@ class ErrorBoundary extends React.Component {
}

static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
// Gələn renderdə UI göstərmək üçün state-i yeniləyin.
return { hasError: true };
}

componentDidCatch(error, info) {
// You can also log the error to an error reporting service
// Siz həmçinin xətaları, xəta hesabat servislərində qeydiyyata ala bilərsiniz
logErrorToMyService(error, info);
}

render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
// Siz hər hansı bir fallback UI render edə bilərsiniz
return <h1>Bir şey yalnış getdi.</h1>;
}

return this.props.children;
}
}
```

Then you can use it as a regular component:
Sonra siz bunu normal komponent kimi işlədə bilərsiniz:

```js
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>
```

Error boundaries work like a JavaScript `catch {}` block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout your application.

Note that **error boundaries only catch errors in the components below them in the tree**. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how catch {} block works in JavaScript.
Xəta sərhədləri komponentlər üçün Javascript-in `catch {}` bloku kimi işləyirlər. Yalnız klas komponentləri xəta sərhədləri ola bilər. Praktikada, bir çox zaman, siz xəta sərhədi komponentini bir dəfə tətbiq edib bütün applikasiya zamanı işlətmək istəyərsiniz.

## Live Demo {#live-demo}
Qeyd edək ki, **xəta sərhədləri yalnız altındakı ağacda olan komponentlərin xətalarını tuta bilir**. Xəta sərhədi daxilində baş verən xətanı tuta bilmir. Əgər xəta sərhədin xəta mesajını render edə bilmirsə, xəta bu komponentin yuxarısında olan ən yaxın xəta sərhədinə yayılacaq. Javascriptin catch {} funskiyasıda bunun kimi işləyir.

Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) with [React 16](/blog/2017/09/26/react-v16.0.html).
## Canlı Demo {#live-demo}

[React 16-da](/blog/2017/09/26/react-v16.0.html) [xəta sərhədinin yaranması və işlənməsi misalına](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) baxın.

## Where to Place Error Boundaries {#where-to-place-error-boundaries}

The granularity of error boundaries is up to you. You may wrap top-level route components to display a “Something went wrong” message to the user, just like server-side frameworks often handle crashes. You may also wrap individual widgets in an error boundary to protect them from crashing the rest of the application.
## Xəta Sərhədlərini Harada Yerləşdirək {#where-to-place-error-boundaries}

Xəta sərhədlərinin zənginliyi / əhatəsi sizdən asılıdır. Siz ən yuxarıda olan route komponentlərini əhatə edib, server tərəfində işlənilən freymvorklardakı kimi, "Bir şey yalnış getdi" mesajını istifadəçiyə göstərə bilərsiniz. Siz həmçinin fərdi vidcetlərini xəta sərhədləri ilə əhatə edib xətaların bütün applikasiyanı sındırmasından qoruya bilərsiniz.

## New Behavior for Uncaught Errors {#new-behavior-for-uncaught-errors}
## Tutulmamış Xətalar üçün Yeni Davranış {#new-behavior-for-uncaught-errors}

This change has an important implication. **As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree.**
Bu dəyişikliyin vacib bir təsiri var. **React 16-dan başlayaraq, xəta sərhədində tutulmayan xətalar, React komponent ağacının bütünlüklə DOM-dan çıxarılmasına səbəb olacaq.**

We debated this decision, but in our experience it is worse to leave corrupted UI in place than to completely remove it. For example, in a product like Messenger leaving the broken UI visible could lead to somebody sending a message to the wrong person. Similarly, it is worse for a payments app to display a wrong amount than to render nothing.
Biz bu qərarı müzakirə etdik və bizim təcrübəmizdən korlanmış UI-ı yerində saxlamaq, bu UI-ı bütün silməkdən daha pisdir. Məsələn, Messenger kimi bir məhsulda, sınmış UI-ı göstərmək, kiminsə yalnış adama mesaj göndərməsinə səbəb ola bilər. Eyniliklə, ödəmə applikasiyasının yalnız dəyər göstərməsi heç nə göstərməsindən daha pisdir.

This change means that as you migrate to React 16, you will likely uncover existing crashes in your application that have been unnoticed before. Adding error boundaries lets you provide better user experience when something goes wrong.
Bu dəyişikliklə siz React 16-a miqrasiya etdikdə, sizin applikasiyanızda əvvəl fikir vermədiyiniz mövcud xətaların üstünü aça biləcəksiniz. Xəta sərhədlərini əlavə etməklə bir şey yalnış getdikdə daha yaxşı istifadəçi təcrübəsi yarada bilərsiniz.

For example, Facebook Messenger wraps content of the sidebar, the info panel, the conversation log, and the message input into separate error boundaries. If some component in one of these UI areas crashes, the rest of them remain interactive.
Məsələn, Facebook Messenger sidebar-ı, məlumat panelini, chat yazılarını, və mesaj daxil etməsini ayrılıqda xəta sərhədləri ilə əhətə edir. Əgər hər hansı bir UI sahəsində bir komponent sınırsa, applikasiyanın qalanı interaktiv qalır.

We also encourage you to use JS error reporting services (or build your own) so that you can learn about unhandled exceptions as they happen in production, and fix them.
Biz həmçinin sizin Javascript xəta servislərindən (və ya özünüz düzəldin) istifadə etməyi tövsiyyə edirik. Bu servislər ilə production-da baş verən xətaları tapıb, bu xətaları düzədə bilərsiniz.

## Komponent Stek İzləri {#component-stack-traces}

## Component Stack Traces {#component-stack-traces}
React 16 render zamanı baş verən bütün xətaları, applikasiya təsadüfən bu xətaları udsa belə, development zamanı brauzerin konsoluna yazır. Xəta mesajı və Javascript stekindən əlavə, həmçinin React 16 həmçinin komponent stek izlərini göstərir. İndi siz xətanın komponent ağacında dəqiq harada baş verdiyini görə bilərsiniz:

React 16 prints all errors that occurred during rendering to the console in development, even if the application accidentally swallows them. In addition to the error message and the JavaScript stack, it also provides component stack traces. Now you can see where exactly in the component tree the failure has happened:
<img src="../images/docs/error-boundaries-stack-trace.png" style="max-width:100%" alt="Xətanın Error Boundary komponenti tərəfindən tutulması">

<img src="../images/docs/error-boundaries-stack-trace.png" style="max-width:100%" alt="Error caught by Error Boundary component">
Siz komponentin stek izində fayl adlarını və sətir nömrələrini də görə bilərsiniz. Bu [Create React App](https://github.com/facebookincubator/create-react-app) layihələrində birbaşa işləyir:

You can also see the filenames and line numbers in the component stack trace. This works by default in [Create React App](https://github.com/facebookincubator/create-react-app) projects:
<img src="../images/docs/error-boundaries-stack-trace-line-numbers.png" style="max-width:100%" alt="Xətanın Error Boundary komponenti tərəfindən sətir nömrələri ilə tutulması">

<img src="../images/docs/error-boundaries-stack-trace-line-numbers.png" style="max-width:100%" alt="Error caught by Error Boundary component with line numbers">
Əgər siz Create React App istifadə etmirsinizsə, siz [bu plugini](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source) əllə Babel konfiqurasiyasına əlavə edə bilərsiniz. Qeyd edək ki, bu yalnız development zamanı işlətmək üçündür və **production-də söndürülməlidir**.

If you don’t use Create React App, you can add [this plugin](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source) manually to your Babel configuration. Note that it’s intended only for development and **must be disabled in production**.

> Note
> Qeyd
>
> Component names displayed in the stack traces depend on the [`Function.name`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name) property. If you support older browsers and devices which may not yet provide this natively (e.g. IE 11), consider including a `Function.name` polyfill in your bundled application, such as [`function.name-polyfill`](https://github.com/JamesMGreene/Function.name). Alternatively, you may explicitly set the [`displayName`](/docs/react-component.html#displayname) property on all your components.

> Komponent adları stek izlərində [`Function.name`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name) parametrindən asılıdır. Əgər siz bu parametri nativ formada dəstəkləməyən köhnə brauzerləri və cihazları dəstəkləyirsinizsə (məsələn IE 11), `Function.name` polifilini (məsələn [`function.name-polyfill`](https://github.com/JamesMGreene/Function.name)) paketlənmiş applikasiyanıza əlavə edin. Alternativ olaraq, siz açıq şəkildə `displayName` parametrini bütün komponentlərdə təyin edə bilərsiniz.

## How About try/catch? {#how-about-trycatch}
## Bəs try/catch? {#how-about-trycatch}

`try` / `catch` is great but it only works for imperative code:
`try` / `catch` əladır amma yalnız imperativ kod ilə işləyir:

```js
try {
Expand All @@ -116,21 +112,21 @@ try {
}
```

However, React components are declarative and specify *what* should be rendered:
Lakin, React komponentlər deklarativdirlər və **nəyin** render olunacağını müəyyənləşdirirlər:

```js
<Button />
```

Error boundaries preserve the declarative nature of React, and behave as you would expect. For example, even if an error occurs in a `componentDidUpdate` method caused by a `setState` somewhere deep in the tree, it will still correctly propagate to the closest error boundary.
Xəta sərhərləri React-in deklarativ təbiətini saxlayır və sizin gözlədiyiniz kimi davranırlar. Məsələn, əgər xəta, ağacın dərinliyində olan komponentin `componentDidUpdate` funskiyasında `setState`-ə görə baş versə belə, React yenədə xətanı ən yaxın xəta sərhədinə yayacaq.

## How About Event Handlers? {#how-about-event-handlers}
## Bəs Hadisə İşləyiciləri? {#how-about-event-handlers}

Error boundaries **do not** catch errors inside event handlers.
Xəta sərhədləri hadisə işləyicilərində baş verən xətaları **tutmur**.

React doesn't need error boundaries to recover from errors in event handlers. Unlike the render method and lifecycle methods, the event handlers don't happen during rendering. So if they throw, React still knows what to display on the screen.
React-ə hadisə işləyicilərində baş verən xətaların bərpası üçün, xəta sərhədlərindən istifadə etməsi lazım deyil. Render və lifecycle metodlarından fərqli olaraq, hadisə işləyiciləri render zamanı baş vermir. Bu səbəbdən, əgər bu işləyicilər xəta atırlarsa, React yenə də ekranda nə göstərəcəyini bilir.

If you need to catch an error inside event handler, use the regular JavaScript `try` / `catch` statement:
Əgər sizə hadisə işləyicilərində yeni xətanı tutmaq lazımdırsa, normal Jacascript `try` / `catch` ifadəsindən istifadə edin:

```js{9-13,17-20}
class MyComponent extends React.Component {
Expand All @@ -142,25 +138,25 @@ class MyComponent extends React.Component {

handleClick() {
try {
// Do something that could throw
// Xəta atması üçün nəsə edin
} catch (error) {
this.setState({ error });
}
}

render() {
if (this.state.error) {
return <h1>Caught an error.</h1>
return <h1>Xəta tutuldu.</h1>
}
return <div onClick={this.handleClick}>Click Me</div>
return <div onClick={this.handleClick}>Tıkla</div>
}
}
```

Note that the above example is demonstrating regular JavaScript behavior and doesn't use error boundaries.
Qeyd edək ki, yuxarıdakı nümunə normal Javascript davranışını göstərir və xəta sərhədindən istifadə etmir.

## Naming Changes from React 15 {#naming-changes-from-react-15}
## React 15-dən ad dəyişiklikləri {#naming-changes-from-react-15}

React 15 included a very limited support for error boundaries under a different method name: `unstable_handleError`. This method no longer works, and you will need to change it to `componentDidCatch` in your code starting from the first 16 beta release.
React 15 xəta sərhədlərini fərqli funskiya adı ilə çox məhdudiyyətli formada dəstəkləyirdi: `unstable_handleError`. Bu funksiya artıq işləmir və siz React 16 betadan başlayaraq bunu `componentDidCatch` ilə əvəz etməlisiniz.

For this change, we’ve provided a [codemod](https://github.com/reactjs/react-codemod#error-boundaries) to automatically migrate your code.
Bu dəyişiklik üçün, biz kodunuzun avtomatik miqrasiyası üçün [codemod](https://github.com/reactjs/react-codemod#error-boundaries) təmin etmişik.
2 changes: 1 addition & 1 deletion src/components/MarkdownPage/MarkdownPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ const MarkdownPage = ({
href={`https://github.com/reactjs/reactjs.org/tree/master/${
markdownRemark.fields.path
}`}>
Edit this page
Bu səhifəni dəyişin
</a>
</div>
)}
Expand Down