boyney123/garie-lighthouse

Lighthouse Garie plugin. Polls websites to checkout performance metrics also supports webhooks.

Tool to gather lighthouse metrics and supports CRON jobs and webhooks.

Highlights

• Poll for lighthouse performance metrics on any website and stores the data into InfluxDB
• Webhook support
• Understand your performance metrics with recommend improvements thanks to lighthouse reports
• View all historic lighthouse reports.
• Setup within minutes

Overview of garie-lighthouse

Garie-lighthouse was developed as a plugin for the Garie Architecture.

Garie is an out the box web performance toolkit, and garie-lighthouse is a plugin that generates and stores lighthouse data into InfluxDB.

Garie-lighthouse can also be run outside the Garie environment and run as standalone.

If your interested in an out the box solution that supports multiple performance tools like lighthouse, google-speed-insight and web-page-test then checkout Garie.

If you want to run garie-lighthouse standalone you can find out how below.

Getting Started

Prerequisites

• Docker installed

Running garie-lighthouse

You can get setup with the basics in a few minutes.

First clone the repo.

git clone [email protected]:boyney123/garie-lighthouse.git

Next setup you're config. Edit the config.json and add websites to the list.

{
	"cron": "00 00 */6 * * *",
	"urls": [
		{
			"url": "https://www.comparethemarket.com",
			"report": true
		},
		{
			"url": "https://www.bbc.co.uk",
			"report": true
		},
		{
			"url": "https://www.cnn.com",
			"report": true
		}
	]
}

Once you finished edited your config, lets build our docker image and setup our environment.

docker build -t garie-lighthouse . && docker-compose up

This will build your copy of garie-lighthouse and run the application.

On start garie-lighthouse will start to gather performance metrics for the websites added to the config.json.

Data collected

Lighthouse comes with loads of audits out the box. You can view all metrics in the reports.

Garie-lighthouse filters what data is stored into influxDB and returned in the webhook.

Property	Type	Description
performance-score	number	Overall performance score.
pwa-score	number	Overall progressive web app score.
accessibility-score	number	Overall accessibility score.
best-practices-score	number	Overall best practices score.
seo-score	number	Overall seo score.
time-to-first-byte	number	Number of ms to first byte.
firstContentfulPaint	number	Number of ms to first contentful paint.
firstMeaningfulPaint	number	Number of ms to first meaningful paint.
interactive	number	Number of ms to interactive.
firstCPUIdle	number	Number of ms to CPU idle.
speedIndex	number	Google speed index.
estimatedInputLatency	number	Input Latency.
errors-in-console	number	Number of errors in the console.
redirects	number	Number of redirects.
redirects	number	Number of redirects.

Viewing reports

Viewing lighthouse reports is straight forward. Once you have your application running just go to localhost:3000/reports and you should see all the reports lighthouse has generated.

If you don't want to generate reports you can turn this off in the config.json by setting report to false.

Webhook

Garie-lighthouse also supports webhooks. You will need to POST to localhost:3000/collect.

Payload

Property	Type	Description
url	string (required)	Url to get metrics for.
report	boolean (optional)	When set to true a lighthouse report will be generated

Payload Example

{
  "url": "https://www.bbc.co.uk",
  "report": true
}

By default, reports on webhook's are not generated unless you set report to true

config.json

