Por lo tanto, basta con crear un host, vincular la plantilla y rellenar las macros heredadas del host de la siguiente manera: <\/p>\n\n
- \n
- {$WEBSITE.BROWSER} – Navegador que se utilizar\u00e1 para la recopilaci\u00f3n de datos. <\/li>\n\n\n\n
- {$WEBSITE.DOMAIN} – URL que se va a utilizar <\/li>\n\n\n\n
- {$WEBSITE.GET.DATA.INTERVAL} – \u00bfCon qu\u00e9 frecuencia se llevar\u00e1 a cabo el seguimiento? <\/li>\n\n\n\n
- {$WEBSITE.NAVIGATION.LOAD.MAX.WARN} – Tiempo, en segundos, que tiene el navegador para responder antes de que se considere un incidente <\/li>\n\n\n\n
- {$WEBSITE.PATH} – Si es necesario acceder a alguna ruta distinta de la ra\u00edz (\/) del sitio web. Ej.: https:\/\/zabbix.made4it.com.br\/zabbix\/index.php; en este<\/a> caso, la ruta ser\u00eda: \/zabbix <\/li>\n\n\n\n
- {$WEBSITE.RESOURCE.LOAD.MAX.WARN} – Tiempo, en segundos, que tienen los recursos de la p\u00e1gina para responder antes de que se considere un incidente <\/li>\n\n\n\n
- {$WEBSITE.SCHEME} – Si se utilizar\u00e1 HTTP o HTTPS <\/li>\n\n\n\n
- {$WEBSITE.SCREEN.HEIGHT} – Altura de la captura de pantalla <\/li>\n\n\n\n
- {$WEBSITE.SCREEN.WIDTH} – Ancho de la captura de pantalla <\/li>\n<\/ul>\n\n
Una vez introducidos los archivos macro y creado el elemento, ahora debemos acceder a la interfaz de l\u00ednea de comandos (CLI) del servidor para finalizar la instalaci\u00f3n. <\/p>\n\n
En la interfaz de l\u00ednea de comandos (CLI) del servidor, debemos editar el archivo zabbix_server.conf e introducir las siguientes variables (por lo general, se encuentran al final del archivo) <\/p>\n\n
WebDriverURL = \u00bfCu\u00e1l es la URL que permite acceder a Selenium? <\/p>\n\n
Y <\/p>\n\n
StartBrowserPollers = N\u00famero de pollers que se utilizar\u00e1n para recopilar los elementos de tipo navegador <\/p>\n\n
Si instala Selenium de forma local, puede dejar la variable configurada de la siguiente manera: <\/p>\n\n
WebDriverURL=http:\/\/localhost:4444 <\/p>\n\n
En cuanto al n\u00famero de pollers, podemos empezar con 1 e ir aument\u00e1ndolo seg\u00fan sea necesario: StartBrowserPollers=1 <\/p>\n\n
Una forma sencilla de instalar Selenium es utilizarlo mediante un contenedor; para ello, primero debemos instalar Docker Engine en nuestro servidor y, a continuaci\u00f3n, configurar el contenedor de Selenium. Para ello, podemos utilizar dos comandos: <\/p>\n\n
- \n
- curl -fsSL https:\/\/get.docker.com -o get-docker.sh <\/li>\n<\/ul>\n\n
Este primer comando es un script de instalaci\u00f3n autom\u00e1tica de Docker Engine en su servidor. <\/p>\n\n
- \n
- docker run -d -p 4444:4444 -v \/dev\/shm:\/dev\/shm –restart unless-stopped selenium\/standalone-chrome:latest <\/li>\n<\/ul>\n\n
Y el segundo comando sirve para configurar el contenedor de Selenium en su servidor. <\/p>\n\n
Para consultar el estado del contenedor, puede utilizar el comando <\/p>\n\n
- \n
- Docker container ls \u2013a <\/li>\n<\/ul>\n\n
![\"\"](\"https:\/\/made4it.com.br\/wp-content\/uploads\/2024\/06\/image-4-1024x113.png\")
<\/figure>\n\nUna vez configurado el contenedor, basta con reiniciar el servicio del servidor Zabbix para que lea las nuevas variables y pueda utilizar Selenium y llevar a cabo la supervisi\u00f3n. <\/p>\n\n
Volviendo al front-end, podemos acceder al panel de control del servidor que acabamos de supervisar, y el resultado esperado es: <\/p>\n\n
![\"\"](\"https:\/\/made4it.com.br\/wp-content\/uploads\/2024\/06\/image-3-1024x516.png\")
<\/figure>\n\nExplicaci\u00f3n de cada uno de los aspectos objeto de seguimiento: <\/p>\n\n
- \n
- Tiempo de carga<\/strong>: <\/li>\n<\/ol>\n\n
- \n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo del evento de carga de la navegaci\u00f3n<\/strong>: Representa el tiempo total de carga de la p\u00e1gina, incluyendo todos los eventos desde el inicio de la navegaci\u00f3n hasta que finaliza la carga de la p\u00e1gina. <\/li>\n\n\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo del evento de carga de recursos<\/strong>: Indica el tiempo total necesario para cargar todos los recursos (im\u00e1genes, scripts, CSS, etc.) que requiere la p\u00e1gina. <\/li>\n<\/ul>\n\n
- \n
- Ejemplo pr\u00e1ctico en YouTube<\/strong>: El tiempo total que tarda en cargarse por completo la p\u00e1gina de inicio de YouTube, incluidos los v\u00eddeos recomendados, los men\u00fas, la barra de b\u00fasqueda, etc. <\/li>\n<\/ol>\n\n
- \n
- Tama\u00f1o de la navegaci\u00f3n<\/strong>: <\/li>\n<\/ol>\n\n
- \n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tama\u00f1o del cuerpo decodificado de la respuesta<\/strong>: el tama\u00f1o del cuerpo decodificado de la respuesta, es decir, el tama\u00f1o de los datos que realmente se han transferido y decodificado. <\/li>\n\n\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tama\u00f1o del cuerpo codificado de la respuesta<\/strong>: el tama\u00f1o del cuerpo codificado de la respuesta, es decir, el tama\u00f1o de los datos antes de ser descodificados. <\/li>\n\n\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tama\u00f1o de la transferencia durante la navegaci\u00f3n<\/strong>: El tama\u00f1o total de los datos transferidos durante la navegaci\u00f3n, incluyendo los encabezados y el cuerpo de la respuesta. <\/li>\n<\/ul>\n\n
- \n
- Ejemplo pr\u00e1ctico en YouTube<\/strong>: El tama\u00f1o total de los datos transferidos al cargar la p\u00e1gina de inicio de YouTube, incluidos todos los elementos visuales, scripts y dem\u00e1s recursos. <\/li>\n<\/ol>\n\n
- \n
- Tiempo de navegaci\u00f3n<\/strong>: <\/li>\n<\/ol>\n\n
- \n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo de obtenci\u00f3n de recursos de navegaci\u00f3n<\/strong>: Tiempo empleado en obtener los recursos de navegaci\u00f3n. <\/li>\n\n\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo de consulta de DNS de navegaci\u00f3n<\/strong>: Tiempo empleado en la resoluci\u00f3n del DNS. <\/li>\n\n\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo de establecimiento de la conexi\u00f3n TCP<\/strong>: Tiempo empleado en el establecimiento de la conexi\u00f3n TCP, que es el proceso mediante el cual se establece una conexi\u00f3n TCP entre el cliente y el servidor. <\/li>\n\n\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo de negociaci\u00f3n TLS<\/strong>: Tiempo empleado en la negociaci\u00f3n TLS, que es el proceso de establecimiento de una conexi\u00f3n segura. <\/li>\n\n\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo de solicitud de navegaci\u00f3n<\/strong>: Tiempo transcurrido desde el inicio de la solicitud hasta la respuesta del servidor. <\/li>\n\n\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo de respuesta de navegaci\u00f3n<\/strong>: Tiempo de respuesta del servidor tras el env\u00edo de la solicitud. <\/li>\n<\/ul>\n\n
- \n
- Ejemplo pr\u00e1ctico en YouTube<\/strong>: El tiempo que tarda el navegador en resolver la direcci\u00f3n de YouTube (tiempo de b\u00fasqueda de DNS), establecer una conexi\u00f3n TCP (tiempo de establecimiento de conexi\u00f3n TCP), negociar una conexi\u00f3n segura (tiempo de negociaci\u00f3n TLS), solicitar recursos de la p\u00e1gina (tiempo de solicitud) y recibir una respuesta del servidor (tiempo de respuesta). <\/li>\n<\/ol>\n\n
- \n
- Sincronizaci\u00f3n de recursos<\/strong>: <\/li>\n<\/ol>\n\n
- \n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo de consulta de DNS de recursos<\/strong>: Tiempo empleado en la resoluci\u00f3n de DNS para recursos individuales. <\/li>\n\n\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo de establecimiento de conexi\u00f3n TCP por recurso<\/strong>: Tiempo empleado en el establecimiento de conexi\u00f3n TCP para cada recurso individual. <\/li>\n\n\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo de negociaci\u00f3n TLS por recurso<\/strong>: Tiempo empleado en la negociaci\u00f3n TLS para recursos individuales. <\/li>\n\n\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo de solicitud de recursos<\/strong>: Tiempo de solicitud de recursos individuales. <\/li>\n\n\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo de respuesta de los recursos<\/strong>: Tiempo de respuesta de cada recurso individual. <\/li>\n<\/ul>\n\n
- \n
- Ejemplo pr\u00e1ctico en YouTube<\/strong>: el tiempo que tarda cada recurso (imagen, v\u00eddeo, script, etc.) necesario para cargar la p\u00e1gina de inicio de YouTube en ser solicitado, respondido y cargado en el navegador. <\/li>\n<\/ol>\n\n
Gr\u00e1ficos y estad\u00edsticas<\/strong> <\/p>\n\n
Cada gr\u00e1fico muestra la evoluci\u00f3n de las m\u00e9tricas a lo largo del tiempo, lo que permite identificar patrones y posibles cuellos de botella en el rendimiento. Los valores m\u00ednimos (m\u00edn.), medios (med.) y m\u00e1ximos (m\u00e1x.) ayudan a comprender la distribuci\u00f3n de las m\u00e9tricas: <\/p>\n\n
- \n
- El \u00abtiempo de carga\u00bb<\/strong> muestra la variaci\u00f3n del tiempo total de carga de la p\u00e1gina y de los recursos. <\/li>\n\n\n\n
- El \u00abtama\u00f1o de navegaci\u00f3n\u00bb<\/strong> detalla el volumen de datos transferidos, lo que permite apreciar la eficiencia de la transferencia de datos. <\/li>\n\n\n\n
- La secci\u00f3n \u00abTiempos de navegaci\u00f3n\u00bb<\/strong> destaca los distintos tiempos que intervienen en la navegaci\u00f3n, lo que ayuda a identificar qu\u00e9 etapas del proceso de navegaci\u00f3n son las que m\u00e1s tardan. <\/li>\n\n\n\n
- El an\u00e1lisis de tiempos<\/strong> de carga de los recursos<\/strong> se centra en los tiempos de carga de cada recurso, lo que ayuda a identificar aquellos recursos concretos que puedan estar provocando retrasos. <\/li>\n<\/ul>\n\n
Estas m\u00e9tricas son fundamentales para supervisar el rendimiento del sitio web e identificar problemas que puedan afectar a la experiencia del usuario. <\/p>\n","protected":false},"excerpt":{"rendered":"
Ya est\u00e1 aqu\u00ed la versi\u00f3n 7.0 de Zabbix y, con ella, est\u00e1 cobrando importancia un nuevo concepto de monitorizaci\u00f3n: la monitorizaci\u00f3n sint\u00e9tica. El monitorizado sint\u00e9tico tiene como objetivo ampliar a\u00fan m\u00e1s la visibilidad de la que disponemos al realizar el monitorizado de p\u00e1ginas y aplicaciones web; se acab\u00f3 lo de recibir \u00fanicamente un error HTTP con el c\u00f3digo XYZ o un comentario del tipo \u00abAh, pero tal recurso tarda mucho en cargarse\u00bb, ahora, junto con esta informaci\u00f3n, podemos a\u00f1adir una captura de pantalla que muestre c\u00f3mo se ve\u00eda realmente la p\u00e1gina en el momento en que se produjo el problema y ver de verdad lo que nuestro cliente estaba viendo. Este seguimiento es posible gracias a una pizca de JavaScript y a otra buena dosis de Selenium WebDriver. WebDriver – Selenium es una herramienta de automatizaci\u00f3n para realizar pruebas en aplicaciones web. Permite controlar un navegador web mediante programaci\u00f3n (aqu\u00ed es donde entra en juego JavaScript), interactuando con los elementos de la p\u00e1gina, rellenando formularios, haciendo clic en botones y comprobando el comportamiento de la aplicaci\u00f3n. Es ideal para pruebas automatizadas y repetitivas. Para utilizar esta monitorizaci\u00f3n en Zabbix, necesitaremos trabajar en dos frentes: el primero es en el propio Front-End, donde se realiza la configuraci\u00f3n del host, se vincula la plantilla y se configuran las macros seg\u00fan lo que desee monitorizar; esta es la parte sencilla. La segunda parte se lleva a cabo en la CLI: debemos indicar a Zabbix cu\u00e1l es la URL de WebDrive que va a utilizar y debemos instanciar los colectores que realizar\u00e1n la monitorizaci\u00f3n sint\u00e9tica. Pasemos a la pr\u00e1ctica, pues. En primer lugar, aseg\u00farese de que dispone de la versi\u00f3n 7.0 de Zabbix; debido a diversas dependencias de la arquitectura de Zabbix, esta supervisi\u00f3n solo funcionar\u00e1 a partir de la versi\u00f3n 7.0. A continuaci\u00f3n, deber\u00e1 disponer de la plantilla en su Zabbix, que puede adquirirse aqu\u00ed: https:\/\/git.zabbix.com\/projects\/ZBX\/repos\/zabbix\/browse\/templates\/app\/website_browser Por lo tanto, basta con crear un host, vincular la plantilla y rellenar las macros heredadas del host de la siguiente manera: Una vez introducidos los archivos macro y creado el elemento, ahora debemos acceder a la interfaz de l\u00ednea de comandos (CLI) del servidor para finalizar la instalaci\u00f3n. En la interfaz de l\u00ednea de comandos (CLI) del servidor, debemos editar el archivo zabbix_server.conf e introducir las siguientes variables (por lo general, se encuentran al final del archivo) WebDriverURL = \u00bfCu\u00e1l es la URL que permite acceder a Selenium? Y StartBrowserPollers = N\u00famero de pollers que se utilizar\u00e1n para recopilar los elementos de tipo navegador Si instala Selenium de forma local, puede dejar la variable configurada de la siguiente manera: WebDriverURL=http:\/\/localhost:4444 En cuanto al n\u00famero de pollers, podemos empezar con 1 e ir aument\u00e1ndolo seg\u00fan sea necesario: StartBrowserPollers=1 Una forma sencilla de instalar Selenium es utilizarlo mediante un contenedor; para ello, primero debemos instalar Docker Engine en nuestro servidor y, a continuaci\u00f3n, configurar el contenedor de Selenium. Para ello, podemos utilizar dos comandos: Este primer comando es un script de instalaci\u00f3n autom\u00e1tica de Docker Engine en su servidor. Y el segundo comando sirve para configurar el contenedor de Selenium en su servidor. Para consultar el estado del contenedor, puede utilizar el comando Una vez configurado el contenedor, basta con reiniciar el servicio del servidor Zabbix para que lea las nuevas variables y pueda utilizar Selenium y llevar a cabo la supervisi\u00f3n. Volviendo al front-end, podemos acceder al panel de control del servidor que acabamos de supervisar, y el resultado esperado es: Explicaci\u00f3n de cada uno de los aspectos objeto de seguimiento: Gr\u00e1ficos y estad\u00edsticas Cada gr\u00e1fico muestra la evoluci\u00f3n de las m\u00e9tricas a lo largo del tiempo, lo que permite identificar patrones y posibles cuellos de botella en el rendimiento. Los valores m\u00ednimos (m\u00edn.), medios (med.) y m\u00e1ximos (m\u00e1x.) ayudan a comprender la distribuci\u00f3n de las m\u00e9tricas: Estas m\u00e9tricas son fundamentales para supervisar el rendimiento del sitio web e identificar problemas que puedan afectar a la experiencia del usuario.<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[],"class_list":["post-18839","post","type-post","status-publish","format-standard","hentry","category-sin-categorizar"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
- El \u00abtama\u00f1o de navegaci\u00f3n\u00bb<\/strong> detalla el volumen de datos transferidos, lo que permite apreciar la eficiencia de la transferencia de datos. <\/li>\n\n\n\n
- El \u00abtiempo de carga\u00bb<\/strong> muestra la variaci\u00f3n del tiempo total de carga de la p\u00e1gina y de los recursos. <\/li>\n\n\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo de establecimiento de conexi\u00f3n TCP por recurso<\/strong>: Tiempo empleado en el establecimiento de conexi\u00f3n TCP para cada recurso individual. <\/li>\n\n\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo de consulta de DNS de recursos<\/strong>: Tiempo empleado en la resoluci\u00f3n de DNS para recursos individuales. <\/li>\n\n\n\n
- Sincronizaci\u00f3n de recursos<\/strong>: <\/li>\n<\/ol>\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo de consulta de DNS de navegaci\u00f3n<\/strong>: Tiempo empleado en la resoluci\u00f3n del DNS. <\/li>\n\n\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo de obtenci\u00f3n de recursos de navegaci\u00f3n<\/strong>: Tiempo empleado en obtener los recursos de navegaci\u00f3n. <\/li>\n\n\n\n
- Tiempo de navegaci\u00f3n<\/strong>: <\/li>\n<\/ol>\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tama\u00f1o del cuerpo codificado de la respuesta<\/strong>: el tama\u00f1o del cuerpo codificado de la respuesta, es decir, el tama\u00f1o de los datos antes de ser descodificados. <\/li>\n\n\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tama\u00f1o del cuerpo decodificado de la respuesta<\/strong>: el tama\u00f1o del cuerpo decodificado de la respuesta, es decir, el tama\u00f1o de los datos que realmente se han transferido y decodificado. <\/li>\n\n\n\n
- Tama\u00f1o de la navegaci\u00f3n<\/strong>: <\/li>\n<\/ol>\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo del evento de carga de recursos<\/strong>: Indica el tiempo total necesario para cargar todos los recursos (im\u00e1genes, scripts, CSS, etc.) que requiere la p\u00e1gina. <\/li>\n<\/ul>\n\n
- Webzada: P\u00e1gina web <\/strong>www.made4it.com.br<\/strong><\/a> Tiempo del evento de carga de la navegaci\u00f3n<\/strong>: Representa el tiempo total de carga de la p\u00e1gina, incluyendo todos los eventos desde el inicio de la navegaci\u00f3n hasta que finaliza la carga de la p\u00e1gina. <\/li>\n\n\n\n
- Tiempo de carga<\/strong>: <\/li>\n<\/ol>\n\n
- Docker container ls \u2013a <\/li>\n<\/ul>\n\n
- docker run -d -p 4444:4444 -v \/dev\/shm:\/dev\/shm –restart unless-stopped selenium\/standalone-chrome:latest <\/li>\n<\/ul>\n\n