add FE tracking with grafana faro

src/App.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import App from './App';
 
 test('renders learn react link', () => {
-  render(<App />);
+  render(<App faro={undefined}/>);
 });

src/App.tsx

@@ -2,20 +2,21 @@ import React from 'react';
 import './App.css';
 import CreateCharacter from "./pages/CreateCharacter";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import {Faro} from "@grafana/faro-web-sdk";
 
-const router = createBrowserRouter([
-    {
-        path: "/",
-        element: <CreateCharacter />,
-    },
-]);
+function App(props: {faro?: Faro}) {
+    const router = createBrowserRouter([
+        {
+            path: "/",
+            element: <CreateCharacter faro={props.faro} />,
+        },
+    ]);
 
-function App() {
-  return (
-      <div className='container'>
-        <RouterProvider router={router} />
-      </div>
-  );
+    return (
+        <div className='container'>
+            <RouterProvider router={router} />
+        </div>
+    );
 }
 
 export default App;

src/index.tsx

@@ -4,13 +4,31 @@ import 'bootstrap/dist/css/bootstrap.css';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { getWebInstrumentations, initializeFaro } from '@grafana/faro-web-sdk';
+
+const faro = window.location.hostname === 'localhost' ? undefined : initializeFaro({
+    url: 'https://faro-collector-prod-eu-west-2.grafana.net/collect/88adcc2543da5af525c451166286f2cc',
+    app: {
+        name: 'kemkas',
+        version: '1.0.0',
+        environment: 'production'
+    },
+    instrumentations: [
+        // Mandatory, overwriting the instrumentations array would cause the default instrumentations to be omitted
+        ...getWebInstrumentations(),
+
+        // Initialization of the tracing package.
+        // This packages is optional because it increases the bundle size noticeably. Only add it if you want tracing data.
+        // new TracingInstrumentation(),
+    ],
+});
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <App faro={faro} />
   </React.StrictMode>
 );
 

src/pages/CreateCharacter.tsx

@@ -27,8 +27,10 @@ import LevelUps from "../components/LevelUps";
 import HarcosFegyverSpecializacio from "../components/HarcosFegyverSpecializacio";
 import Felszereles from '../components/Felszereles';
 import { KarakterFelszereles } from '../domain-models/felszereles';
+import {Faro} from "@grafana/faro-web-sdk";
 
-function CreateCharacterPage() {
+function CreateCharacterPage(props: {faro?: Faro}) {
+    const {faro} = props
 
     let [karakter, changeKarakter] = useState(KarakterDefaults)
 
@@ -47,6 +49,7 @@ function CreateCharacterPage() {
 
     const canLevelUp = CanLevelUp(karakter)
 
+
     return (
         <div>
             <div className='container-fluid p-5 bg-black text-white text-center'>
@@ -147,7 +150,13 @@ function CreateCharacterPage() {
                     <Felszereles osztaly={karakter.osztaly} felszereles={karakter.felszereles} changeFelszereles={setFelszereles} harcosSpec={karakter.harcosSpecializaciok} />
 
                     <div className='d-grid gap-2 m-5'>
-                        <button className='btn btn-danger btn-lg' type='button' onClick={async () =>  await CreatePDF(KarakterInputToPdfView(karakter))}>Létrehozás</button>
+                        <button className='btn btn-danger btn-lg' type='button' onClick={async () => {
+                            faro?.api.pushEvent('character_created', {
+                                osztaly: karakter.osztaly,
+                                szint: karakter.szint.toString()
+                            })
+                            await CreatePDF(KarakterInputToPdfView(karakter))
+                        }}>Létrehozás</button>
                     </div>
                 </form>
             </div>