Property	Type	Description
cron	string (optional)	Cron timer. Supports syntax can be found [here].(https://www.npmjs.com/package/cron)
urls	object (required)	Config for lighthouse. More detail below

urls object

Property	Type	Description
url	string (required)	Url to get lighthouse metrics for.
plugins	object (optional)	To setup custom lighthouse config.
plugins.name	string (required)	Needs to be set to lighthouse
plugins.report	boolean (optional)	If set to true, lighthouse report will also be generated.
plugins.config	object (optional)	To configure lighthouse, such as device type and throttling. See Configuration for details.

Example (Basic Config)

{
	"url": "https://www.bbc.co.uk",
	"plugins": [
		{
			"name": "lighthouse",
			"report": true
		}
	]
}

Example (Custom Config)

{
	"url": "https://www.bbc.co.uk",
	"plugins": [
		{
			"name": "lighthouse",
			"report": true,
			"config": {
				"extends": "lighthouse:default",
				"settings": {
					"emulatedFormFactor": "desktop"
				}
			}
		}
	]
}

garie-lighthouse's Issues

Failed to initialise influx

Relevant code or config

 influxdb:
    image: "influxdb:latest"
    ports:
      - 8086:8086
    environment:
      - INFLUXDB_ADMIN_USER=<USER>
      - INFLUXDB_ADMIN_PASSWORD=<PASSWORD>
    volumes:
      - ./influxdb:/var/lib/influxdb

  garie-lighthouse:
    image: "garie/lighthouse"
    ports:
      - 3003:3000
    environment:
      - HOST=influxdb
    volumes:
      - ./garie-config.json:/usr/src/garie-lighthouse/config.json
      - ./plugins/garie-lighthouse/reports:/usr/src/garie-lighthouse/reports
      - ./plugins/garie-lighthouse/logs:/usr/src/garie-lighthouse/logs
    depends_on:
      - influxdb

  garie-browsertime:
    image: "garie/browsertime"
    ports:
      - 3001:3000
    environment:
      - HOST=influxdb
      - REPORT_DIR=./plugins/garie-browsertime
    volumes:
      - ./garie-config.json:/usr/src/garie-browsertime/config.json
      - ./plugins/garie-browsertime/reports:/usr/src/garie-browsertime/reports
      - ./plugins/garie-browsertime/logs:/usr/src/garie-browsertime/logs
      - /var/run/docker.sock:/run/docker.sock

    depends_on:
      - influxdb

What you did:

What happened:

`root@Grafana-1:~/grafana/docker# docker logs docker_garie-lighthouse_1

[email protected] start /usr/src/garie-lighthouse
node ./src/index.js

Application listening on port 3000
(node:27) UnhandledPromiseRejectionWarning: Failed to initialise influx
(node:27) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:27) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[email protected] start /usr/src/garie-lighthouse
node ./src/index.js

Application listening on port 3000
(node:17) UnhandledPromiseRejectionWarning: Failed to initialise influx
(node:17) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:17) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
root@Grafana-1:~/grafana/docker#`

Reproduction repository:

Problem description:
I saw that the Grafana dashboard has no data since 30days…
The Connection from Grafana to the influx db is successful.
Would be awesome if someone can give me a hint

Data retention policy

Is there anyway to set a data retention policy to prevent the disk from filling up?

Unable to use page light speed even after providing API key

Hi Team,

Can you help here, page light speed is not working and showing any day. I have updated the API key in the config file but still getting error.

A humble request to maintainer if he can update the project with latest images for all 3 tools to keep such a good project up to date for use :)

How to set custom plugin throttling

Unfortunately I cannot pass custom throttling settings to lighthouse.
This is my plugin config:

    "plugins": [
              {
                  "name": "lighthouse",
                  "label": "desktop",
                  "report": true,
                  "config": {
                       "extends": "lighthouse:default",
                       "settings": {
                               "emulatedFormFactor": "desktop",
                               "throttling" : {
                                       "rttMs": "40",
                                       "throughputKbps": "10240"
                               }
                        }
                   }
              }
      ]

According to the generated report the settings are set correctly:

But the performance score only shows an error:

When I am removing the "throttling" section the report is generated correctly, with correct performance score.

Any hints on how to set throttling or get more error reporting, why performance cannot be calculated?

THX, Georg

Latest garie/lighthouse docker images drops performance score

I am using the latest garie/lighthouse image to get the fix with dumb init to get rid of the chrome zombie processes:
garie/lighthouse latest c135a34430bc 25 hours ago 606MB

Problem description:
Fetched performance scores differ dramatically from the previous version.

Question:
Did the default setting for emulated device change?

Previous:
Score: 28
Emulated Nexus 5X, Simulated Fast 3G network

Current:
Score: 3
Emulated Nexus 5X, Simulated Slow 4G network

Grafana is showing the drops after changing to the new image:

how to handle page which need login?

Need any support or help...

Multiple Chrome processes forks

• node version: v11.11.0
• npm version: 6.7.0

Relevant code or config

What you did:

We have been using gaire for production setup and i am currently using 15 URls to monitor
with a cron of 25 min
Each url takes ~15 sec to be calculate and data pushed into influx

What happened:

After a day or two the chrome process count reaches in 3 figures. And eventually in a week or so it overloads the machine

Problem description:
I cannot figure out where the problem is, when i try to runit with couple of urls the problem do not seem to replicate,
it launches 3 other processes as expected with the parent chrome process and closes all the processes after processing of each url

I tried different combination of flag when chrome is being launched below is the current set:
'--headless', '--disable-gpu', '--disable-component-extensions-with-background-pages', '--disable-gpu-sandbox', '--disable-default-apps', '--disable-backgrounding-occluded-windows', '--disable-background-timer-throttling', '--disable-renderer-backgrounding', '--disable-notifications ', '--disable-web-security', '--disable-extensions', '--disable-sync', '--no-zygote', '--no-sandbox', '--headless', '--mute-audio',
Requesting your inputs
@boyney123

