add frontend observability with Grafana Faro SDK

apiVersion: v2

name: frontend-observability

description: Grafana Alloy for React Frontend Telemetry

version: 0.1.0

apiVersion: v1

kind: ConfigMap

metadata:

  name: alloy-config

data:

  config.alloy: |

    logging {

      level = "info"

    }

    faro.receiver "frontend" {

      server {

        listen_address = "0.0.0.0"

        listen_port = 12345

        cors_allowed_origins = ["*"]

      }

      output {

        logs = [loki.echo.stdout.receiver]

      }

    }

    loki.echo "stdout" { }

apiVersion: apps/v1

kind: Deployment

metadata:

  name: grafana-alloy

spec:

  replicas: 1

  selector:

    matchLabels:

      app: grafana-alloy

  template:

    metadata:

      labels:

        app: grafana-alloy

    spec:

      containers:

      - name: alloy

        image: grafana/alloy:v1.0.0

        args:

          - run

          - /etc/alloy/config.alloy

          - --storage.path=/var/lib/alloy/data

          - --server.http.listen-addr=0.0.0.0:12344

        ports:

          - containerPort: 12344

            name: http

          - containerPort: 12345

            name: faro

        volumeMounts:

          - name: config

            mountPath: /etc/alloy

      volumes:

        - name: config

          configMap:

            name: alloy-config

apiVersion: networking.k8s.io/v1

kind: Ingress

metadata:

  name: grafana-alloy

  annotations:

    kubernetes.io/ingress.class: nginx

    nginx.ingress.kubernetes.io/force-ssl-redirect: "true"

    nginx.ingress.kubernetes.io/rewrite-target: /$1

spec:

  rules:

  - http:

      paths:

      - path: /telemetry/(.*)

        pathType: ImplementationSpecific

        backend:

          service:

            name: grafana-alloy

            port:

              number: 12345

apiVersion: v1

kind: Service

metadata:

  name: grafana-alloy

spec:

  selector:

    app: grafana-alloy

  ports:

    - protocol: TCP

      port: 12345

      targetPort: 12345