Faro init: support configuring namespace value. Default quickpizza (#226)

Co-authored-by: Seamus Toth <seamus.toth@grafana.com>

Author: ppcano

README.md

@@ -188,11 +188,15 @@ To enable [Grafana Cloud Frontend Observability](https://grafana.com/docs/grafan
 
 1. In Grafana Cloud, create a new Frontend Observability application and set the domain to `http://localhost:3333`.
 2. Copy the application's Faro web URL.
-3. In your `.env` file, add the `QUICKPIZZA_CONF_FARO_URL` variable and set its value to your Faro web URL:
+3. In your `.env` file, add the following environment variables to configure your Faro URL and application name:
 
-    ```bash
-    QUICKPIZZA_CONF_FARO_URL=
-    ```
+```bash
+# FRONTEND OBSERVABILITY URL
+QUICKPIZZA_CONF_FARO_URL=
+
+# FRONTEND OBSERVABILITY APPLICATION NAME
+QUICKPIZZA_CONF_FARO_APP_NAME=
+```
 
 4. Restart the `docker-compose-cloud.yaml` environment:
 

docker-compose-cloud.yaml

@@ -9,10 +9,15 @@ services:
       QUICKPIZZA_OTLP_ENDPOINT: http://alloy:4318
       QUICKPIZZA_TRUST_CLIENT_TRACEID: 1
       # must be set with an .env file
-      QUICKPIZZA_CONF_FARO_URL: "${QUICKPIZZA_CONF_FARO_URL}"
-      QUICKPIZZA_PYROSCOPE_ENDPOINT: "${QUICKPIZZA_PYROSCOPE_ENDPOINT}"
       QUICKPIZZA_GRAFANA_CLOUD_USER: "${QUICKPIZZA_GRAFANA_CLOUD_USER}"
       QUICKPIZZA_GRAFANA_CLOUD_PASSWORD: "${QUICKPIZZA_GRAFANA_CLOUD_PASSWORD}"
+      QUICKPIZZA_PYROSCOPE_ENDPOINT: "${QUICKPIZZA_PYROSCOPE_ENDPOINT}"
+      QUICKPIZZA_CONF_FARO_URL: "${QUICKPIZZA_CONF_FARO_URL}"
+      QUICKPIZZA_CONF_FARO_APP_NAME: "${QUICKPIZZA_CONF_FARO_APP_NAME}"
+
+      # Namespace label in Faro. Default: quickpizza
+      # QUICKPIZZA_CONF_FARO_APP_NAMESPACE: quickpizza
+
       # Enable logging. Possible values: error, warn, debug. Default: info
       # QUICKPIZZA_LOG_LEVEL: debug
       # Service name label in Pyroscope. Default: quickpizza

pkg/web/src/hooks.client.ts

@@ -7,6 +7,11 @@ function setupFaro() {
 		.then((data) => data.json())
 		.then((config) => {
 			const url = config.faro_url;
+			const faroAppName = config.faro_app_name || 'QuickPizza';
+			const faroAppNamespace = config.faro_app_namespace || 'quickpizza';
+			const faroAppVersion = config.faro_app_version || '1.0.0';
+			const faroAppEnvironment = config.faro_app_environment || 'production';
+
 			if (!url) {
 				console.warn('Grafana Faro is not configured.');
 			}
@@ -15,9 +20,10 @@ function setupFaro() {
 			initializeFaro({
 				url,
 				app: {
-					name: 'QuickPizza',
-					version: '1.0.0',
-					environment: 'production'
+					name: faroAppName,
+					namespace: faroAppNamespace,
+					version: faroAppVersion,
+					environment: faroAppEnvironment
 				},
 				instrumentations: [
 					// Mandatory, overwriting the instrumentations array would cause the default instrumentations to be omitted