Prepare Kibana & Elasticsearch

[rdpanek]

• [x] Prepare visualizations and Dashboard for Kibana from RUM data
• [x] Export into Docker image
• [x] ACC: describe how to work or small documentation into this ticket

[rdpanek]

Elasticsearch & Kibana

RUM server store all data arrived via API into Elasticsearch into two indices.

• c.rum.entries-* which contains list of resources (img, scripts, css,...) loaded on measured pages with their timmings.
• c.rum.metrics-* which contains basic information about user and web vitals.

Kibana is a web application and contains visualizations and Dashboard with aggregated metrics from RUM server.

*`c.rum.metrics-` index default view**

*`c.rum.metrics-` index sorted view**

*`c.rum.entries-` index default view**

*`c.rum.entries-` index sorted view**

[rdpanek]

How to setup Elasticsearch and Kibana

We prepared default settings for your Elasticsearch and Kibana, but you can make changes by according to your needs.

Supported version Elasticsearch and Kibana is 7.x.x

CONTAINER ID   IMAGE                                    COMMAND                  CREATED          STATUS          PORTS                              NAMES
42b4e2d62722   docker.elastic.co/kibana/kibana:7.17.3   "/bin/tini -- /usr/l…"   6 seconds ago    Up 4 seconds    0.0.0.0:5601->5601/tcp             kibana
e6ca2a768ec0   elasticsearch:7.17.3                     "/bin/tini -- /usr/l…"   12 seconds ago   Up 11 seconds   0.0.0.0:9200->9200/tcp, 9300/tcp   elasticsearch

Download Canarytrace RUM.postman_collection.json from Docker image with Canarytrace RUM docker run --rm -it --entrypoint /bin/mv -v $(pwd):/postman quay.io/canarytrace/rum:1.10 /opt/canary-rum/postman/ /postman/

Download settings for Kibana from Docker image with Canarytrace RUM docker run --rm -it --entrypoint /bin/mv -v $(pwd):/elastic_kibana quay.io/canarytrace/rum:1.10 /opt/canary-rum/elastic_kibana/ /elastic_kibana/

Import Postman collections into your Postman workspace

Create Environment with variables and values

Imported postman collections

• /API are testing requests.

• /Elasticsearch mapping are mappings for both indices.

• First step send both mappings into Elasticsearch

• Second step import objects into Kibana index-patterns.ndjson, visualizations.ndjson and dashboard.ndjson

Your Kibana and Elasticsearch are ready 👌

[rdpanek]

Kibana dashboard Canarytrace RUM

Visualizations

• Origin and path - select your domain and path. In other case will be showed data from all pages.
• Metrics - basic metrics such as [TTFB](https://web.dev/ttfb/), [FCP](https://web.dev/fcp/), [LCP](https://web.dev/lcp/) and Duration (Returns a timestamp that is the difference between the PerformanceNavigationTiming.loadEventEnd and PerformanceEntry.startTime properties.)
• Devices - it is share of the device type
• Initiator types - is type of resources ( type: Link is often only CSS )
• The most visited - is cloud of most visited pages
• Overview - is table with pages and percentiles