faro-web-sdk对于grafana 周边的使用属于一个all-in-one 模式的，都是通过grafana agent 进行转发处理的
参考架构
实际玩法
实际上并不是需要grafan cloud，实际上基于grafana agent 就可以了
参考配置
核心是利用了grafana agent的能力处理的（汇集了log，metrics，trace）
- docker-compose 文件
version: "3"
services:
synthetic-load-generator:
image: omnition/synthetic-load-generator:1.0.29
volumes:
- ./load-generator.json:/etc/load-generator.json
environment:
- TOPOLOGY_FILE=/etc/load-generator.json
- JAEGER_COLLECTOR_URL=http://agent:14268
depends_on:
- tempo
loki:
image: grafana/loki:2.6.0
ports:
- "3100:3100"
command: -config.file=/etc/loki/local-config.yaml
volumes:
- ./local-config.yaml:/etc/loki/local-config.yaml
promtail:
image: grafana/promtail:2.6.0
volumes:
- ./logs:/var/log
- ./promtail-config.yaml:/etc/promtail/config.yml
command: -config.file=/etc/promtail/config.yml
tempo:
image: grafana/tempo:latest
command: [ "-config.file=/etc/tempo.yaml" ]
volumes:
- ./tempo-local.yaml:/etc/tempo.yaml
- ./tempo-data:/tmp/tempo
ports:
- "14268:14268" # jaeger ingest
- "3200:3200" # tempo
- "4317:4317" # otlp grpc
- "4318:4318" # otlp http
- "9411:9411" # zipkin
postgres:
image: postgres:12
volumes:
- ./db_data:/var/lib/postgresql/data
ports:
- 5432:5432
environment:
POSTGRES_PASSWORD: postgrespassword
agent:
image: grafana/agent:main
ports:
- 12345:12345
- 12347:12347
entrypoint:
- /bin/agent
- -config.file=/etc/agent-config/agent.yaml
- -metrics.wal-directory=/tmp/agent/wal
- -enable-features=integrations-next
- -config.expand-env
- -config.enable-read-api
volumes:
- ./agent.yaml:/etc/agent-config/agent.yaml
- ./agent-data:/etc/agent/data
- ./logs:/var/log
prometheus:
image: prom/prometheus
ports:
- 9090:9090
volumes:
- ./promdata:/prometheus
- ./prometheus.yml:/etc/prometheus/prometheus.yml
command:
- '--config.file=/etc/prometheus/prometheus.yml'
- '--storage.tsdb.path=/prometheus'
victoriametrics:
image: victoriametrics/victoria-metrics
volumes:
- ./victoriametrics:/victoriametrics
ports:
- 8428:8428
command:
- '-storageDataPath=/victoriametrics'
- '-retentionPeriod=1'
grafana:
image: grafana/grafana
ports:
- 3000:3000
- 配置
agent.yaml
server:
log_level: debug
traces:
configs:
- name: default
service_graphs:
enabled: true
receivers:
jaeger:
protocols:
thrift_http:
remote_write:
- endpoint: tempo:4317
insecure: true
batch:
timeout: 5s
send_batch_size: 100
logs:
configs:
- name: default
positions:
filename: /tmp/positions.yaml
scrape_configs:
- job_name: varlogs
static_configs:
- targets: [localhost]
labels:
job: varlogs
__path__: /var/log/*log
clients:
- url: http://loki:3100/loki/api/v1/push
metrics:
global:
scrape_interval: 10s
remote_write:
- url: http://victoriametrics:8428/api/v1/write # 写到victoriametrics 中
configs:
- name: default
scrape_configs:
- job_name: avalanche
static_configs:
- targets: ['${AVALANCHE_HOST:-localhost:9001}']
integrations:
# 此处是faro-web-sdk的核心，会集成metrics，log 以及trace能力
app_agent_receiver:
autoscrape:
enable: true
metrics_instance: default
instance: mydemoappagent
logs_instance: default
logs_labels:
app: mydemoappagent_client
kind: ''
logs_send_timeout: '5s'
server:
api_key: dalongdemo
cors_allowed_origins:
- '*'
host: '0.0.0.0'
max_allowed_payload_size: 5e+07
rate_limiting:
burstiness: 100
enabled: true
rps: 100
sourcemaps:
download: true
traces_instance: default
node_exporter: {}
process:
process_names:
- name: "{{.Comm}}"
cmdline:
- '.+'
postgres_configs:
- data_source_names:
- postgresql://postgres:postgrespassword@postgres:5432/postgres?sslmode=disable
promtail-config.yaml
server:
http_listen_port: 9080
grpc_listen_port: 0
positions:
filename: /tmp/positions.yaml
clients:
- url: http://agent:3100/loki/api/v1/push
scrape_configs:
- job_name: system
static_configs:
- targets:
- localhost
labels:
job: varlogs
__path__: /var/log/*log
local-config.yaml loki 配置
auth_enabled: false
server:
http_listen_port: 3100
grpc_listen_port: 9096
common:
path_prefix: /tmp/loki
storage:
filesystem:
chunks_directory: /tmp/loki/chunks
rules_directory: /tmp/loki/rules
replication_factor: 1
ring:
instance_addr: 127.0.0.1
kvstore:
store: inmemory
schema_config:
configs:
- from: 2020-10-24
store: boltdb-shipper
object_store: filesystem
schema: v11
index:
prefix: index_
period: 24h
analytics:
reporting_enabled: false
# ruler:
# alertmanager_url: http://localhost:9093
# By default, Loki will send anonymous, but uniquely-identifiable usage and configuration
# analytics to Grafana Labs. These statistics are sent to https://stats.grafana.org/
#
# Statistics help us better understand how Loki is used, and they show us performance
# levels for most users. This helps us prioritize features and documentation.
# For more information on what's sent, look at
# https://github.com/grafana/loki/blob/main/pkg/usagestats/stats.go
# Refer to the buildReport method to see what goes into a report.
#
# If you would like to disable reporting, uncomment the following lines:
#analytics:
# reporting_enabled: false
tempo-local.yaml tempo 配置
<wiz_code_mirror>
search_enabled: true
metrics_generator_enabled: true
server:
http_listen_port: 3200
distributor:
receivers: # this configuration will listen on all ports and protocols that tempo is capable of.
jaeger: # the receives all come from the OpenTelemetry collector. more configuration information can
protocols: # be found there: https://github.com/open-telemetry/opentelemetry-collector/tree/main/receiver
thrift_http: #
grpc: # for a production deployment you should only enable the receivers you need!
thrift_binary:
thrift_compact:
zipkin:
otlp:
protocols:
http:
grpc:
opencensus:
ingester:
trace_idle_period: 10s # the length of time after a trace has not received spans to consider it complete and flush it
max_block_bytes: 1_000_000 # cut the head block when it hits this size or ...
max_block_duration: 5m # this much time passes
compactor:
compaction:
compaction_window: 1h # blocks in this time window will be compacted together
max_block_bytes: 100_000_000 # maximum size of compacted blocks
block_retention: 1h
compacted_block_retention: 10m
metrics_generator:
registry:
external_labels:
source: tempo
cluster: docker-compose
storage:
path: /tmp/tempo/generator/wal
remote_write:
- url: http://victoriametrics:8428/api/v1/write # 写到victoriametrics 中
send_exemplars: true
storage:
trace:
backend: local # backend configuration to use
block:
bloom_filter_false_positive: .05 # bloom filter false positive rate. lower values create larger filters but fewer false positives
index_downsample_bytes: 1000 # number of bytes per index record
encoding: zstd # block encoding/compression. options: none, gzip, lz4-64k, lz4-256k, lz4-1M, lz4, snappy, zstd, s2
wal:
path: /tmp/tempo/wal # where to store the the wal locally
encoding: snappy # wal encoding/compression. options: none, gzip, lz4-64k, lz4-256k, lz4-1M, lz4, snappy, zstd, s2
local:
path: /tmp/tempo/blocks
pool:
max_workers: 100 # worker pool determines the number of parallel requests to the object store backend
queue_depth: 10000
overrides:
metrics_generator_processors: [service-graphs, span-metrics]
web 集成
基于了parcel
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index page</title>
</head>
<body>
<input type="button" value="demoapp" onclick="demo()"/>
<script >
function demo(){
alert("demoapp")
}
</script>
<script type="module">
import { TracingInstrumentation } from '@grafana/faro-web-tracing';
import { initializeFaro, getWebInstrumentations } from '@grafana/faro-web-sdk';
const faro = initializeFaro({
url: 'http://localhost:12347/collect',
apiKey: 'dalongdemo',
instrumentations: [
app: {
name: 'frontend',
version: '1.0.0',
},
});
// get OTEL trace and context APIs
const { trace, context } = faro.api.getOTEL();
const tracer = trace.getTracer('default');
const span = tracer.startSpan('click');
context.with(trace.setSpan(context.active(), span), () => {
demoapp()
span.end();
});
console.log("demoapp")
</script>
</body>
</html>
效果
启动之后需要自己配置loki 以及prometheus （victoriametrics）,同时自己添加dashboard （web 的前端以及trace） 
说明
faro-web-sdk 通过agent提供的endpoint 访问，集成了loki，trace，metrics 的能力，功能还是很强大的，代码上也比较值得学习，具体运行项目可以参考github 源码
参考资料
https://grafana.com/docs/agent/latest/configuration/integrations/integrations-next/app-agent-receiver-config/
https://github.com/grafana/faro-web-sdk
https://github.com/rongfengliang/grafana-agent-victoriametrics-loki-faro-tempo-learning