{"id":306351,"date":"2020-07-03T09:00:32","date_gmt":"2020-07-03T09:00:32","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=306351"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2020-07-03T09:00:32","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=306351","title":{"rendered":"Sentry \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u0439 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u0431\u0430\u0433\u043e\u0432 \u0432 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 React"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/509362\/\">\n<p>\u041c\u044b \u0438\u0437\u0443\u0447\u0430\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Sentry \u0441 React.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/be7\/047\/c81\/be7047c817b3236fc17ffe6a6238f061.jpg\"><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u0441\u0435\u0440\u0438\u0438, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0435\u0439\u0441\u044f \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0430\u0445 Sentry \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435: <a href=\"https:\/\/habr.com\/ru\/post\/508686\/\">\u0427\u0430\u0441\u0442\u044c 1<\/a>. <\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p><strong>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f React<\/strong> <\/p>\n<p>  <\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 Sentry \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f; \u0441 \u0441\u0430\u0439\u0442\u0430 Sentry. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c React.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0432\u043d\u043e\u0432\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043d\u0430\u0448\u0438 \u0434\u0432\u0435 \u043a\u043d\u043e\u043f\u043a\u0438, Hello \u0438 Error, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 React. \u041c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">npx create-react-app react-app<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u0430\u043a\u0435\u0442 Sentry:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">yarn add @sentry\/browser<\/code><\/pre>\n<p>  <\/p>\n<p>\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e:<\/p>\n<p>  <\/p>\n<p>react-app \/ src \/ index.js<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">... import * as Sentry from '@sentry\/browser';  const RELEASE = '0.1.0'; if (process.env.NODE_ENV === 'production') {   Sentry.init({     dsn: 'https:\/\/303c04eac89844b5bfc908ceffc6757c@sentry.io\/1289887',     release: RELEASE,   }); } ...<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u0434\u043b\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f \u0437\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c Sentry \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0441\u0431\u043e\u0440\u043e\u043a<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043d\u0430\u0448\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 Hello \u0438 Error \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u0445 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n<p>  <\/p>\n<p><em>react-app \/ src \/ Hello.js<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import React, { Component } from 'react'; import * as Sentry from '@sentry\/browser';  export default class Hello extends Component {   state = {     text: '',   };   render() {     const { text } = this.state;     return (       &lt;div&gt;         &lt;button           onClick={this.handleClick}         &gt;           Hello         &lt;\/button&gt;         &lt;div&gt;{text}&lt;\/div&gt;       &lt;\/div&gt;     )   }    handleClick = () =&gt; {     this.setState({       text: 'Hello World',     });     try {       throw new Error('Caught');     } catch (err) {       if (process.env.NODE_ENV !== 'production') {         return;       }       Sentry.captureException(err);     }   } }<\/code><\/pre>\n<p>  <\/p>\n<p><em>react-app \/ src \/ MyError.js<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import React, { Component } from 'react';  export default class MyError extends Component {   render() {     return (       &lt;div&gt;         &lt;button           onClick={this.handleClick}         &gt;           Error         &lt;\/button&gt;       &lt;\/div&gt;     )   }    handleClick = () =&gt; {     throw new Error('Uncaught');   } }<\/code><\/pre>\n<p>  <\/p>\n<p><em>react-app \/ src \/ App.js<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">... import Hello from '.\/Hello'; import MyError from '.\/MyError';  class App extends Component {   render() {     return (       &lt;div className=&quot;App&quot;&gt;         ...         &lt;Hello \/&gt;         &lt;MyError \/&gt;       &lt;\/div&gt;     );   } }  export default App;<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 (\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u041a\u0430\u0440\u0442\u044b)<\/strong><\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c Sentry \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u043e\u0439, \u0432\u0432\u0435\u0434\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">yarn build<\/code><\/pre>\n<p>  <\/p>\n<p>\u0438 \u0438\u0437 build \u043f\u0430\u043f\u043a\u0438 \u0432\u0432\u0435\u0434\u0438\u0442\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">npx http-server -c-1<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0441\u0442\u043e\u043b\u043a\u043d\u0435\u043c\u0441\u044f, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0437\u0430\u043f\u0438\u0441\u0438 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 Sentry \u0441\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043d\u043e\u043c\u0435\u0440\u0430 \u0441\u0442\u0440\u043e\u043a \u0432 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u043d\u043e\u043c \u043f\u0430\u043a\u0435\u0442\u0435; \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/3da\/5ab\/f8a\/3da5abf8ab6ae176ff6e282829a091d7.png\"><\/p>\n<p>  <\/p>\n<p>\u0421\u043b\u0443\u0436\u0431\u0430 Sentry \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442 \u044d\u0442\u043e, \u0432\u044b\u0442\u044f\u0433\u0438\u0432\u0430\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u044b \u0434\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043a\u0438. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0431\u0435\u0436\u0438\u043c \u043e\u0442 localhost (\u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u0441\u043b\u0443\u0436\u0431\u043e\u0439 Sentry).<\/p>\n<p>  <\/p>\n<p><strong>\u0420\u0435\u0448\u0435\u043d\u0438\u044f (\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u041a\u0430\u0440\u0442\u044b)<\/strong><\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043e\u0431\u0449\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041e\u0434\u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u043e\u0442\u0432\u0435\u0442\u0430 \u043d\u0430 \u043d\u0435\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441 GitHub Pages (\u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e). \u0428\u0430\u0433\u0438 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435:<\/p>\n<p>  <\/p>\n<ol>\n<li>\n<p>\u0421\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0430\u043f\u043a\u0438 <em>build<\/em> \u0432 \u043f\u0430\u043f\u043a\u0443 <em>docs<\/em> \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f.<\/p>\n<p>  <\/li>\n<li>\n<p>\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u0435 <em>GitHub Pages<\/em> \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 (\u0438\u0437 GitHub), \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u043f\u043a\u0443 docs \u0432 <em>master<\/em> \u0432\u0435\u0442\u0432\u0438<\/p>\n<p>  <\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430 GitHub<\/p>\n<p>  <\/li>\n<\/ol>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/strong>: \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <em>create-create-app<\/em> \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043e\u043c\u0430\u0448\u043d\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0421\u0432\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u043a \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043a package.json:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">&quot;homepage&quot;: &quot;https:\/\/larkintuckerllc.github.io\/hello-sentry\/&quot;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443:<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/larkintuckerllc.github.io\/hello-sentry\/\" rel=\"nofollow\">https:\/\/larkintuckerllc.github.io\/hello-sentry\/<\/a><\/p>\n<p>  <\/p>\n<p><strong>\u0418\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u041f\u043e\u0439\u043c\u0430\u043d\u043d\u044b\u0445 \u041e\u0448\u0438\u0431\u043e\u043a<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0439\u0434\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 Hello.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/62c\/28d\/1a1\/62c28d1a19a4580c42ef1f6660d508f5.png\"><\/p>\n<p>  <\/p>\n<p>\u0421 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0449\u0435\u0439\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/9d9\/372\/88e\/9d937288e83245d2b2c692703b3bba0c.png\"><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u042d\u0442\u043e\u0442 \u043e\u0442\u0447\u0435\u0442 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u044f\u0441\u043d\u044b\u043c, <strong>BRAVO<\/strong>.<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0418\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u041d\u0435\u0443\u0447\u0442\u0435\u043d\u043d\u044b\u0445 \u041e\u0448\u0438\u0431\u043e\u043a<\/strong><\/p>\n<p>  <\/p>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0439\u0434\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 <em>Error<\/em>.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/57d\/ac3\/f97\/57dac3f97a258e1e06f07eded8052fed.png\"><\/p>\n<p>  <\/p>\n<p>\u0421 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0449\u0435\u0439\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/016\/31e\/979\/01631e9799f2c4c739942e0c1889d467.png\"><\/p>\n<p>  <\/p>\n<p><strong>\u041b\u0443\u0447\u0448\u0430\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043d\u0435\u0443\u0447\u0442\u0435\u043d\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a (\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433)<\/strong><\/p>\n<p>  <\/p>\n<blockquote><p>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0413\u0440\u0430\u043d\u0438\u0446 \u041e\u0448\u0438\u0431\u043e\u043a<\/p>\n<p>  \u041e\u0448\u0438\u0431\u043a\u0430 JavaScript \u0432 \u0447\u0430\u0441\u0442\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u043d\u0430\u0440\u0443\u0448\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 React, React 16 \u0432\u0432\u043e\u0434\u0438\u0442 \u043d\u043e\u0432\u043e\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u0435 &quot;\u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0448\u0438\u0431\u043e\u043a&quot;.<\/p>\n<p>  \u0413\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0448\u0438\u0431\u043e\u043a \u2013 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u043e\u0432\u044f\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 JavaScript \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0441\u0432\u043e\u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442 \u044d\u0442\u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432\u043c\u0435\u0441\u0442\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0440\u0430\u0437\u0431\u0438\u043b\u043e\u0441\u044c. \u0413\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0448\u0438\u0431\u043e\u043a \u0443\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u0432 \u043c\u0435\u0442\u043e\u0434\u0430\u0445 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0438 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430\u0445 \u0432\u0441\u0435\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u043f\u043e\u0434 \u043d\u0438\u043c\u0438.<\/p>\n<p>  \u2026<\/p>\n<p>  \u041d\u043e\u0432\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043d\u0435\u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a<\/p>\n<p>  \u042d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u0435\u0442 \u0432\u0430\u0436\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u041d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 React 16, \u043e\u0448\u0438\u0431\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0431\u044b\u043b\u0438 \u043f\u043e\u0439\u043c\u0430\u043d\u044b \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u0433\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u043e\u0448\u0438\u0431\u043e\u043a, \u043f\u0440\u0438\u0432\u0435\u0434\u0443\u0442 \u043a \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0432\u0441\u0435\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React.<\/p>\n<p>  \u2014 <em>Dan Abramov \u2014<\/em> <a href=\"https:\/\/reactjs.org\/blog\/2017\/07\/26\/error-handling-in-react-16.html\" rel=\"nofollow\"><em>Error Handling in React 16<\/em><\/a><\/p><\/blockquote>\n<p>\u0412\u0430\u0436\u043d\u043e\u0435 \u0443\u0442\u043e\u0447\u043d\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u043d\u044f\u043b\u043e \u0443 \u043c\u0435\u043d\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u044f \u043f\u043e\u043d\u044f\u043b \u044d\u0442\u043e, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e <strong>\u0432\u044b\u0448\u0435\u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043e\u0448\u0438\u0431\u043a\u0430\u043c\u0438, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 (\u0438\u043b\u0438, \u0447\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432 \u043b\u044e\u0431\u043e\u043c \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430)<\/strong>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0433\u0440\u0430\u043d\u0438\u0446 \u043e\u0448\u0438\u0431\u043e\u043a \u043d\u0435 \u043f\u0440\u0438\u043d\u0435\u0441\u043b\u043e \u0431\u044b \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u044b \u0441 \u043d\u0430\u0448\u0435\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 <em>Error<\/em>; \u044d\u0442\u0430 \u043e\u0448\u0438\u0431\u043a\u0430 \u0431\u044b\u043b\u0430 \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0449\u0435\u043b\u0447\u043a\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0430 \u0437\u0430\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0448\u0438\u0431\u043e\u043a \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0438\u0437\u044f\u0449\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<p>  <\/p>\n<p><em>react-app \/ src \/ MyRenderError<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import React, { Component } from 'react';  export default class MyRenderError extends Component {   state = {     flag: false,   };   render() {     const { flag } = this.state;     return (       &lt;div&gt;         &lt;button           onClick={this.handleClick}         &gt;           Render Error         &lt;\/button&gt;         { flag &amp;&amp; &lt;div&gt;{flag.busted.bogus}&lt;\/div&gt; }       &lt;\/div&gt;     )   }    handleClick = () =&gt; {     this.setState({       flag: true,     });   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438, <em>React<\/em> \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f <em>flag.busted.bogus<\/em>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0443<\/p>\n<p>  <\/li>\n<li>\n<p>\u0411\u0435\u0437 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0448\u0438\u0431\u043a\u0438 \u0432\u0441\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e<\/p>\n<p>  <\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u043d\u0430\u0448 \u043a\u043e\u0434 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0448\u0438\u0431\u043a\u0438 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 <em>componentDidCatch<\/em>); \u044d\u0442\u043e, \u043f\u043e \u0441\u0443\u0442\u0438, \u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0414\u044d\u043d\u0430 \u0410\u0431\u0440\u0430\u043c\u043e\u0432\u0430:<\/p>\n<p>  <\/p>\n<p><em>react-app \/ src \/ ErrorBoundary.js<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import React, { Component } from 'react'; import * as Sentry from '@sentry\/browser';  export default class ErrorBoundary extends Component {   constructor(props) {     super(props);     this.state = { hasError: false };   }    componentDidCatch(err, info) {     this.setState({ hasError: true });     Sentry.captureException(err);   }    render() {     if (this.state.hasError) {       return &lt;h1&gt;Something went wrong.&lt;\/h1&gt;;     }     return this.props.children;   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<p>  <\/p>\n<p><em>react-app \/ src \/ App.js<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">... import MyRenderError from '.\/MyRenderError';  class App extends Component {   render() {     return (       &lt;ErrorBoundary&gt;         &lt;div className=&quot;App&quot;&gt;           ...         &lt;\/div&gt;       &lt;\/ErrorBoundary&gt;     );   } } ...<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 Render Error \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 Sentry.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/3ab\/bfb\/9b6\/3abbfb9b6a2919d4a3feb2ed5005eef5.png\"><\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/cd5\/726\/fb5\/cd5726fb5b83a5f0218de86bed84c52d.png\"><\/p>\n<p>  <\/p>\n<p><strong>\u0417\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u0430\u043c \u0431\u044b\u043b\u043e \u044d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>P.S. \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b <a href=\"https:\/\/medium.com\/@johntucker_48673\/sentry-error-reporting-by-example-part-2-cd7b2f653be4\" rel=\"nofollow\">https:\/\/medium.com\/@johntucker_48673\/sentry-error-reporting-by-example-part-2-cd7b2f653be4<\/a><\/p>\n<p>  <\/p>\n<p>P.S. \u0422\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u0447\u0430\u0442 \u043f\u043e Sentry <a href=\"https:\/\/t.me\/sentry_ru\" rel=\"nofollow\">https:\/\/t.me\/sentry_ru<\/a><\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/509362\/\"> https:\/\/habr.com\/ru\/post\/509362\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/509362\/\">\n<p>\u041c\u044b \u0438\u0437\u0443\u0447\u0430\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Sentry \u0441 React.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/be7\/047\/c81\/be7047c817b3236fc17ffe6a6238f061.jpg\"><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u0441\u0435\u0440\u0438\u0438, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0435\u0439\u0441\u044f \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0430\u0445 Sentry \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435: <a href=\"https:\/\/habr.com\/ru\/post\/508686\/\">\u0427\u0430\u0441\u0442\u044c 1<\/a>. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-306351","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/306351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=306351"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/306351\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=306351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=306351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=306351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}