{"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\/fr\/blog\/administrirovanie\/sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react","title":{"rendered":"Sentry pour la surveillance \u00e0 distance des bugs dans les applications frontend React","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Nous \u00e9tudions l'utilisation de Sentry avec React.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry pour la surveillance \u00e0 distance des bugs dans les applications frontend React\" src=\"\/wp-content\/uploads\/2020\/07\/6ea51ae73accae0c36e0130b830c1ca2.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Cet article fait partie d'une s\u00e9rie qui commence par un message sur les erreurs Sentry en exemple : <noindex><a rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/post\/508686\/\">Partie 1<\/a><\/noindex>. <\/p>\n<p><noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<p><strong>Mise en \u0153uvre de React<\/strong> <\/p>\n<p><\/p>\n<p>Tout d'abord, nous devons ajouter un nouveau projet Sentry pour cette application ; depuis le site de Sentry. Dans ce cas, nous choisissons React.<\/p>\n<p><\/p>\n<p>Nous r\u00e9impl\u00e9mentons nos deux boutons, Hello et Error, dans l'application React. Nous commen\u00e7ons par cr\u00e9er notre application de d\u00e9marrage :<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">npx create-react-app react-app<\/code><\/pre>\n<p><\/p>\n<p>Ensuite, nous importons le package Sentry :<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">yarn add @sentry\/browser<\/code><\/pre>\n<p><\/p>\n<p>et nous l'initialisons :<\/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>Observations :<\/p>\n<p><\/p>\n<ul>\n<li>Pendant le d\u00e9veloppement, nous avons d'autres m\u00e9canismes pour observer les probl\u00e8mes, comme la console, donc nous activons Sentry uniquement pour les versions de production<\/li>\n<\/ul>\n<p><\/p>\n<p>Ensuite, nous impl\u00e9mentons nos boutons Hello et Error et les ajoutons \u00e0 l'application :<\/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          Bonjour\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;Bonjour le monde&#039;,\n    });\n    try {\n      throw new Error(&#039;Attrap&eacute;&#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>Probl\u00e8me (Cartes Sources)<\/strong><\/p>\n<p><\/p>\n<p>Nous pouvons tester Sentry avec une version de production en entrant :<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">yarn build<\/code><\/pre>\n<p><\/p>\n<p>et depuis le dossier build, tapez :<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">npx http-server -c-1<\/code><\/pre>\n<p><\/p>\n<p>Le probl\u00e8me auquel nous allons imm\u00e9diatement faire face est que les enregistrements d'erreurs Sentry font r\u00e9f\u00e9rence \u00e0 des num\u00e9ros de lignes dans le package minifi\u00e9 ; ce n'est pas tr\u00e8s utile.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry pour la surveillance \u00e0 distance des bugs dans les applications frontend React\" src=\"\/wp-content\/uploads\/2020\/07\/e5b320f731249bad65a82e33c4e09b43.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Le service Sentry explique cela en tirant les cartes sources pour le package minifi\u00e9 apr\u00e8s r\u00e9ception de l'erreur. Dans ce cas, nous courons depuis localhost (non accessible par le service Sentry).<\/p>\n<p><\/p>\n<p><strong>Solutions (Cartes Sources)<\/strong><\/p>\n<p><\/p>\n<p>La solution \u00e0 ce probl\u00e8me consiste \u00e0 ex\u00e9cuter l'application depuis un serveur Web public. Un moyen simple de r\u00e9pondre \u00e0 cela est d'utiliser le service GitHub Pages (gratuit). Les \u00e9tapes \u00e0 suivre sont g\u00e9n\u00e9ralement les suivantes :<\/p>\n<p><\/p>\n<ol>\n<li>\n<p>Copiez le contenu du dossier <em>build<\/em> dans le dossier <em>docs<\/em> dans le r\u00e9pertoire racine du d\u00e9p\u00f4t.<\/p>\n<p>\n<\/li>\n<li>\n<p>Activez <em>GitHub Pages<\/em> dans le d\u00e9p\u00f4t (depuis GitHub) pour utiliser le dossier docs dans <em>master<\/em> la branche<\/p>\n<p>\n<\/li>\n<li>\n<p>Poussez les modifications sur GitHub<\/p>\n<p>\n<\/li>\n<\/ol>\n<p><\/p>\n<p><strong>Remarque<\/strong>: apr\u00e8s avoir compris que je devais utiliser <em>create-react-app<\/em> la fonction homepage pour ex\u00e9cuter l'application. Cela a consist\u00e9 \u00e0 ajouter ce qui suit dans le 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>La version finale de l'application lanc\u00e9e est disponible \u00e0 l'adresse :<\/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>Illustration des Erreurs Captur\u00e9es<\/strong><\/p>\n<p><\/p>\n<p>Passons \u00e0 travers l'appui sur le bouton Hello.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry pour la surveillance \u00e0 distance des bugs dans les applications frontend React\" src=\"\/wp-content\/uploads\/2020\/07\/1dbe7845b2e3d04933344d3d18dac01f.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Avec l'erreur apparaissant comme suit :<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry pour la surveillance \u00e0 distance des bugs dans les applications frontend React\" src=\"\/wp-content\/uploads\/2020\/07\/621f0f12eb77b7dd413d168c35c141d4.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Observations :<\/p>\n<p><\/p>\n<ul>\n<li>Ce rapport d'erreur ne pourrait pas \u00eatre plus clair, <strong>BRAVO<\/strong>.<\/li>\n<\/ul>\n<p><\/p>\n<p><strong>Illustration des Erreurs Non Captur\u00e9es<\/strong><\/p>\n<p><\/p>\n<p>De m\u00eame, passons \u00e0 travers l'appui sur le bouton <em>Error<\/em>.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry pour la surveillance \u00e0 distance des bugs dans les applications frontend React\" src=\"\/wp-content\/uploads\/2020\/07\/65c07bc6db9f6b577ecb79dfd3336b38.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Avec l'erreur apparaissant comme suit :<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry pour la surveillance \u00e0 distance des bugs dans les applications frontend React\" src=\"\/wp-content\/uploads\/2020\/07\/f4d668075885bb66ce0158588bff038c.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p><strong>La meilleure gestion des erreurs non d\u00e9tect\u00e9es (rendu)<\/strong><\/p>\n<p><\/p>\n<blockquote><p>Introduction aux Limites d'Erreur<\/p>\n<p>Une erreur JavaScript dans une partie de l'interface utilisateur ne doit pas perturber le fonctionnement de l'ensemble de l'application. Pour r\u00e9soudre ce probl\u00e8me pour les utilisateurs de React, React 16 introduit le nouveau concept de \"fronti\u00e8res d'erreur\".<\/p>\n<p>Les limites d'erreur sont des composants React qui interceptent les erreurs JavaScript \u00e0 n'importe quel endroit de leur arbre de composants enfants, enregistrent ces erreurs et affichent une interface utilisateur de secours au lieu de l'arbre de composants qui a \u00e9chou\u00e9. Les limites d'erreur attrapent les erreurs pendant le rendu, dans les m\u00e9thodes du cycle de vie et dans les constructeurs de tout l'arbre en dessous.<\/p>\n<p>\u2026<\/p>\n<p>Un nouveau comportement pour les erreurs non d\u00e9tect\u00e9es<\/p>\n<p>Ce changement est important. \u00c0 partir de React 16, les erreurs qui ne sont pas prises en charge par une limite d'erreur entra\u00eeneront le d\u00e9montage de tout l'arbre de composants 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>Gestion des Erreurs dans React 16<\/em><\/a><\/noindex><\/p><\/blockquote>\n<p>Une pr\u00e9cision importante qui m'a pris un certain temps \u00e0 comprendre est que <strong>le comportement susmentionn\u00e9 ne fonctionne qu'avec les erreurs g\u00e9n\u00e9r\u00e9es dans la m\u00e9thode de rendu (ou, plus probablement, dans l'une des m\u00e9thodes du cycle de vie)<\/strong>. Par exemple, l'utilisation des limites d'erreur n'apporterait aucun avantage avec notre bouton <em>Error<\/em>; cette erreur se trouvait dans le gestionnaire de clics.<\/p>\n<p><\/p>\n<p>Cr\u00e9ons un exemple d'erreur de rendu, puis utilisons les limites d'erreur pour une gestion d'erreur plus \u00e9l\u00e9gante.<\/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          Erreur de rendu\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>Observation :<\/p>\n<p><\/p>\n<ul>\n<li>\n<p>Lorsqu'on clique sur le bouton, <em>React<\/em> il sera affich\u00e9 <em>flag.busted.bogus<\/em>, qui g\u00e9n\u00e8re une erreur<\/p>\n<p>\n<\/li>\n<li>\n<p>Sans limite d'erreur, tout l'arbre de composants sera d\u00e9mont\u00e9.<\/p>\n<p>\n<\/li>\n<\/ul>\n<p><\/p>\n<p>Ensuite, nous \u00e9crivons notre code de limite d'erreur (utilisant la nouvelle m\u00e9thode du cycle de vie <em>componentDidCatch<\/em>); c'est fondamentalement un exemple tir\u00e9 de l'article de Dan Abramov :<\/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;Un probl&egrave;me est survenu.&lt;\/h1&gt;;\n    }\n    return this.props.children;\n  }\n}<\/code><\/pre>\n<p><\/p>\n<p>Enfin, nous utilisons ce composant :<\/p>\n<p><\/p>\n<p><em>react-app \/ src \/ App.js<\/em><\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">...\nimport 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>Ainsi, cliquer sur le bouton Render Error affiche l'interface utilisateur de secours et signale l'erreur \u00e0 Sentry.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry pour la surveillance \u00e0 distance des bugs dans les applications 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 pour la surveillance \u00e0 distance des bugs dans les applications frontend React\" src=\"\/wp-content\/uploads\/2020\/07\/58183f6f6aef124e8d14acaaf7e0d4fe.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p><strong>Fin<\/strong><\/p>\n<p><\/p>\n<p>J'esp\u00e8re que cela vous a \u00e9t\u00e9 utile.<\/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\">Lien vers l'original<\/a><\/noindex> <\/p>\n<p><\/p>\n<p>P.S. Chat Telegram sur Sentry <noindex><a rel=\"nofollow\" href=\"https:\/\/t.me\/sentry_ru\">https:\/\/t.me\/sentry_ru<\/a><\/noindex><\/p>\n<p>Source : <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.2 - 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\/fr\/blog\/administrirovanie\/sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.2\" \/>\n\t\t<meta property=\"og:locale\" content=\"fr_FR\" \/>\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\/fr\/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 surveillance des bugs distants dans les applications frontend React | ProHoster","description":"Nous \u00e9tudions l'utilisation de Sentry avec React.","canonical_url":"https:\/\/prohoster.info\/fr\/blog\/administrirovanie\/sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"fr_FR","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\/fr\/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\/fr\/wp-json\/wp\/v2\/posts\/87208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/comments?post=87208"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/posts\/87208\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/media\/87209"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/media?parent=87208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/categories?post=87208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/tags?post=87208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}