{"id":87208,"date":"2020-07-05T13:42:19","date_gmt":"2020-07-05T11:42:19","guid":{"rendered":"https:\/\/prohoster.info\/blog\/administrirovanie\/sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react"},"modified":"2020-07-05T13:42:19","modified_gmt":"2020-07-05T11:42:19","slug":"sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react","status":"publish","type":"post","link":"https:\/\/prohoster.info\/et\/blog\/administrirovanie\/sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react","title":{"rendered":"Sentry kaugj\u00e4lgimine vigadest Reacti esirakendustes","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Uurime Sentry kasutamist Reactiga.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry kaugj\u00e4lgimine vigadest Reacti esirakendustes\" src=\"\/wp-content\/uploads\/2020\/07\/6ea51ae73accae0c36e0130b830c1ca2.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>See artikkel on osa sarjast, mis algab Sentry veateatest n\u00e4idisena: <noindex><a rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/post\/508686\/\">Osa 1<\/a><\/noindex>. <\/p>\n<p><noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<p><strong>Reacti rakendamine<\/strong> <\/p>\n<p><\/p>\n<p>Esmalt peame lisama uue Sentry projekti selle rakenduse jaoks; Sentry saidilt. Me valime Reacti.<\/p>\n<p><\/p>\n<p>Rakendame uuesti meie kaks nuppu, Hello ja Error, Reactis. Alustame meie k\u00e4ivitusrakenduse loomisega:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">npx create-react-app react-app<\/code><\/pre>\n<p><\/p>\n<p>Siis impordime Sentry paketi:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">yarn add @sentry\/browser<\/code><\/pre>\n<p><\/p>\n<p>ja initsialiseerime selle:<\/p>\n<p><\/p>\n<p>react-app \/ src \/ index.js<\/p>\n<p><\/p>\n<pre><code class=\"javascript\">...\nimport * as Sentry from '@sentry\/browser';\n\nconst RELEASE = '0.1.0';\nif (process.env.NODE_ENV === 'production') {\n  Sentry.init({\n    dsn: 'https:\/\/303c04eac89844b5bfc908ceffc6757c@sentry.io\/1289887',\n    release: RELEASE,\n  });\n}\n...<\/code><\/pre>\n<p><\/p>\n<p>Seire:<\/p>\n<p><\/p>\n<ul>\n<li>Arendamise ajal on meil teisi mehhanisme probleemide j\u00e4lgimiseks, n\u00e4iteks konsool, seega aktiveerime Sentry vaid tootmisversioonide jaoks.<\/li>\n<\/ul>\n<p><\/p>\n<p>Seej\u00e4rel rakendame meie nupud Hello ja Error ning lisame need rakendusse:<\/p>\n<p><\/p>\n<p><em>react-app \/ src \/ Hello.js<\/em><\/p>\n<p><\/p>\n<pre><code class=\"javascript\">import React, { Komponent } from &#039;react&#039;;\nimport * as Sentry from &#039;@sentry\/browser&#039;;\n\nexport default class Hello extends Komponent {\n  state = {\n    text: &#039;&#039;,\n  };\n  render() {\n    const { text } = this.state;\n    return (\n      &lt;div&gt;\n        &lt;button\n          onclick=&quot;{this.handleClick}&quot;\n        &gt;\n          Tere\n        &lt;\/button&gt;\n        &lt;div&gt;{text}&lt;\/div&gt;\n      &lt;\/div&gt;\n    )\n  }\n\n  handleClick = () =&amp;gt; {\n    this.setState({\n      text: &#039;Tere maailm&#039;,\n    });\n    try {\n      throw new Error(&#039;P&uuml;&uuml;tud&#039;);\n    } catch (err) {\n      if (process.env.NODE_ENV !== &#039;production&#039;) {\n        return;\n      }\n      Sentry.captureException(err);\n    }\n  }\n}<\/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 &#039;react&#039;;\n\nexport default class MyError extends Component {\n  render() {\n    return (\n      &lt;div&gt;\n        &lt;button\n          onclick=&quot;{this.handleClick}&quot;\n        &gt;\n          Error\n        &lt;\/button&gt;\n      &lt;\/div&gt;\n    )\n  }\n\n  handleClick = () =&amp;gt; {\n    throw new Error(&#039;Uncaught&#039;);\n  }\n}<\/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 &#039;.\/Hello&#039;;\nimport MyError from &#039;.\/MyError&#039;;\n\nclass App extends Component {\n  render() {\n    return (\n      &lt;div classname=&quot;App&quot;&gt;\n        ...\n        &lt;hello \/&gt;\n        &lt;myerror \/&gt;\n      &lt;\/div&gt;\n    );\n  }\n}\n\nexport default App;<\/code><\/pre>\n<p><\/p>\n<p><strong>Probleem (Allikakaardid)<\/strong><\/p>\n<p><\/p>\n<p>Saame testida Sentry tootmisversiooniga, sisestades:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">yarn build<\/code><\/pre>\n<p><\/p>\n<p>ja kaustast build sisestage:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">npx http-server -c-1<\/code><\/pre>\n<p><\/p>\n<p>Probleem, millega me kohe silmitsi seisame, on see, et Sentry veateated viitavad ridade arvule v\u00e4hendatud paketis; see ei ole v\u00e4ga kasulik.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry kaugj\u00e4lgimine vigadest Reacti esirakendustes\" src=\"\/wp-content\/uploads\/2020\/07\/e5b320f731249bad65a82e33c4e09b43.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Sentry teenus selgitab seda, t\u00f5mmates v\u00e4hendatud paketi allikakaardid p\u00e4rast vea saamist. Sel juhul jookseme localhost'ist (mis ei ole Sentry teenuse k\u00e4tte saadav).<\/p>\n<p><\/p>\n<p><strong>Lahendused (Allikakaardid)<\/strong><\/p>\n<p><\/p>\n<p>Selle probleemi lahendamine seisneb rakenduse k\u00e4itamisel avalikust veebiserverist. \u00dcks lihtne vastus sellele on kasutada GitHub Pages teenust (tasuta). T\u00fc\u00fcpilised sammud selle kasutamiseks on j\u00e4rgmised:<\/p>\n<p><\/p>\n<ol>\n<li>\n<p>Kopeerige kausta sisu <em>build<\/em> kausta <em>docs<\/em> hoidla juurkausta.<\/p>\n<p>\n<\/li>\n<li>\n<p>Aktiveerige <em>GitHub Pages<\/em> hoidlas (GitHubist), et kasutada docs kausta <em>master<\/em> filiaal<\/p>\n<p>\n<\/li>\n<li>\n<p>Tooge muudatused GitHubi<\/p>\n<p>\n<\/li>\n<\/ol>\n<p><\/p>\n<p><strong>M\u00e4rkus<\/strong>: p\u00e4rast seda, kui aru sain, et pean kasutama <em>create-create-app<\/em> kodu funktsiooni rakenduse k\u00e4itamiseks. See t\u00e4hendas, et pidin package.json-sse juurde lisama j\u00e4rgmise:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">\"homepage\": \"https:\/\/larkintuckerllc.github.io\/hello-sentry\/\"<\/code><\/pre>\n<p><\/p>\n<p>L\u00f5plik versioon t\u00f6\u00f6tavast rakendusest on k\u00e4ttesaadav aadressil:<\/p>\n<p><\/p>\n<p><noindex><a rel=\"nofollow\" href=\"https:\/\/larkintuckerllc.github.io\/hello-sentry\/\">https:\/\/larkintuckerllc.github.io\/hello-sentry\/<\/a><\/noindex><\/p>\n<p><\/p>\n<p><strong>Illustratsioon P\u00fc\u00fctud Vigadest<\/strong><\/p>\n<p><\/p>\n<p>Hakkame l\u00e4bi k\u00e4ima nuppu Hello vajutades.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry kaugj\u00e4lgimine vigadest Reacti esirakendustes\" src=\"\/wp-content\/uploads\/2020\/07\/1dbe7845b2e3d04933344d3d18dac01f.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Viga ilmub j\u00e4rgmiselt:<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry kaugj\u00e4lgimine vigadest Reacti esirakendustes\" src=\"\/wp-content\/uploads\/2020\/07\/621f0f12eb77b7dd413d168c35c141d4.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Seire:<\/p>\n<p><\/p>\n<ul>\n<li>See veateade ei saa olla selgem. <strong>BRAVO<\/strong>.<\/li>\n<\/ul>\n<p><\/p>\n<p><strong>Illustratsioon Tuvastamata Vigadest<\/strong><\/p>\n<p><\/p>\n<p>Samamoodi, hakkame l\u00e4bi k\u00e4ima nuppu vajutades. <em>Error<\/em>.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry kaugj\u00e4lgimine vigadest Reacti esirakendustes\" src=\"\/wp-content\/uploads\/2020\/07\/65c07bc6db9f6b577ecb79dfd3336b38.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Viga ilmub j\u00e4rgmiselt:<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry kaugj\u00e4lgimine vigadest Reacti esirakendustes\" src=\"\/wp-content\/uploads\/2020\/07\/f4d668075885bb66ce0158588bff038c.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p><strong>Parim mittet\u00e4ielike vigade t\u00f6\u00f6tlemine (renderimine)<\/strong><\/p>\n<p><\/p>\n<blockquote><p>Vigade Piiride Tutvustus<\/p>\n<p>JavaScripti viga kasutajaliideses ei tohiks rikkuda kogu rakenduse t\u00f6\u00f6d. Selle probleemi lahendamiseks Reacti kasutajatele tutvustatakse React 16-s uut m\u00f5istet \"vea piirded\".<\/p>\n<p>Vigade piirded on Reacti komponendid, mis p\u00fc\u00fcavad kinni JavaScripti vigu oma komponentide lastes, registreerivad need vead ja kuvavad varu kasutajaliidese selle puu asemel, mis purunes. Vigade piirded p\u00fc\u00fcavad vigu kinni renderdamise ajal, eluts\u00fckli meetodites ja konstruktorites, mis asuvad nende all.<\/p>\n<p>\u2026<\/p>\n<p>Uus k\u00e4itumine tuvastamata vigade jaoks<\/p>\n<p>See muudatus on oluline. Alates React 16-st viivad vead, mida ei ole kinni p\u00fc\u00fcdnud \u00fckski vigade piir, kogu Reacti komponente puudutava puu mahav\u00f5tmiseni.<\/p>\n<p>\u2014 <em>Dan Abramov \u2014<\/em> <noindex><a rel=\"nofollow\" href=\"https:\/\/reactjs.org\/blog\/2017\/07\/26\/error-handling-in-react-16.html\"><em>Vigade K\u00e4sitlemine React 16-s<\/em><\/a><\/noindex><\/p><\/blockquote>\n<p>Oluline t\u00e4psustus, mille m\u00f5istmiseks kulus mul aega, on see, et <strong>eelpoolmainitud k\u00e4itumine kehtib ainult vigade kohta, mis on genereeritud renderdamise meetodis (v\u00f5i, mis on t\u00f5en\u00e4olisem, m\u00f5nes eluts\u00fckli meetodis)<\/strong>. N\u00e4iteks ei tooks vigade piiride kasutamine mingit kasu meie nupu <em>Error<\/em>; see viga oli kl\u00f5psamisprotsessoris.<\/p>\n<p><\/p>\n<p>Loome visualiseerimise veao n\u00e4ite ja seej\u00e4rel kasutame vigade piire, et vea t\u00f6\u00f6tlemine oleks elegantsem.<\/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 &#039;react&#039;;\n\nexport default class MyRenderError extends Component {\n  state = {\n    flag: false,\n  };\n  render() {\n    const { flag } = this.state;\n    return (\n      &lt;div&gt;\n        &lt;button\n          onclick=&quot;{this.handleClick}&quot;\n        &gt;\n          Render Error\n        &lt;\/button&gt;\n        { flag &amp;amp;&amp;amp; &lt;div&gt;{flag.busted.bogus}&lt;\/div&gt; }\n      &lt;\/div&gt;\n    )\n  }\n\n  handleClick = () =&amp;gt; {\n    this.setState({\n      flag: true,\n    });\n  }\n}<\/code><\/pre>\n<p><\/p>\n<p>T\u00e4helepanek:<\/p>\n<p><\/p>\n<ul>\n<li>\n<p>Nupu vajutamisel, <em>React<\/em> kuvatakse <em>flag.busted.bogus<\/em>, mis tekitab vea<\/p>\n<p>\n<\/li>\n<li>\n<p>Ilma vigade piirdeta eemaldatakse kogu komponentide puu<\/p>\n<p>\n<\/li>\n<\/ul>\n<p><\/p>\n<p>Seej\u00e4rel kirjutame oma vigade piiri koodi (kasutab uut eluts\u00fckli meetodit <em>componentDidCatch<\/em>); see on p\u00f5him\u00f5tteliselt n\u00e4ide Dan Abramovi artiklist:<\/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 &#039;react&#039;;\nimport * as Sentry from &#039;@sentry\/browser&#039;;\n\nexport default class ErrorBoundary extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  componentDidCatch(err, info) {\n    this.setState({ hasError: true });\n    Sentry.captureException(err);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return &lt;h1&gt;Midagi l&auml;ks valesti.&lt;\/h1&gt;;\n    }\n    return this.props.children;\n  }\n}<\/code><\/pre>\n<p><\/p>\n<p>L\u00f5puks kasutame seda komponenti:<\/p>\n<p><\/p>\n<p><em>react-app \/ src \/ App.js<\/em><\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">...&lt;br \/&gt;import MyRenderError from &#039;.\/MyRenderError&#039;;&lt;br \/&gt;&lt;br \/&gt;class App extends Component {&lt;br \/&gt;  render() {&lt;br \/&gt;    return (\n      &lt;errorboundary&gt;\n        &lt;div classname=&quot;App&quot;&gt;\n          ...\n        &lt;\/div&gt;\n      &lt;\/errorboundary&gt;\n    );\n  }\n}\n...<\/code><\/pre>\n<p><\/p>\n<p>Sellega, kui vajutate nuppu Render Error, kuvatakse varu kasutajaliides ja teavitatakse veast Sentry.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry kaugj\u00e4lgimine vigadest Reacti esirakendustes\" src=\"\/wp-content\/uploads\/2020\/07\/e410ee6355f5d423281fe278b638a09d.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry kaugj\u00e4lgimine vigadest Reacti esirakendustes\" src=\"\/wp-content\/uploads\/2020\/07\/58183f6f6aef124e8d14acaaf7e0d4fe.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p><strong>Kokkuv\u00f5te<\/strong><\/p>\n<p><\/p>\n<p>Loodan, et see oli teile kasulik.<\/p>\n<p><\/p>\n<p>P.S. <noindex><a rel=\"nofollow\" href=\"https:\/\/medium.com\/@johntucker_48673\/sentry-error-reporting-by-example-part-2-cd7b2f653be4\">Originaali link<\/a><\/noindex> <\/p>\n<p><\/p>\n<p>P.S. Sentry Telegrami vestlus <noindex><a rel=\"nofollow\" href=\"https:\/\/t.me\/sentry_ru\">https:\/\/t.me\/sentry_ru<\/a><\/noindex><\/p>\n<p>Allikas: <a content=\"nofollow\" rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/post\/509362\/\">habr.com<\/a> <\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<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. \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: \u0427\u0430\u0441\u0442\u044c 1. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f React \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. \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 [&hellip;]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":87209,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[688],"tags":[],"class_list":["post-87208","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-administrirovanie"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.1.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"\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.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Yuri Gagarin\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/prohoster.info\/et\/blog\/administrirovanie\/sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.1.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"et_EE\" \/>\n\t\t<meta property=\"og:site_name\" content=\"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"\ud83e\udd47Sentry \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 | ProHoster\" \/>\n\t\t<meta property=\"og:description\" content=\"\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.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/et\/blog\/administrirovanie\/sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"350\" \/>\n\t\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2020-07-05T11:42:19+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-07-05T11:42:19+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"\ud83e\udd47Sentry kaugmonitorimine vigadest Reacti frontendi rakendustes | ProHoster","description":"Uurime Sentry kasutamist Reactiga.","canonical_url":"https:\/\/prohoster.info\/et\/blog\/administrirovanie\/sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"et_EE","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47Sentry \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 | ProHoster","og:description":"\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.","og:url":"https:\/\/prohoster.info\/et\/blog\/administrirovanie\/sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2020-07-05T11:42:19+00:00","article:modified_time":"2020-07-05T11:42:19+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"87208","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":null,"breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-02-28 13:56:23","updated":"2022-10-01 14:58:21","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/posts\/87208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/comments?post=87208"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/posts\/87208\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/media\/87209"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/media?parent=87208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/categories?post=87208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/tags?post=87208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}