error-boundaries: various improvements

Author: lex111

content/docs/error-boundaries.md

@@ -4,25 +4,24 @@ title: Предохранители
 permalink: docs/error-boundaries.html
 ---
 
-Ранее, ошибки JavaScript внутри компонентов портили внутреннее состояние React и заставляли его [выдавать](https://github.com/facebook/react/issues/4026) [таинственные](https://github.com/facebook/react/issues/6895) [сообщения об ошибках](https://github.com/facebook/react/issues/8579) во время следующего рендера. Эти сообщения всегда вызывались ошибками, расположенными где-то выше в коде приложения, но React не предоставлял способа адекватно обрабатывать их в компонентах и не мог обработать их самостоятельно.
-
+Ранее ошибки JavaScript внутри компонентов портили внутреннее состояние React и заставляли его [выдавать](https://github.com/facebook/react/issues/4026) [таинственные](https://github.com/facebook/react/issues/6895) [сообщения об ошибках](https://github.com/facebook/react/issues/8579) во время следующего рендера. Эти сообщения всегда вызывались ошибками, расположенными где-то выше в коде приложения, но React не предоставлял способа адекватно обрабатывать их в компонентах и не мог обработать их самостоятельно.
 
 ## Представляем предохранители (компоненты Error Boundary) {#introducing-error-boundaries}
 
-Ошибка JavaScript где-то в коде UI не должна прерывать работу всего приложения. Чтобы исправить эту проблему для React-пользователей, React 16 ввводит концепцию "предохранитель" (error boundary).
+Ошибка JavaScript где-то в коде UI не должна прерывать работу всего приложения. Чтобы исправить эту проблему для React-пользователей, React 16 ввводит концепцию "предохранителя" (error boundary).
 
-Предохранители это компоненты React, которые **отлавливают ошибки JavaScript в любом месте дерева их дочерних компонентов, сохраняют их в журнале ошибок и выводят запасной UI** вместо рухнувшего дерева компонентов. Предохранители отлавливают ошибки при рендеринге, в методах жизненного цикла и конструкторах дерева компонентов, расположенного под ними.
+Предохранители это компоненты React, которые **отлавливают ошибки JavaScript в любом месте деревьев их дочерних компонентов, сохраняют их в журнале ошибок и выводят запасной UI** вместо рухнувшего дерева компонентов. Предохранители отлавливают ошибки при рендеринге, в методах жизненного цикла и конструкторах деревьев компонентов, расположенных под ними.
 
 > Примечание
 >
 > Предохранители **не** поймают ошибки в:
 >
-> * Обработчиках событий ([подробнее](#how-about-event-handlers))
-> * Асинхронном коде (например колбэках из `setTimeout` или `requestAnimationFrame`)
-> * Серверном рендеринге (Server-side rendering)
-> * Самом предохранителе (а не в его дочерних компонентах)
+> * обработчиках событий ([подробнее](#how-about-event-handlers));
+> * асинхронном коде (например колбэках из `setTimeout` или `requestAnimationFrame`);
+> * серверном рендеринге (Server-side rendering);
+> * самом предохранителе (а не в его дочерних компонентах).
 
-Классовый компонент является предохранителем, если он включает любой (или оба) из следующих методов жизненного цикла: [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror) или [`componentDidCatch()`](/docs/react-component.html#componentdidcatch). Используйте `static getDerivedStateFromError()` при рендеринге запасного UI в случае отлова ошибки. Используйте `componentDidCatch()` при написании кода для журналирования информации об отловленной ошибке.
+Классовый компонент является предохранителем, если он включает хотя бы один из следующих методов жизненного цикла: [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror) или [`componentDidCatch()`](/docs/react-component.html#componentdidcatch). Используйте `static getDerivedStateFromError()` при рендеринге запасного UI в случае отлова ошибки. Используйте `componentDidCatch()` при написании кода для журналирования информации об отловленной ошибке.
 
 ```js{7-10,12-15,18-21}
 class ErrorBoundary extends React.Component {
@@ -62,7 +61,7 @@ class ErrorBoundary extends React.Component {
 
 Предохранители работают как JavaScript-блоки `catch {}`, но только для компонентов. Только классовые компоненты могут выступать в роли предохранителей. На практике чаще всего целесообразным будет один раз описать предохранитель и дальше использовать его по всему приложению.
 
-Стоит обратить внимание, что **предохранители отлавливают ошибки исключительно в своих дочерних компонентах**. Предохранитель не сможет отловить ошибку внутри самого себя. Если предохранителю не удается отрендерить сообщение об ошибке, то ошибка всплывает до ближайшего предохранителя, расположенного над ним в дереве компонентов. Этот аспект их поведения тоже напоминает работу блоков `catch {}` в JavaScript.
+Обратите внимание, что **предохранители отлавливают ошибки исключительно в своих дочерних компонентах**. Предохранитель не сможет отловить ошибку внутри самого себя. Если предохранителю не удается отрендерить сообщение об ошибке, то ошибка всплывает до ближайшего предохранителя, расположенного над ним в дереве компонентов. Этот аспект их поведения тоже напоминает работу блоков `catch {}` в JavaScript.
 
 ## Живой пример {#live-demo}
 
@@ -89,7 +88,7 @@ class ErrorBoundary extends React.Component {
 
 ## Стек вызовов компонентов {#component-stack-traces}
 
-В режиме разработки React 16 выводит на консоль сообщения обо всех ошибках, возникших при рендеринге, даже если приложения случайно их проглотило. Помимо сообщения об ошибке и стека JavaScript, React 16 также выводит и стек вызовов компонентов. Теперь вы в точности можете видеть в каком именно месте дерева компонентов случилось страшное:
+В режиме разработки React 16 выводит на консоль сообщения обо всех ошибках, возникших при рендеринге, даже если они никак не сказались на работе приложения. Помимо сообщения об ошибке и стека JavaScript, React 16 также выводит и стек вызовов компонентов. Теперь вы в точности можете видеть в каком именно месте дерева компонентов случилось страшное:
 
 <img src="../images/docs/error-boundaries-stack-trace.png" style="max-width:100%" alt="Ошибка, отловленная предохранителем">
 
@@ -101,12 +100,11 @@ class ErrorBoundary extends React.Component {
 
 > Примечание
 >
-> Имена компонентов, выводимые в их стеке вызовов, определяются свойством [`Function.name`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/name). Если ваше приложение поддерживает более старые браузеры и устройства, которые могут ещё не предоставлять его нативно (например, IE 11), рассмотрите возможность включения полифилла `Function.name` в бандл вашего приложения, например [`function.name-polyfill`](https://github.com/JamesMGreene/Function.name). В качстве альтернативы, вы можете явным образом задать проп [`displayName`](/docs/react-component.html#displayname) в каждом из ваших компонентов.
-
+> Имена компонентов, выводимые в их стеке вызовов, определяются свойством [`Function.name`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/name). Если ваше приложение поддерживает более старые браузеры и устройства, которые могут ещё не предоставлять его нативно (например, IE 11), рассмотрите возможность включения полифилла `Function.name` в бандл вашего приложения, например [`function.name-polyfill`](https://github.com/JamesMGreene/Function.name). В качестве альтернативы, вы можете явным образом задать проп [`displayName`](/docs/react-component.html#displayname) в каждом из ваших компонентов.
 
 ## А как насчёт try/catch? {#how-about-trycatch}
 
-`try` / `catch` - отличная конструкция, но она работает исключительно в императивном коде:
+`try` / `catch` — отличная конструкция, но она работает исключительно в императивном коде:
 
 ```js
 try {
@@ -159,7 +157,7 @@ class MyComponent extends React.Component {
 
 Обратите внимание, что приведённый выше пример демонстрирует стандартное поведение JavaScript и не использует предохранителей.
 
-## Изменения в названиях по сравнению с React 15 {#naming-changes-from-react-15}
+## Изменение названия метода по сравнению с React 15 {#naming-changes-from-react-15}
 
 React 15 включал очень ограниченную поддержку предохранителей с другим названием метода: `unstable_handleError`. Этот метод больше не работает и вам будет нужно заменить его в вашем коде на `componentDidCatch` начиная с первого бета-релиза React 16.