{"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\/sq\/blog\/administrirovanie\/sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react","title":{"rendered":"Sentry monitorim t\u00eb larg\u00ebt p\u00ebr defektet n\u00eb aplikacionet frontend React","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Ne jemi duke studiuar p\u00ebrdorimin e Sentry me React.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry monitorim t\u00eb larg\u00ebt p\u00ebr defektet n\u00eb aplikacionet frontend React\" src=\"\/wp-content\/uploads\/2020\/07\/6ea51ae73accae0c36e0130b830c1ca2.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Ky artikull \u00ebsht\u00eb pjes\u00eb e nj\u00eb serie q\u00eb fillon me mesazhet e gabimeve n\u00eb Sentry si shembull: <noindex><a rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/post\/508686\/\">Pjesa 1<\/a><\/noindex>. <\/p>\n<p><noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<p><strong>Implementimi i React<\/strong> <\/p>\n<p><\/p>\n<p>S\u00eb pari, na nevojitet t\u00eb shtojm\u00eb nj\u00eb projekt t\u00eb ri Sentry p\u00ebr k\u00ebt\u00eb aplikacion; nga faqja e internetit t\u00eb Sentry. N\u00eb k\u00ebt\u00eb rast, ne zgjedhim React.<\/p>\n<p><\/p>\n<p>Ne p\u00ebrs\u00ebrisim implementimin e dy butonave tan\u00eb, Hello dhe Error, n\u00eb aplikacionin me React. Fillojm\u00eb duke krijuar aplikacionin ton\u00eb t\u00eb fillimit:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">npx create-react-app react-app<\/code><\/pre>\n<p><\/p>\n<p>Pastaj importojm\u00eb paket\u00ebn Sentry:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">yarn add @sentry\/browser<\/code><\/pre>\n<p><\/p>\n<p>dhe e inicializojm\u00eb at\u00eb:<\/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>V\u00ebzhgimet:<\/p>\n<p><\/p>\n<ul>\n<li>Gjat\u00eb zhvillimit ne kemi mekanizma t\u00eb tjera p\u00ebr v\u00ebzhgimin e problemeve, si\u00e7 \u00ebsht\u00eb konsola, prandaj e aktivizojm\u00eb Sentry vet\u00ebm p\u00ebr nd\u00ebrtimet n\u00eb prodhim.<\/li>\n<\/ul>\n<p><\/p>\n<p>Pastaj implementojm\u00eb butonat tan\u00eb Hello dhe Error dhe i shtojm\u00eb ato n\u00eb aplikacion:<\/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 &#039;react&#039;;\nimport * as Sentry from &#039;@sentry\/browser&#039;;\n\nexport default class Hello extends Component {\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          Hello\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;Hello World&#039;,\n    });\n    try {\n      throw new Error(&#039;Caught&#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          Gabim\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\">...\\nimport 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>Problemi (Hartat e Burimeve)<\/strong><\/p>\n<p><\/p>\n<p>Ne mund t\u00eb testojm\u00eb Sentry me nj\u00eb nd\u00ebrtim n\u00eb prodhim duke futur:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">yarn build<\/code><\/pre>\n<p><\/p>\n<p>dhe nga dosja build futni:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">npx http-server -c-1<\/code><\/pre>\n<p><\/p>\n<p>Problemi me t\u00eb cilin do t\u00eb p\u00ebrballemi menj\u00ebher\u00eb \u00ebsht\u00eb se regjistrimet e gabimeve t\u00eb Sentry iu referohen numrave t\u00eb rreshtave n\u00eb paket\u00ebn e zvog\u00ebluar; nuk \u00ebsht\u00eb shum\u00eb e dobishme.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry monitorim t\u00eb larg\u00ebt p\u00ebr defektet n\u00eb aplikacionet frontend React\" src=\"\/wp-content\/uploads\/2020\/07\/e5b320f731249bad65a82e33c4e09b43.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Sh\u00ebrbimi Sentry e shpjegon k\u00ebt\u00eb duke t\u00ebrhequr hartat origjinale p\u00ebr paket\u00ebn e zvog\u00ebluar pas marrjes s\u00eb gabimit. N\u00eb k\u00ebt\u00eb rast, ne ikim nga localhost (n\u00eb dispozit\u00eb t\u00eb sh\u00ebrbimit Sentry).<\/p>\n<p><\/p>\n<p><strong>Zgjidhjet (Harta Origjinale)<\/strong><\/p>\n<p><\/p>\n<p>Zgjidhja e k\u00ebtij problemi p\u00ebrfshin ekzekutimin e aplikacionit nga nj\u00eb server web publik. Nj\u00eb buton i thjesht\u00eb p\u00ebrgjigjeje p\u00ebr k\u00ebt\u00eb \u00ebsht\u00eb t\u00eb p\u00ebrdorni sh\u00ebrbimin GitHub Pages (falas). Hapat p\u00ebr t'u p\u00ebrdorur zakonisht jan\u00eb si m\u00eb posht\u00eb:<\/p>\n<p><\/p>\n<ol>\n<li>\n<p>Kopjoni p\u00ebrmbajtjen e dosjes <em>nd\u00ebrto<\/em> n\u00eb dosjen <em>docs<\/em> n\u00eb direktorin\u00eb kryesore t\u00eb repositorit.<\/p>\n<p>\n<\/li>\n<li>\n<p>Aktivizoni <em>GitHub Pages<\/em> n\u00eb repositorin (nga GitHub), p\u00ebr t\u00eb p\u00ebrdorur dosjen docs n\u00eb <em>master<\/em> deg\u00ebn<\/p>\n<p>\n<\/li>\n<li>\n<p>Transferoni ndryshimet n\u00eb GitHub<\/p>\n<p>\n<\/li>\n<\/ol>\n<p><\/p>\n<p><strong>Sh\u00ebnim<\/strong>: pasi kuptova se duhej t\u00eb p\u00ebrdorja <em>create-create-app<\/em> funkcioni i faqes kryesore p\u00ebr t\u00eb nisur aplikacionin. U soll n\u00eb shtimin e m\u00ebposht\u00ebm n\u00eb package.json:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">\"homepage\": \"https:\/\/larkintuckerllc.github.io\/hello-sentry\/\"<\/code><\/pre>\n<p><\/p>\n<p>Versioni p\u00ebrfundimtar i aplikacionit t\u00eb nisur \u00ebsht\u00eb i disponuesh\u00ebm n\u00eb:<\/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>Ilustrimi i Gabimeve t\u00eb Kapura<\/strong><\/p>\n<p><\/p>\n<p>Le t\u00eb kalojm\u00eb p\u00ebrmes shtypjes s\u00eb butonit Hello.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry monitorim t\u00eb larg\u00ebt p\u00ebr defektet n\u00eb aplikacionet frontend React\" src=\"\/wp-content\/uploads\/2020\/07\/1dbe7845b2e3d04933344d3d18dac01f.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Me nj\u00eb gabim q\u00eb shfaqet si m\u00eb posht\u00eb:<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry monitorim t\u00eb larg\u00ebt p\u00ebr defektet n\u00eb aplikacionet frontend React\" src=\"\/wp-content\/uploads\/2020\/07\/621f0f12eb77b7dd413d168c35c141d4.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>V\u00ebzhgimet:<\/p>\n<p><\/p>\n<ul>\n<li>Ky k\u00ebtij raporti p\u00ebr gabimin nuk mund t\u00eb jet\u00eb m\u00eb i qart\u00eb, <strong>BRAVO<\/strong>.<\/li>\n<\/ul>\n<p><\/p>\n<p><strong>Ilustrimi i Gabimeve t\u00eb Pashikueshme<\/strong><\/p>\n<p><\/p>\n<p>Po ashtu, le t\u00eb kalojm\u00eb p\u00ebrmes shtypjes s\u00eb butonit <em>Gabim<\/em>.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry monitorim t\u00eb larg\u00ebt p\u00ebr defektet n\u00eb aplikacionet frontend React\" src=\"\/wp-content\/uploads\/2020\/07\/65c07bc6db9f6b577ecb79dfd3336b38.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Me nj\u00eb gabim q\u00eb shfaqet si m\u00eb posht\u00eb:<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry monitorim t\u00eb larg\u00ebt p\u00ebr defektet n\u00eb aplikacionet frontend React\" src=\"\/wp-content\/uploads\/2020\/07\/f4d668075885bb66ce0158588bff038c.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p><strong>Trajtimi m\u00eb i mir\u00eb i gabimeve t\u00eb pashikueshme (renderim)<\/strong><\/p>\n<p><\/p>\n<blockquote><p>Hyrja n\u00eb Kufijt\u00eb e Gabimeve<\/p>\n<p>Gabimi i JavaScript n\u00eb pjes\u00ebn e nd\u00ebrfaqes s\u00eb p\u00ebrdoruesit nuk duhet t\u00eb prish\u00eb funksionimin e t\u00ebr\u00eb aplikacionit. P\u00ebr t\u00eb adresuar k\u00ebt\u00eb problem p\u00ebr p\u00ebrdoruesit e React, React 16 prezanton nj\u00eb koncept t\u00eb ri \"kufijsh t\u00eb gabimit\".<\/p>\n<p>Kufijt\u00eb e gabimeve jan\u00eb komponent\u00eb t\u00eb React q\u00eb kapin gabime JavaScript n\u00eb \u00e7do pjes\u00eb t\u00eb pem\u00ebs s\u00eb komponent\u00ebve t\u00eb tyre t\u00eb bij, regjistrojn\u00eb k\u00ebto gabime dhe shfaqin nj\u00eb nd\u00ebrfaqe rezerv\u00eb t\u00eb p\u00ebrdoruesit n\u00eb vend t\u00eb pem\u00ebs s\u00eb komponent\u00ebve q\u00eb ka d\u00ebshtuar. Kufijt\u00eb e gabimeve kapin gabime gjat\u00eb renderimit, n\u00eb metodat e ciklit t\u00eb jet\u00ebs dhe n\u00eb konstruktor\u00ebt e t\u00ebr\u00eb pem\u00ebs n\u00ebn ta.<\/p>\n<p>\u2026<\/p>\n<p>Sjellja e re p\u00ebr gabimet e pa zbuluara<\/p>\n<p>Ky ndryshim \u00ebsht\u00eb i r\u00ebnd\u00ebsish\u00ebm. Duke filluar nga React 16, gabimet q\u00eb nuk kapen nga ndonj\u00eb kufi gabimi do t\u00eb \u00e7ojn\u00eb n\u00eb shk\u00ebputjen e t\u00ebr\u00eb pem\u00ebs s\u00eb komponent\u00ebve t\u00eb React.<\/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>Trajtimi i Gabimeve n\u00eb React 16<\/em><\/a><\/noindex><\/p><\/blockquote>\n<p>Nj\u00eb sqarim i r\u00ebnd\u00ebsish\u00ebm q\u00eb m\u00eb ka marr\u00eb nj\u00eb koh\u00eb p\u00ebr ta kuptuar \u00ebsht\u00eb se <strong>sjellja e p\u00ebrmendur m\u00eb par\u00eb funksionon vet\u00ebm me gabimet q\u00eb gjenerohen n\u00eb metod\u00ebn e renderimit (ose, m\u00eb e mundshme, n\u00eb cil\u00ebndo nga metodat e ciklit t\u00eb jet\u00ebs)<\/strong>. P\u00ebr shembull, p\u00ebrdorimi i kufijve t\u00eb gabimeve nuk do t\u00eb kishte ndihmuar me butonin ton\u00eb <em>Gabim<\/em>; kjo gabim ishte n\u00eb trajtuesin e klikimeve.<\/p>\n<p><\/p>\n<p>Le t\u00eb krijojm\u00eb nj\u00eb shembull t\u00eb nj\u00eb gabimi vizualizimi dhe pastaj t\u00eb p\u00ebrdorim kufijt\u00eb e gabimeve p\u00ebr trajtimin m\u00eb elegant t\u00eb gabimeve.<\/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          Gabimi gjat&euml; Renderimit\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>V\u00ebrejtje:<\/p>\n<p><\/p>\n<ul>\n<li>\n<p>Kur klikohet butoni, <em>React<\/em> do t\u00eb shfaqet <em>flag.busted.bogus<\/em>, q\u00eb gjeneron nj\u00eb gabim<\/p>\n<p>\n<\/li>\n<li>\n<p>Pa kufirin e gabimeve, e gjith\u00eb struktura e komponenteve do t\u00eb ishte \u00e7montuar<\/p>\n<p>\n<\/li>\n<\/ul>\n<p><\/p>\n<p>Pastaj shkruajm\u00eb kodin ton\u00eb t\u00eb kufirit t\u00eb gabimeve (p\u00ebrdor metod\u00ebn e re t\u00eb ciklit t\u00eb jet\u00ebs <em>componentDidCatch<\/em>); kjo \u00ebsht\u00eb, n\u00eb thelb, nj\u00eb shembull i sjell\u00eb n\u00eb artikullin e Dan Abramovit:<\/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;Di&ccedil;ka shkoi keq.&lt;\/h1&gt;;\n    }\n    return this.props.children;\n  }\n}<\/code><\/pre>\n<p><\/p>\n<p>M\u00eb n\u00eb fund, p\u00ebrdorim k\u00ebt\u00eb komponent:<\/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>Me k\u00ebt\u00eb, klikimi i butonit Render Error shfaq nj\u00eb nd\u00ebrfaqe rezerv\u00eb dhe raporton gabimin n\u00eb Sentry.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry monitorim t\u00eb larg\u00ebt p\u00ebr defektet n\u00eb aplikacionet frontend React\" 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 monitorim t\u00eb larg\u00ebt p\u00ebr defektet n\u00eb aplikacionet frontend React\" src=\"\/wp-content\/uploads\/2020\/07\/58183f6f6aef124e8d14acaaf7e0d4fe.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p><strong>P\u00ebrfundimi<\/strong><\/p>\n<p><\/p>\n<p>Shpresoj se kjo ishte e dobishme p\u00ebr ju.<\/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\">Linku n\u00eb origjinal<\/a><\/noindex> <\/p>\n<p><\/p>\n<p>P.S. Biseda n\u00eb Telegram p\u00ebr Sentry <noindex><a rel=\"nofollow\" href=\"https:\/\/t.me\/sentry_ru\">https:\/\/t.me\/sentry_ru<\/a><\/noindex><\/p>\n<p>Burimi: <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 4.9.10 - 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. \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\" \/>\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\/sq\/blog\/administrirovanie\/sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"sq_AL\" \/>\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. \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\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/sq\/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 monitorimi i larg\u00ebt i gabimeve n\u00eb aplikacionet front-end React | ProHoster","description":"Ne pohojm\u00eb p\u00ebrdorimin e Sentry me React. Ky artikull \u00ebsht\u00eb pjes\u00eb e nj\u00eb serie, q\u00eb fillon me mesazhin e gabimeve Sentry si shembull: Pjesa 1. Implementimi i React. Fillimisht, na nevojitet t\u00eb shtojm\u00eb nj\u00eb projekt t\u00eb ri Sentry p\u00ebr k\u00ebt\u00eb aplikacion; nga faqja e internetit t\u00eb Sentry. N\u00eb k\u00ebt\u00eb rast, ne zgjidhim React. Ne do t\u00eb rikthejm\u00eb dy butonat tan\u00eb, Hello dhe Error, n\u00eb aplikacionin React.","canonical_url":"https:\/\/prohoster.info\/sq\/blog\/administrirovanie\/sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"sq_AL","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. \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","og:url":"https:\/\/prohoster.info\/sq\/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"},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/posts\/87208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/comments?post=87208"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/posts\/87208\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/media\/87209"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/media?parent=87208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/categories?post=87208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/tags?post=87208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}