{"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\/es\/blog\/administrirovanie\/sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react","title":{"rendered":"Sentry monitoreo remoto de errores en aplicaciones frontend de React","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Estamos explorando el uso de Sentry con React.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry monitoreo remoto de errores en aplicaciones frontend de React\" src=\"\/wp-content\/uploads\/2020\/07\/6ea51ae73accae0c36e0130b830c1ca2.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Este art\u00edculo es parte de una serie que comienza con un informe de errores de Sentry utilizando: <noindex><a rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/post\/508686\/\">Parte 1<\/a><\/noindex>. <\/p>\n<p><noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<p><strong>Implementaci\u00f3n de React<\/strong> <\/p>\n<p><\/p>\n<p>Primero necesitamos agregar un nuevo proyecto Sentry para esta aplicaci\u00f3n desde el sitio web de Sentry. En este caso, elegimos React.<\/p>\n<p><\/p>\n<p>Volvemos a implementar nuestros dos botones, Hello y Error, en la aplicaci\u00f3n React. Comenzamos creando nuestra aplicaci\u00f3n inicial:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">npx create-react-app react-app<\/code><\/pre>\n<p><\/p>\n<p>Luego importamos el paquete Sentry:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">yarn add @sentry\/browser<\/code><\/pre>\n<p><\/p>\n<p>y lo inicializamos:<\/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>Observaciones:<\/p>\n<p><\/p>\n<ul>\n<li>Durante el desarrollo, tenemos otros mecanismos para observar problemas, como la consola, por lo que solo activamos Sentry para las compilaciones de producci\u00f3n.<\/li>\n<\/ul>\n<p><\/p>\n<p>Luego implementamos nuestros botones Hello y Error y los a\u00f1adimos a la aplicaci\u00f3n:<\/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          Hola\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;Hola Mundo&#039;,\n    });\n    try {\n      throw new Error(&#039;Capturado&#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\">... \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>Problema (Mapas de Origen)<\/strong><\/p>\n<p><\/p>\n<p>Podemos probar Sentry con una compilaci\u00f3n de producci\u00f3n ingresando:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">yarn build<\/code><\/pre>\n<p><\/p>\n<p>y desde la carpeta build, ingresamos:<\/p>\n<p><\/p>\n<pre><code class=\"plaintext\">npx http-server -c-1<\/code><\/pre>\n<p><\/p>\n<p>El problema con el que nos enfrentaremos de inmediato es que los registros de errores de Sentry hacen referencia a n\u00fameros de l\u00ednea en el paquete minimizado; no es muy \u00fatil.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry monitoreo remoto de errores en aplicaciones frontend de React\" src=\"\/wp-content\/uploads\/2020\/07\/e5b320f731249bad65a82e33c4e09b43.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>El servicio Sentry explica esto obteniendo los mapas de origen para el paquete minimizado despu\u00e9s de recibir el error. En este caso, estamos corriendo desde localhost (no accesible por Sentry).<\/p>\n<p><\/p>\n<p><strong>Soluciones (Mapas de Origen)<\/strong><\/p>\n<p><\/p>\n<p>La soluci\u00f3n a este problema implica ejecutar la aplicaci\u00f3n desde un servidor web p\u00fablico. Una opci\u00f3n sencilla es utilizar el servicio Pages de GitHub (gratis). Los pasos para utilizarlo generalmente son los siguientes:<\/p>\n<p><\/p>\n<ol>\n<li>\n<p>Copie el contenido de la carpeta <em>build<\/em> a la carpeta <em>docs<\/em> en la ra\u00edz del repositorio.<\/p>\n<p>\n<\/li>\n<li>\n<p>Habilite <em>GitHub Pages<\/em> en el repositorio (desde GitHub) para usar la carpeta docs en <em>master<\/em> la rama<\/p>\n<p>\n<\/li>\n<li>\n<p>Suba los cambios a GitHub<\/p>\n<p>\n<\/li>\n<\/ol>\n<p><\/p>\n<p><strong>Nota<\/strong>: despu\u00e9s de darme cuenta de que necesitaba usar <em>create-create-app<\/em> la funci\u00f3n homepage para lanzar la aplicaci\u00f3n. Se redujo a agregar lo siguiente a 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 versi\u00f3n final de la aplicaci\u00f3n en ejecuci\u00f3n est\u00e1 disponible en:<\/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>Ilustraci\u00f3n de Errores Capturados<\/strong><\/p>\n<p><\/p>\n<p>Vamos a revisar lo que sucede al presionar el bot\u00f3n Hello.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry monitoreo remoto de errores en aplicaciones frontend de React\" src=\"\/wp-content\/uploads\/2020\/07\/1dbe7845b2e3d04933344d3d18dac01f.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Con el error apareciendo de la siguiente manera:<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry monitoreo remoto de errores en aplicaciones frontend de React\" src=\"\/wp-content\/uploads\/2020\/07\/621f0f12eb77b7dd413d168c35c141d4.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Observaciones:<\/p>\n<p><\/p>\n<ul>\n<li>Este informe de error no podr\u00eda ser m\u00e1s claro, <strong>\u00a1BRAVO!<\/strong>.<\/li>\n<\/ul>\n<p><\/p>\n<p><strong>Ilustraci\u00f3n de Errores No Capturados<\/strong><\/p>\n<p><\/p>\n<p>De manera similar, vamos a revisar lo que sucede al presionar el bot\u00f3n. <em>Error<\/em>.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry monitoreo remoto de errores en aplicaciones frontend de React\" src=\"\/wp-content\/uploads\/2020\/07\/65c07bc6db9f6b577ecb79dfd3336b38.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p>Con el error apareciendo de la siguiente manera:<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry monitoreo remoto de errores en aplicaciones frontend de React\" src=\"\/wp-content\/uploads\/2020\/07\/f4d668075885bb66ce0158588bff038c.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p><strong>La mejor gesti\u00f3n de errores no capturados (renderizado)<\/strong><\/p>\n<p><\/p>\n<blockquote><p>Introducci\u00f3n a los L\u00edmites de Errores<\/p>\n<p>Un error de JavaScript en una parte de la interfaz de usuario no debe interrumpir el funcionamiento de toda la aplicaci\u00f3n. Para resolver este problema para los usuarios de React, React 16 introduce el nuevo concepto de \"l\u00edmites de errores\".<\/p>\n<p>Los l\u00edmites de errores son componentes de React que atrapan errores de JavaScript en cualquier parte de su \u00e1rbol de componentes hijo, registran esos errores y muestran una interfaz de usuario de reserva en lugar del \u00e1rbol de componentes que se rompi\u00f3. Los l\u00edmites de errores capturan errores durante el renderizado, en los m\u00e9todos del ciclo de vida y en los constructores de todo el \u00e1rbol debajo de ellos.<\/p>\n<p>\u2026<\/p>\n<p>Nuevo comportamiento para errores no detectados<\/p>\n<p>Este cambio es significativo. A partir de React 16, los errores que no sean capturados por ning\u00fan l\u00edmite de errores resultar\u00e1n en el desmontaje de todo el \u00e1rbol de componentes de 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>Manejo de Errores en React 16<\/em><\/a><\/noindex><\/p><\/blockquote>\n<p>Una aclaraci\u00f3n importante que me llev\u00f3 un tiempo entender es que <strong>el comportamiento mencionado anteriormente solo funciona con errores generados en el m\u00e9todo de renderizado (o, m\u00e1s probablemente, en cualquiera de los m\u00e9todos del ciclo de vida)<\/strong>. Por ejemplo, usar l\u00edmites de errores no ser\u00eda \u00fatil con nuestro bot\u00f3n <em>Error<\/em>; este error estaba en el controlador de clics.<\/p>\n<p><\/p>\n<p>Creemos un ejemplo de error de visualizaci\u00f3n y luego usemos l\u00edmites de errores para una gesti\u00f3n de errores m\u00e1s elegante.<\/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          Error de renderizado\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>Observaci\u00f3n:<\/p>\n<p><\/p>\n<ul>\n<li>\n<p>Al hacer clic en el bot\u00f3n, <em>React<\/em> se mostrar\u00e1 <em>flag.busted.bogus<\/em>, que genera un error<\/p>\n<p>\n<\/li>\n<li>\n<p>Sin l\u00edmite de errores, todo el \u00e1rbol de componentes se desmontar\u00e1.<\/p>\n<p>\n<\/li>\n<\/ul>\n<p><\/p>\n<p>Luego, escribimos nuestro c\u00f3digo de l\u00edmite de errores (utiliza el nuevo m\u00e9todo del ciclo de vida <em>componentDidCatch<\/em>); este es esencialmente el ejemplo proporcionado en el art\u00edculo 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;Algo sali&oacute; mal.&lt;\/h1&gt;;\n    }\n    return this.props.children;\n  }\n}<\/code><\/pre>\n<p><\/p>\n<p>Finalmente, usamos este componente:<\/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>As\u00ed, al hacer clic en el bot\u00f3n Render Error se muestra la interfaz de usuario de reserva y se informa del error a Sentry.<\/p>\n<p><\/p>\n<p><img decoding=\"async\" alt=\"Sentry monitoreo remoto de errores en aplicaciones frontend de 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 monitoreo remoto de errores en aplicaciones frontend de React\" src=\"\/wp-content\/uploads\/2020\/07\/58183f6f6aef124e8d14acaaf7e0d4fe.jpg\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<p><\/p>\n<p><strong>Conclusi\u00f3n<\/strong><\/p>\n<p><\/p>\n<p>Espero que te haya sido \u00fatil.<\/p>\n<p><\/p>\n<p>P.D. <noindex><a rel=\"nofollow\" href=\"https:\/\/medium.com\/@johntucker_48673\/sentry-error-reporting-by-example-part-2-cd7b2f653be4\">Enlace al original<\/a><\/noindex> <\/p>\n<p><\/p>\n<p>P.S. Chat de Telegram sobre Sentry <noindex><a rel=\"nofollow\" href=\"https:\/\/t.me\/sentry_ru\">https:\/\/t.me\/sentry_ru<\/a><\/noindex><\/p>\n<p>Fuente: <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\/es\/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=\"es_ES\" \/>\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\/es\/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 monitoreo remoto de errores en aplicaciones frontend de React | ProHoster","description":"Estamos explorando el uso de Sentry con React.","canonical_url":"https:\/\/prohoster.info\/es\/blog\/administrirovanie\/sentry-udalennyj-monitoring-bagov-v-frontend-prilozheniyah-react","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"es_ES","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\/es\/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\/es\/wp-json\/wp\/v2\/posts\/87208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/comments?post=87208"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/posts\/87208\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/media\/87209"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/media?parent=87208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/categories?post=87208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/tags?post=87208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}