grafana agent 配置支持faro-web-sdk试用

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: [...getWebInstrumentations(), new TracingInstrumentation()],

            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>