Введение
Здравствуйте. В данной статье будет выполнено рассмотрение и установка инструмента Grafana Faro для осуществления сбора данных мониторинга из Frontend приложений написанных на JavaScript. Также, перед непосредственным использованием Grafana Faro, выполним установку в кластере Kubernetes всех остальных необходимых компонентов Grafana стека.
Инструмент Grafana Faro представляет собой набор пакетов, подключение которых осуществляется в Frontend JavaScript приложениях. Подключаемые пакеты позволяют выполнить сбор различных данных мониторинга, существуют следующие пакеты:
grafana/faro-web-sdk или grafana/faro-react (при использовании React) — данные пакеты осуществляют сбор таких данных, как:
Метрики Core Web Vitals — скорость загрузки основного контента (LCP), время ожидания до первого взаимодействия с контентом (FID), совокупное смещение макета (CLS), время до первого байта (TTFB), первая отрисовка содержимого (FCP);
Необработанные исключения;
Сообщения выведенные в консоль;
События изменения view;
События начала и продолжения сессий;
grafana/faro-web-tracing — пакет осуществляет интеграцию в приложение сбора трейсов на основе OpenTelemetry.
Далее данные мониторинга полученные с помощью пакетов Grafana Faro отправляются в Grafana Alloy, который выполняет обработку полученных метрик и после этого метрики полученные из пакетов:
grafana/faro-web-sdk или grafana/faro-react (при использовании React) - отправляются в систему логирования Grafana Loki;
grafana/faro-web-tracing - отправляются в систему трассировки Grafana Tempo.
Отображение и визуализация полученных метрик осуществляется с использованием Grafana.
Общую структурную схему работы рассматриваемого решения для сбора данных мониторинга из Frontend JavaScript приложений можно увидеть на рисунке ниже:
Установка компонентов Grafana стека в Kubernetes
Для осуществления сбора данных мониторинга выполним создание тестовый среды с установкой инфраструктурных компонентов Grafana стека в кластера Kubernetes используя Helm.
Создадим отдельный неймспейс в который будем выполнять установку компонентов с использованием команды:
$ kubectl create namespace monitoringДалее выполним подключение Helm репозитория Grafana с помощью команды:
$ helm repo add grafana https://grafana.github.io/helm-chartsУстановка Grafana Loki
Выполним создание файла values-loki.yaml содержащий значения Helm для выполнения установка Grafana Loki, в данном примере значения подготовлены для установки в монолитном режиме с отключенной авторизацией и использованием S3 хранилища MinIO:
loki:
auth_enabled: false
commonConfig:
replication_factor: 1
schemaConfig:
configs:
- from: 2024-04-01
store: tsdb
object_store: s3
schema: v13
index:
prefix: loki_index_
period: 24h
ingester:
chunk_encoding: snappy
tracing:
enabled: true
querier:
max_concurrent: 2
gateway:
enabled: false
deploymentMode: SingleBinary
singleBinary:
replicas: 1
chunksCache:
writebackSizeLimit: 10MB
minio:
enabled: true
backend:
replicas: 0
read:
replicas: 0
write:
replicas: 0
ingester:
replicas: 0
querier:
replicas: 0
queryFrontend:
replicas: 0
queryScheduler:
replicas: 0
distributor:
replicas: 0
compactor:
replicas: 0
indexGateway:
replicas: 0
bloomCompactor:
replicas: 0
bloomGateway:
replicas: 0Далее выполним установку Grafana Loki используя команду:
$ helm install loki grafana/loki --namespace=monitoring --values values-loki.yamlУстановка Grafana Tempo
Подготовим файл values-tempo.yaml c добавлением значений Helm для установки Grafana Tempo, в данном примере будут использоваться все стандартные значения с единственным изменением — включением постоянного хранилища:
persistence:
enabled: trueВыполним установку Grafana Tempo:
$ helm install tempo grafana/tempo --namespace=monitoring --values values-tempo.yamlУстановка Grafana Alloy
Далее выполним создание Helm Values файла values-alloy.yaml для установки Grafana Alloy, в данном примере выполнена настройка конфигурационного файла Alloy в котором подключен приёмник Faro с отправкой в Loki и отправку через OpenTelemetry Collector в Tempo. Дополнительно в настройках приёмника Faro выполняется конфигурирование:
используемого порта;
настройки CORS;
ключа API через который будет выполнять отправку метрик Faro;
максимальный разрешённый размер полезной нагрузки;
указание rate лимита.
Также в values файле выполнено добавление extraPort для Faro, так-как по умолчанию в helm значениях создаётся только порт для web-интерфейса Grafana Alloy. Дополнительно выполнено включение ingress c указанием порта Faro, в дальнейшем указанный адрес в ingress будет использоваться при подключении Grafana Faro в Frontend JS приложениях, важно чтобы указанный адрес был доступ для подключения со стороны клиентов использующих приложение, иначе отправка метрик будет невозможна:
alloy:
configMap:
create: true
content: |-
faro.receiver "frontend_applications" {
server {
listen_address = "0.0.0.0"
listen_port = 8030
cors_allowed_origins = ["http://example-frontend-app.local.ru"]
api_key = "api-key-app"
max_allowed_payload_size = "5MiB"
rate_limiting {
rate = 100
}
}
sourcemaps { }
output {
logs = [loki.process.logs_process.receiver]
traces = [otelcol.exporter.otlp.trace_write.input]
}
}
loki.process "logs_process" {
forward_to = [loki.write.logs_write.receiver]
stage.logfmt {
mapping = { "kind" = "", "service_name" = "", "app_name" = ""}
}
stage.labels {
values = { "kind" = "kind", "service_name" = "service_name", "app" = "app_name" }
}
}
loki.write "logs_write" {
endpoint {
url = "http://loki.monitoring.svc.cluster.local:3100/loki/api/v1/push"
}
}
logging {
level = "info"
}
otelcol.receiver.otlp "default" {
grpc {
include_metadata = true
}
output {
metrics = []
logs = []
traces = [otelcol.exporter.otlp.trace_write.input]
}
}
otelcol.exporter.otlp "trace_write" {
retry_on_failure {
max_elapsed_time = "1m0s"
}
client {
endpoint = "tempo.monitoring.svc.cluster.local:4317"
tls {
insecure = true
}
}
}
extraPorts:
- name: "faro"
port: 8030
targetPort: 8030
protocol: "TCP"
ingress:
enabled: true
path: /
faroPort: 8030
pathType: Prefix
hosts:
- alloy.local
Выполним установку Grafana Alloy с помощью команды:
$ helm install alloy grafana/alloy --namespace=monitoring --values values-alloy.yamlПроверим корректность установки Grafana Alloy с помощью web-интерфейса, для этого выполним перенаправление порта с помощью команды:
$ kubectl port-forward svc/alloy 8080:12345 -n monitoringДалее в браузере перейдём по адресу http://localhost:8080/ и увидим успешное подключение всех компонентов:
Установка Grafana
Выполним подготовку значений Helm в файле values-grafana.yaml для установки Grafana, в созданном values файле добавлены значения источников данных Loki и Tempo, а также выполнено создание постоянного хранилища и ingress:
persistence:
enabled: true
ingress:
enabled: true
hosts:
- grafana.local
datasources:
datasources.yaml:
apiVersion: 1
datasources:
- name: loki
type: loki
url: http://loki.monitoring.svc.cluster.local:3100
access: proxy
isDefault: true
- name: tempo
type: tempo
url: http://tempo.monitoring.svc.cluster.local:3100
access: proxyВыполним установку Grafana:
$ helm install grafana grafana/grafana --namespace=monitoring --values values-grafana.yamlПосле завершения установки Grafana выполним получения пароля для пользователя admin с помощью команды:
$ kubectl get secret --namespace monitoring grafana -o jsonpath="{.data.admin-password}" | base64 --decode ; echoПерейдём в web-интерфейс Grafana по адресу добавленному в ingress, далее в разделе Dashborad, выберем New — Import и выполним импорт дашборда для отображения будущих собираемых метрик. JSON дашборда для Grafana Faro доступен в официальном GitHub репозитории.
Подключение Grafana Faro в приложении
Выполним установку пакетов Grafana Faro используя команду:
$ npm install --save @grafana/faro-web-sdk @grafana/faro-web-tracingДалее в Frontend JavaScript приложении выполним добавление кода осуществляющий инициализацию Grafana Faro для сбора метрик и трейсов. В коде необходимо указание: названия приложения, его версии, а также API ключа и адреса ингресса Grafana Alloy созданного нами ранее при его установке:
import { getWebInstrumentations, initializeFaro } from '@grafana/faro-web-sdk';
import { TracingInstrumentation } from '@grafana/faro-web-tracing';
const faro = initializeFaro({
url: 'http://alloy.local/collect',
apiKey: 'api-key-app',
instrumentations: [...getWebInstrumentations(), new TracingInstrumentation()],
app: {
name: 'example-frontend-app',
version: '1.0.0',
},
});Просмотр данных мониторинга
Выполним запуск Frontend JavaScript приложения и перейдём в импортируемый нами ранее дашборд Grafana в котором мы увидим поступающие данные мониторинга:
Полные логи поступающие из Frontend приложения можно увидеть в Grafana перейдя в раздел Explore, далее выбрав источник Loki и выполнив запрос LogQL-{app="название_frontend_приложения"}
Поступающие трейсы в Tempo можно увидеть выбрав источник Tempo, далее в Query type необходимо выбрать TraceQL и ввести запрос- {rootServiceName="название_frontend_приложения"}
Дополнительная документация по использованию Grafana Faro:
