integrated grafana faro in codebase

Author: Koufan-De-King

Docs/Production/GrafanaFaro.md

@@ -0,0 +1,27 @@
+# Grafana Faro with Grafana Alloy Setup Guide
+
+This guide covers setting up Grafana Alloy for monitoring your systems.
+
+## Step 1: Access Grafana
+1. Visit [Grafana's website](https://grafana.com/).
+2. Sign up using your preferred method (Email, Google, or GitHub).
+
+## Step 2: Create a Grafana Cloud account 
+1. Upon logging in, create a Grafana cloud account and then give a name to the grafan stack offered in the free trial.
+2. Accept the default URL or customize it. This URL will serve as your monitoring domain.
+
+## Step 3: Configure Monitoring Platform
+1. Select the platform you want to monitor (e.g., Linux for Ubuntu).
+
+## Step 4: Run Grafana Alloy
+1. Install the Grafana Alloy agent on your machine following Grafana’s instructions.
+
+## Step 5: Generate an API Token
+1. Create a new API token to authenticate data from the Alloy agent.
+2. Name your token for easy reference.
+
+## Step 6: Install and Verify Connection
+1. Run the provided installation commands in your terminal.
+2. Verify the connection in Grafana to ensure the agent is successfully sending data.
+
+For a step-by-step walkthrough, visit [Scribe Guide](https://scribehow.com/shared/Creating_an_Account_and_Setting_Up_Grafana_Alloy__9EpUweIMRDyyjbSSgOKYCw).

src/main.tsx

@@ -2,17 +2,29 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
-import { createRoutesFromChildren, matchRoutes, Routes, useLocation, useNavigationType} from 'react-router-dom';
-import { getWebInstrumentations, initializeFaro, ReactIntegration, ReactRouterVersion } from '@grafana/faro-react';
-import { TracingInstrumentation } from '@grafana/faro-web-tracing';
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  Routes,
+  useLocation,
+  useNavigationType,
+} from "react-router-dom";
+import {
+  getWebInstrumentations,
+  initializeFaro,
+  ReactIntegration,
+  ReactRouterVersion,
+} from "@grafana/faro-react";
+import { TracingInstrumentation } from "@grafana/faro-web-tracing";
 
 initializeFaro({
-  url: 'https://faro-collector-prod-us-east-0.grafana.net/collect/44231aee736ba596035f91e852090587',
+  // Replace with ADORSYS' grafana cloud webank-userapp collector url
+  url: "URL",
   app: {
-    name: 'webank-userapp',
-    version: '1.0.0',
-    environment: 'production'
-  }, 
+    name: "webank-userapp",
+    version: "1.0.0",
+    environment: "production",
+  },
   instrumentations: [
     // Mandatory, omits default instrumentations otherwise.
     ...getWebInstrumentations(),
@@ -24,15 +36,15 @@ initializeFaro({
       router: {
         version: ReactRouterVersion.V6,
         dependencies: {
-          createRoutesFromChildren, 
-          matchRoutes, 
-          Routes, 
-          useLocation, 
-          useNavigationType
-        }
-      }     
-    })
-  ]
+          createRoutesFromChildren,
+          matchRoutes,
+          Routes,
+          useLocation,
+          useNavigationType,
+        },
+      },
+    }),
+  ],
 });
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>

vite.config.ts

@@ -6,13 +6,13 @@ import faroUploader from '@grafana/faro-rollup-plugin';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-
+    // Replace with the endpoint, stack id, app id and api key of ADORSYS' grafana cloud
     faroUploader({
       appName: 'webank-userapp',
-      endpoint: 'https://faro-api-prod-us-east-0.grafana.net/faro/api/v1',
-      appId: '2403',
-      stackId: '1085430',
-      apiKey: 'glc_eyJvIjoiMTI2Njk5OSIsIm4iOiJ1c2VyLWFwcC11cGxvYWQta2V5LWFwcHRva2VuIiwiayI6IjkyMzJSVjlOVzk4eG14NUpyQzIwVXFjcCIsIm0iOnsiciI6InVzIn19',
+      endpoint: 'END POINT',
+    appId: 'APP ID',
+      stackId: 'STACK ID',
+      apiKey: 'API KEY',
     }),
 
     react(),