{"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\/de\/blog\/administrirovanie\/sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react","title":{"rendered":"Sentry Fern\u00fcberwachung von Bugs in Frontend-Anwendungen mit React","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Wir lernen die Verwendung von Sentry mit React.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry Fern\u00fcberwachung von Bugs in Frontend-Anwendungen mit React\" src=\"\/wp-content\/uploads\/2020\/07\/6ea51ae73accae0c36e0130b830c1ca2.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Dieser Artikel ist Teil einer Reihe, die mit der Fehlermeldung von Sentry anhand des Beispiels beginnt: <noindex><a rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/post\/508686\/\">Teil 1<\/a><\/noindex>. <\/p>\n<p><noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<p><strong>React-Implementierung<\/strong> <\/p>\n<p><\/p>\n<p>Zuerst m\u00fcssen wir ein neues Sentry-Projekt f\u00fcr diese Anwendung hinzuf\u00fcgen; von der Sentry-Website. In diesem Fall w\u00e4hlen wir React aus.<\/p>\n<p><\/p>\n<p>Wir implementieren erneut unsere beiden Tasten, Hello und Error, in der React-Anwendung. Wir beginnen mit der Erstellung unserer Startanwendung:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">npx create-react-app react-app<\/code><\/pre>\n<p><\/p>\n<p>Dann importieren wir das Sentry-Paket:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">yarn add @sentry\/browser<\/code><\/pre>\n<p><\/p>\n<p>und initialisieren es:<\/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>Beobachtungen:<\/p>\n<p><\/p>\n<ul>\n<li>W\u00e4hrend der Entwicklung haben wir andere Mechanismen zur \u00dcberwachung von Problemen, wie die Konsole, daher aktivieren wir Sentry nur f\u00fcr Produktionsbuilds.<\/li>\n<\/ul>\n<p><\/p>\n<p>Dann implementieren wir unsere Tasten Hello und Error und f\u00fcgen sie in die Anwendung ein:<\/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          Hallo\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;Hallo Welt&#039;,\n    });\n    try {\n      throw new Error(&#039;Gefangen&#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 } von &#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          Fehler\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\">(&uuml;bersetzter Text auf Deutsch)\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>Problem (Quellkarten)<\/strong><\/p>\n<p><\/p>\n<p>Wir k\u00f6nnen Sentry mit einem Produktionsbuild testen, indem wir eingeben:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">yarn build<\/code><\/pre>\n<p><\/p>\n<p>und aus dem build-Ordner eingeben:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">npx http-server -c-1<\/code><\/pre>\n<p><\/p>\n<p>Das Problem, dem wir sofort begegnen werden, ist, dass die Sentry-Fehlerprotokolle auf Zeilennummern im minimierten Paket verweisen, was nicht sehr hilfreich ist.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry Fern\u00fcberwachung von Bugs in Frontend-Anwendungen mit React\" src=\"\/wp-content\/uploads\/2020\/07\/e5b320f731249bad65a82e33c4e09b43.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Der Sentry-Dienst erkl\u00e4rt dies, indem er die Quellkarten f\u00fcr das minimierte Paket abruft, nachdem ein Fehler aufgetreten ist. In diesem Fall laufen wir von localhost (nicht f\u00fcr den Sentry-Dienst erreichbar).<\/p>\n<p><\/p>\n<p><strong>L\u00f6sungen (Quellkarten)<\/strong><\/p>\n<p><\/p>\n<p>Die L\u00f6sung f\u00fcr dieses Problem besteht darin, die Anwendung von einem \u00f6ffentlichen Webserver auszuf\u00fchren. Eine einfache M\u00f6glichkeit, dies zu tun, ist die Nutzung des GitHub Pages-Dienstes (kostenlos). Die Schritte zur Nutzung sind normalerweise folgende:<\/p>\n<p><\/p>\n<ol>\n<li>\n<p>Kopieren Sie den Inhalt des Ordners <em>build<\/em> in den Ordner <em>docs<\/em> in das Stammverzeichnis des Repositories.<\/p>\n<p>\n<\/li>\n<li>\n<p>Aktivieren Sie <em>GitHub Pages<\/em> im Repository (aus GitHub), um den Ordner docs in <em>master<\/em> Branch<\/p>\n<p>\n<\/li>\n<li>\n<p>\u00fcbertragen Sie die \u00c4nderungen auf GitHub<\/p>\n<p>\n<\/li>\n<\/ol>\n<p><\/p>\n<p><strong>Hinweis<\/strong>: Nachdem ich erkannt habe, dass ich die <em>create-create-app<\/em> Homepage-Funktion ben\u00f6tige, um die Anwendung auszuf\u00fchren. Es beschr\u00e4nkte sich darauf, Folgendes zu package.json hinzuzuf\u00fcgen:<\/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>Die endg\u00fcltige Version der ausgef\u00fchrten Anwendung ist unter folgender Adresse verf\u00fcgbar:<\/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>Abbildung der gefangenen Fehler<\/strong><\/p>\n<p><\/p>\n<p>Lassen Sie uns den Druck der Taste Hello durchgehen.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry Fern\u00fcberwachung von Bugs in Frontend-Anwendungen mit React\" src=\"\/wp-content\/uploads\/2020\/07\/1dbe7845b2e3d04933344d3d18dac01f.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Mit einem Fehler, der wie folgt erscheint:<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry Fern\u00fcberwachung von Bugs in Frontend-Anwendungen mit React\" src=\"\/wp-content\/uploads\/2020\/07\/621f0f12eb77b7dd413d168c35c141d4.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Beobachtungen:<\/p>\n<p><\/p>\n<ul>\n<li>Dieser Fehlerbericht k\u00f6nnte nicht klarer sein, <strong>BRAVO<\/strong>.<\/li>\n<\/ul>\n<p><\/p>\n<p><strong>Illustration der nicht erfassten Fehler<\/strong><\/p>\n<p><\/p>\n<p>In \u00e4hnlicher Weise lassen Sie uns den Druck der Taste durchgehen. <em>Fehler<\/em>.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry Fern\u00fcberwachung von Bugs in Frontend-Anwendungen mit React\" src=\"\/wp-content\/uploads\/2020\/07\/65c07bc6db9f6b577ecb79dfd3336b38.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Mit einem Fehler, der wie folgt erscheint:<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry Fern\u00fcberwachung von Bugs in Frontend-Anwendungen mit React\" src=\"\/wp-content\/uploads\/2020\/07\/f4d668075885bb66ce0158588bff038c.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p><strong>Die beste Behandlung unentdeckter Fehler (Rendering)<\/strong><\/p>\n<p><\/p>\n<blockquote><p>Einf\u00fchrung der Fehlergrenzen<\/p>\n<p>Ein JavaScript-Fehler im Benutzeroberfl\u00e4chenbereich sollte die Funktionsweise der gesamten Anwendung nicht beeintr\u00e4chtigen. Um dieses Problem f\u00fcr React-Nutzer zu l\u00f6sen, f\u00fchrt React 16 das neue Konzept der &quot;Fehlergrenzen&quot; ein.<\/p>\n<p>Fehlergrenzen sind React-Komponenten, die JavaScript-Fehler \u00fcberall in ihrem darunter liegenden Komponentenbaum erfassen, diese Fehler protokollieren und eine Ersatzbenutzeroberfl\u00e4che anstelle des defekten Komponentenbaums anzeigen. Fehlergrenzen fangen Fehler w\u00e4hrend des Renderns, in den Lebenszyklusmethoden und in den Konstruktoren des gesamten darunter liegenden Baums ab.<\/p>\n<p>\u2026<\/p>\n<p>Neues Verhalten f\u00fcr unentdeckte Fehler<\/p>\n<p>Diese \u00c4nderung ist bedeutend. Ab React 16 f\u00fchren Fehler, die von keiner Fehlergrenze gefangen wurden, dazu, dass der gesamte Komponentenbaum von React demontiert wird.<\/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>Fehlerbehandlung in React 16<\/em><\/a><\/noindex><\/p><\/blockquote>\n<p>Eine wichtige Klarstellung, die ich eine Weile brauchte, um zu verstehen, ist, dass <strong>das oben genannte Verhalten nur bei Fehlern funktioniert, die im Renderverfahren (oder wahrscheinlicher in einer der Lebenszyklusmethoden) erzeugt werden<\/strong>. Beispielsweise w\u00fcrde die Verwendung von Fehlergrenzen bei unserem Knopf keinen Nutzen bringen <em>Fehler<\/em>; dieser Fehler lag im Klick-Handler.<\/p>\n<p><\/p>\n<p>Lass uns ein Beispiel f\u00fcr einen Rendering-Fehler erstellen und dann Fehlergrenzen f\u00fcr ein eleganteres Fehlerhandling verwenden.<\/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          Renderfehler\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>Beobachtung:<\/p>\n<p><\/p>\n<ul>\n<li>\n<p>Wenn der Knopf gedr\u00fcckt wird, <em>React<\/em> wird angezeigt <em>flag.busted.bogus<\/em>, was einen Fehler ausl\u00f6st<\/p>\n<p>\n<\/li>\n<li>\n<p>Ohne Fehlergrenze wird der gesamte Komponentenbaum demontiert<\/p>\n<p>\n<\/li>\n<\/ul>\n<p><\/p>\n<p>Dann schreiben wir unseren Fehlergrenzen-Code (verwendet die neue Lebenszyklusmethode <em>componentDidCatch<\/em>); dies ist im Wesentlichen ein Beispiel, das in Dans Artikel gegeben wird:<\/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;Etwas ist schiefgelaufen.&lt;\/h1&gt;;\n    }\n    return this.props.children;\n  }\n}<\/code><\/pre>\n<p><\/p>\n<p>Schlie\u00dflich verwenden wir diese Komponente:<\/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 &#039;.\/MyRenderError&#039;;\n\nclass App extends Component {\n  render() {\n    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>Dabei zeigt das Dr\u00fccken des Buttons Render Error die Ersatzbenutzeroberfl\u00e4che an und meldet den Fehler an Sentry.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry Fern\u00fcberwachung von Bugs in Frontend-Anwendungen mit 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 Fern\u00fcberwachung von Bugs in Frontend-Anwendungen mit React\" src=\"\/wp-content\/uploads\/2020\/07\/58183f6f6aef124e8d14acaaf7e0d4fe.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p><strong>Abschluss<\/strong><\/p>\n<p><\/p>\n<p>Ich hoffe, das war hilfreich.<\/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\">Link zur Originalversion<\/a><\/noindex> <\/p>\n<p><\/p>\n<p>P.S. Telegram-Chat zu Sentry <noindex><a rel=\"nofollow\" href=\"https:\/\/t.me\/sentry_ru\">https:\/\/t.me\/sentry_ru<\/a><\/noindex><\/p>\n<p>Quelle: <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\/de\/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=\"de_DE\" \/>\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\/de\/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 Fern\u00fcberwachung von Bugs in Frontend-Anwendungen von React | ProHoster","description":"Wir lernen die Verwendung von Sentry mit React.","canonical_url":"https:\/\/prohoster.info\/de\/blog\/administrirovanie\/sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"de_DE","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\/de\/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\/de\/wp-json\/wp\/v2\/posts\/87208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/comments?post=87208"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/posts\/87208\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/media\/87209"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/media?parent=87208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/categories?post=87208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/tags?post=87208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}