06 - Uptime - 掌握系统的生命徵象 (4/4) - 使用合成监控 (Synthetics Monitor) 从使用者情境验证服务的运作状态

Uptime - 掌握系统的生命徵象 系列文章


本篇学习重点

  • 了解 Uptime 的最新功能合成监控 (Synthetic Monitor) 的能力
  • 学习 Elastic Synthetic 的架构与使用方法

什麽是合成监控 (Synthetic Monitor)

Elastic Observability Uptime 中 Synthetic Monitor 功能的推出,主要是针对使用者体验 (User Experience) 的角度所发展出来的功能,设计的目的是『能够在使用者遇到问题之前,先发现他们可能将遇到的问题』,因此透过分析使用者存取网页的情境,产生并模拟出这些情境的操作步骤,并且将这些步骤记录下来,当作监控的依据,同时在发生异常时,也因为保留了这些步骤的历程资料,能够更即时的协助开发与运维的人员解决问题。

注意:Synthetic Monitor 是在 Elastic Observability 7.10 版发布时推出的,推出的时间是在 2020 年 11 月,写这篇文章时,已经到 Elastic Observability 7.14 版了,不过 Synthetic 还是在实验 (Experimental) 的阶段,也就是官方不建议直接使用在 Production 上,如果要使用的话,未来正式版推出时不见得会确保向前相容,这部份的风险要自己承担。

Elastic Synthetic 的运作架构

Elastic Synthetic 底层是使用 Playwright 这个 Node.js 的函式库,透过 Playwright 能使用简单的 API 来操作 Chromium, Firefox, Webkit 等浏览器的核心,进而模拟出使用者操作浏览器的行为,因此 @elastic/synthetics 也就是使用 javascript 开发的函式库,并且与 Heartbeat 所延伸开发出来的 Heartbeat synthetics module 进行整合,让我们能够直接使用 Heartbeat 来透过 @elastic/synthetics 执行指定的脚本,并且将这些结果透过 Heartbeat 记录回 Elasticsearch。

Elastic Observability 同时也在 Kibana 的 Uptime app 之中深度的整合并支援 Synthetic Monitor,让透过 Synthetic Monitor 记录的资讯,也就能和其他 Heartbeat 所接收到的资讯一样,可以直接在单一的入口网站 Uptime 能查看结果、也能使用 Alert 机制在异常的时候主动通知我们。

06-synthetics-overview

使用 Synthetic

这边建议大家参考 官方文件 Synthetics Quickstart [2] 来参考如何进行配置及快速上手,主要的概念我这边整理了一下,协助大家理解,但细节的请参考官方文件。

执行的环境

由於 Synthetic 的使用环境较复杂,因此官方建议使用 Docker 的环境来运作,不过在开发的阶段,我们可以直接使用本地端来执行。

注意:由於官方提供的 Docker Image 目前乔叔使用 Apple M1 CPU 无法正常使用,应该是 Synthetic 里所使用到的套件有支援度的问题,所以在花了许多时间尝试却失败之後,我在使用 Docker 环境执行 Synthetic 的时候是使用 Windows + Linux VM 的环境来运作。

要在学会执行的话,最简单的方式就是直接将官方 Synthetic Github 的专案 Clone 下来,学习他怎麽做:

git clone https://github.com/elastic/synthetics/tree/master/

在里面的 examples 路径下,分别有

  • docker:使用 run.sh 可以运作一个 docker container 并执行路径下的 heartbeat.docker.yml 所定义的脚本,或是使用 bash.sh 会运作 docker container 并且进入 docker 环境,可以直接在里面执行要测试的脚本。
  • e-commerce:这是一个较完整的电商示范网站,里面也有一些较完整的脚本,不过目前电商网站挂了,要跑的话要自己架起来。
  • in-line:里面有几个简单的脚本,可以直接透过下方所教的执行 Synthetic 的方法来使用。
  • todos:这是一个简单的 ToDo 的 App,里面也有包含两种执行 Synthetic 方式的实作,可以供参考。

执行 Synthetic 方式

执行的方式分为两种:

使用 @elastic/synthetic 执行

可以透过

npm install @elastic/synthetic

的方式安装,或是在上面提到的 example 的专案中,透过 npm install 来安装 package.json 里面指定好的相依的套件。

再来可以透过

npx @elastic/synthetics .

执行当下目录的所有的 .journey.ts 或是 .journey.js 的脚本。

或是透过以下的指定,使用 inline 的方式执行 xxx.js 里面所定义的脚本。

cat xxx.js | npx @elastic/synthetics --inline

请注意!这种方式只是单纯的执行脚本的结果,并不会把结果传送到 Elasticsearch 去,也就是在 Uptime 里是看不到结果的。

使用 Heartbeat 执行

若我们要透过 Heartbeat 执行时,要先定义好 heartbeat.yml 的设定,里面可以使用两种执行的方式 - inline 的脚本以及 指定脚本档案下载路径 的方式,例如 todos 的 examples 里面的 heartbeat.yml 就有包含这两种的例子。

heartbeat.monitors:
- type: browser
  id: elastic-website 
  name: Elastic website
  schedule: "@every 1m"
  source:
    inline:
      script: |- 
        step("load homepage", async () => {
            await page.goto('https://www.elastic.co');
        });
        step("hover over products menu", async () => {
            await page.hover('css=[data-nav-item=products]');
        });
- name: Todos
  id: todos
  type: browser
  schedule: "@every 1m"
  source:
    zip_url: 
      url: "https://github.com/elastic/synthetics/archive/refs/heads/master.zip" 
      folder: "examples/todos" 
      username: "" 
      password: ""