Outdated docker-compose.yml

Looks like something has been change in the name of docker registry, also config.json is not loaded.

version: "3"
services:
  influxdb:
    image: "influxdb:latest"
    ports:
      - 8086:8086
    environment:
      - INFLUXDB_ADMIN_USER=admin
      - INFLUXDB_ADMIN_PASSWORD=admin
  garie-lighthouse:
    image: "garie/lighthouse:latest"
    volumes:
      - ./config.json:/usr/src/garie-lighthouse/config.json
      - ./reports:/usr/src/garie-lighthouse/reports
    ports:
      - 3000:3000
    environment:
      - HOST=influxdb 

custom Data collect

Hello, thanks for this great project

it would be cool if we could choose the Data collected

typically, i'm using performance.mark and performance.measure to track key execution time in my app

those measure are reported in lighthouse report as "User Timing marks and measures" in the performance part
for e.g :
Name | Type | Start Time | Duration
ui:init | Measure | 848.8 ms | 214.87 ms

i'd like to include them in Garie dashboards

Question: one URL, mobile and desktop

Hi there, first of all thanks for awesome work on this project!

Can I somehow add some configurable additional key or label next to URL? I need to test one URL once for mobile (it's default) and secend time with desktop settings. If I add them simply like in next config, URL is correctly tested twice, but in grafana, they are of course under same url key - I cannot filter them by mobile/desktop.

	"cron": "*/5 * * * *",
	"urls": [
		{
			"url": "https://www.example.com",
			"plugins": [
				{
					"name": "lighthouse",
					"report": true
				}
			]
		},
		{
			"url": "https://www.example.com",
			"plugins": [
				{
					"name": "lighthouse",
					"report": true,
					"config": {
						"extends": "lighthouse:default",
						"settings": {
							"emulatedFormFactor": "desktop"
						}
					}
		  		}
			]
		}
	]
}

I am thinking about this workaround, but I am not sure - make another docker-compose with own influxdb and lighthouse with desktop. So there will be two influxdb instances connected to grafana, lighhouse in each of them.

chrome defunct processes

I recently installed garie via the docker-compose file included in https://github.com/boyney123/garie.
But after a while it stops collecting metrics.
I pinned down the issue to zombie processes from 'chrome' and 'cat' using all resources.
After some more searching it turns out that the 'npm' process runs as pid 1. This pid is normally reserved for the init process that reaps zombies.
A better explanation can be found at https://github.com/Yelp/dumb-init.
My proposed solution is to install dumb-init in the Dockerfile.

diff --git a/Dockerfile b/Dockerfile
index e649d43..8e9b599 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -12,7 +12,7 @@ RUN \
     wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \
     sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' && \
     apt-get update && \
-    apt-get install -y google-chrome-stable
+    apt-get install -y google-chrome-stable dumb-init

 COPY . .

Upgrade to Latest Lighthouse 5.2

Hi the lighthouse npm package is out of date. I tried to update the package.json to lighthouse 5.2 and the dockerfile to the node 10 base layer ( as lighthouse 5.2 depends on node 10) but when I do so it fails to work with influx?

garie-lighthouse_1 | Application listening on port 3000
garie-lighthouse_1 | (node:19) UnhandledPromiseRejectionWarning: Failed to initialise influx
garie-lighthouse_1 | (node:19) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)

I tried removing the try catch on the influxdb initialise which allows lighthouse to then run but it then doesn't write to influx

thanks :)

Chrome crush without lighthouse noticing leads to an infinite loop

• <%= moduleName %> version: 0.0.1
• node version: v8.11.4
• npm (or yarn) version: yarn 1.10.1

What happened:

Problem description:
Chrome is crashing and lighthouse continues to run without rejecting or fulfilling its Promise, and garie-lighthouse never move to the next URL since it didn't finish with the first one, once the cron job is fired again the same thing happens again, it's pretty much a never ending game.

Suggested solution:
Time base short circuit, let's say default to 5min (customized via Env Var) if it's timed out, we simply kill chrome and move on to the next URL.

Feature Request: Support different settings/device emulations

Currently, Garie only does Lighthouse reports on the default mobile preset. However, I would like to run my audits in Desktop mode. Lighthouse supports a settings object to provide overrides. It would be good if Garie exposed an API to pass these in.

See: https://github.com/boyney123/garie-lighthouse/blob/master/src/light-house/index.js#L57

You could also allow for alternative presets, e.g. there's one for Desktop here:
https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/config/lr-desktop-config.js

I'm not totally sure exactly how you reference these but it might be like lighthouse:lr-desktop.