编写 Synthetic 脚本

要编写 Synthetic 脚本,主要是要了解 Playwright 的使用方式,主要编写测试时会用到的语法如下:

  • journey:用来测试一个主要的功能情境但拥有多个分散步骤的案例。
  • step:一个 journey 里面所执行的某个骤步,可以是开启网页、滑动到某个元件、点选某个按钮…等。
  • beforeAllbeforeafterAllafter:这些分别用来定义执行 journey 之前、或之後要执行的动作。

一个 journey 里面包含几个重要的元件:

  • browser:浏览器物件,浏览器层级的功能会在这边可以使用。
  • page:页面,可跳转页面到指定的 URL,或是执行 screenshot,或是在某些页面的事件事做事。
  • contextbrowser 的某个 context,当有多个使用浏览器的情境、并且不希望共用 cookie, cache 时,就会建立多个 context。
  • params:使用者定义的参数。

例如 examples e-commerce 里面的一段范例:

journey({ name: 'Delete cart items', tags: ['cart'] }, ({ page, params }) => {
  navigateToProductDetail(page, params);

  step('Add items to cart', async () => {
    await page.selectOption('select[name="quantity"]', '2');
    await Promise.all([
      page.waitForNavigation({
        url: /cart/,
        waitUntil: 'networkidle',
      }),
      page.click('text=Add to Cart'),
    ]);
  });

  step('empty cart items', async () => {
    const headline = await page.$('.container h3');
    expect(await headline.textContent()).toContain(
      '1 items in your Shopping Cart'
    );
    await Promise.all([
      page.waitForNavigation({ waitUntil: 'networkidle' }),
      page.click('text=Empty cart'),
    ]);
  });

  step('verify empty shopping cart', async () => {
    await Promise.all([
      page.waitForNavigation({ url: /cart/, waitUntil: 'networkidle' }),
      page.click('text=View Cart'),
    ]);
    await page.waitForSelector('.container');
    const headline = await page.$('.container h3');
    expect(await headline.textContent()).toContain(
      'Your shopping cart is empty'
    );
  });
});

透过 Kibana Uptime 检视 Synthetic Monitor 的结果

我们回到 Kibana 的 Uptime 主画面,在这个画面之中,我们可以看到有两个 Browser 类型的 Monitor,这个就是使用 @elastic/synthetic 所收集到的资料,也就是专门是以使用者行为模拟出的前端网页操作情境。

06-kibana-uptime-browse

Synthetic Monitor 的内容页面

接下来我们点选其中一个 13th iTHome Ironeman OneDoggo - inline 的 Monitor,观看里面的记录细节,与一般的 Monitor 的结果差不多,不过可以发现在 History 的部份,多了画面的截图。

06-kibana-Browser-Monitor-Overview

从 Uptime 查看 Synthetic 录制的 journey 结果

点选 History 当中的某一笔记录之後,我们可以看到这个 journey 的结果,总共包含三个部份:

  • load OneDoggo team page
  • goto Joe's page
  • navigate to day 1 article

06-kibana-monitor-journey

可以展开 step 的执行细节

任何一个 journeystep 展开後,都可以看到这个 step 的执行语法与执行结果,甚至 Console output 也会记录起来,对於要记录资讯查问题,非常的方便。

06-kibana-browser-step-detail

针对 step 检视效能的分析

点选某一个 stepperformance breakdown 之後,可以查看这个页面在载入时的细节。

06-kibana-browser-performance-breakdown

点选任何一个资源请求,可以查看当时完整的细节资讯,虽然不像 Dev Tools 这麽强大,但这是定期依照我们要的情境所记录下来的资讯,能够还原当时发生了什麽事,是不是某些资源当下载入的时间超过预期。

06-kibana-browser-step-performance-breakdown-detail


这个 Synthetic 的功能实在是让人很惊艳,本来想顺便做一个监控团员们大家有没有准时发文的 journey,但後来发现我最近花在写铁人赛文章的时间太久了,我家的狗一直关在家心情不是很好,所以只好收手,好好当个狗奴才去遛狗,期待 Elastic 正式推出 Synthetics Monitor 的功能!

参考资料

  1. Playwright Github
  2. 官方文件 Synthetics Quickstart

查看最新 Elasticsearch 或是 Elastic Stack 教育训练资讯: https://training.onedoggo.com
欢迎追踪我的 FB 粉丝页: 乔叔 - Elastic Stack 技术交流
不论是技术分享的文章、公开线上分享、或是实体课程资讯,都会在粉丝页通知大家哦!


<<:  Day9-D3绘图:绘制形状的Helper Functions

>>:  【C language part 2】变数&资料型态、输入输出、运算子&运算式

威胁建模作业的前奏

如果顾问对客户说:「尊敬的贵宾,您说的都对...(後略○○字),但我们需要聚焦在关键○○○...(後...

Day 30 : 30天完赛总结 与 odoo15 新功能分享

30天完赛感想 想表达的很多,但能写出来的东西很少 事实证明,就算看小说看再多对文笔的帮助很有限 看...

抓取资料库数据 - SQL基础语法(下)

我们学会了单张表的查询与筛选,当资料需要跨表拉取时该怎麽办呢?这时候我们就需要用到JOIN来把表与表...

IT铁人DAY 1-进入物件导向世界前的心理准备

  在开始之前,还是很惊讶自己有天可以在这里写文章,分享自身所学的IT技术,提供给大家参考。那其实我...

#24 数据中中的特徵相关性(3)

基於上篇,有了数据特徵,再来就可以把欧氏距离发展为马氏距离公式 马氏距离公式(Mahalanobis...