From 3c16e4a632f102c06e37fb9c70911ef97a673fbf Mon Sep 17 00:00:00 2001 From: Balint Morasz Date: Tue, 24 Oct 2023 11:44:56 +0200 Subject: [PATCH] add FE tracking with grafana faro --- package.json | 1 + src/App.test.tsx | 4 +- src/App.tsx | 25 ++++---- src/index.tsx | 20 ++++++- src/pages/CreateCharacter.tsx | 13 +++- yarn.lock | 108 +++++++++++++++++++++++++++++++++- 6 files changed, 153 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 451b99f..1ef52ef 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@grafana/faro-web-sdk": "^1.2.1", "@pdf-lib/fontkit": "^1.1.1", "@testing-library/jest-dom": "^6.1.4", "@testing-library/react": "^14.0.0", diff --git a/src/App.test.tsx b/src/App.test.tsx index 267c0b9..9552a0a 100644 --- a/src/App.test.tsx +++ b/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(); + render(); }); diff --git a/src/App.tsx b/src/App.tsx index 982f6d9..945104d 100644 --- a/src/App.tsx +++ b/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: , - }, -]); +function App(props: {faro?: Faro}) { + const router = createBrowserRouter([ + { + path: "/", + element: , + }, + ]); -function App() { - return ( -
- -
- ); + return ( +
+ +
+ ); } export default App; diff --git a/src/index.tsx b/src/index.tsx index 157ecca..9678e6d 100644 --- a/src/index.tsx +++ b/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( - + ); diff --git a/src/pages/CreateCharacter.tsx b/src/pages/CreateCharacter.tsx index 2ce948d..de2cc55 100644 --- a/src/pages/CreateCharacter.tsx +++ b/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 (
@@ -147,7 +150,13 @@ function CreateCharacterPage() {
- +
diff --git a/yarn.lock b/yarn.lock index 95efedc..634ee4d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1382,6 +1382,25 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.44.0.tgz#961a5903c74139390478bdc808bcde3fc45ab7af" integrity sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw== +"@grafana/faro-core@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@grafana/faro-core/-/faro-core-1.2.1.tgz#a95fd1376a928917f855068f101d356db067a0f4" + integrity sha512-gI8CpyhAKRsMbPHom3sAa0qCgiQAXZrlv43Tv2q30PgMgNsV4iWI6UKHN/7NPJyvUFd+h0B/plukYDGZxO1kew== + dependencies: + "@opentelemetry/api" "^1.4.1" + "@opentelemetry/api-metrics" "^0.33.0" + "@opentelemetry/otlp-transformer" "^0.41.2" + murmurhash-js "^1.0.0" + +"@grafana/faro-web-sdk@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@grafana/faro-web-sdk/-/faro-web-sdk-1.2.1.tgz#4818884bba26f07ebe563084fc0e4eed4108ef8d" + integrity sha512-86Bk3IjVNdV/WufkdPJVUvjx7PYKjPV5n2Szpn+dOewZqEDd1lIqhyFYqVVM9kdjT+ARbSzY5BZvb+r0Kh8tuQ== + dependencies: + "@grafana/faro-core" "^1.2.1" + ua-parser-js "^1.0.32" + web-vitals "^3.1.1" + "@humanwhocodes/config-array@^0.11.10": version "0.11.10" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2" @@ -1736,6 +1755,83 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" +"@opentelemetry/api-logs@0.41.2": + version "0.41.2" + resolved "https://registry.yarnpkg.com/@opentelemetry/api-logs/-/api-logs-0.41.2.tgz#600c9b3d79018e7421d2ff7189f41b6d2c987d6a" + integrity sha512-JEV2RAqijAFdWeT6HddYymfnkiRu2ASxoTBr4WsnGJhOjWZkEy6vp+Sx9ozr1NaIODOa2HUyckExIqQjn6qywQ== + dependencies: + "@opentelemetry/api" "^1.0.0" + +"@opentelemetry/api-metrics@^0.33.0": + version "0.33.0" + resolved "https://registry.yarnpkg.com/@opentelemetry/api-metrics/-/api-metrics-0.33.0.tgz#753d355289b7811ad254d6e5b0193bd1b9f23ab0" + integrity sha512-78evfPRRRnJA6uZ3xuBuS3VZlXTO/LRs+Ff1iv3O/7DgibCtq9k27T6Zlj8yRdJDFmcjcbQrvC0/CpDpWHaZYA== + dependencies: + "@opentelemetry/api" "^1.0.0" + +"@opentelemetry/api@^1.0.0", "@opentelemetry/api@^1.4.1": + version "1.6.0" + resolved "https://registry.yarnpkg.com/@opentelemetry/api/-/api-1.6.0.tgz#de2c6823203d6f319511898bb5de7e70f5267e19" + integrity sha512-OWlrQAnWn9577PhVgqjUvMr1pg57Bc4jv0iL4w0PRuOSRvq67rvHW9Ie/dZVMvCzhSCB+UxhcY/PmCmFj33Q+g== + +"@opentelemetry/core@1.15.2": + version "1.15.2" + resolved "https://registry.yarnpkg.com/@opentelemetry/core/-/core-1.15.2.tgz#5b170bf223a2333884bbc2d29d95812cdbda7c9f" + integrity sha512-+gBv15ta96WqkHZaPpcDHiaz0utiiHZVfm2YOYSqFGrUaJpPkMoSuLBB58YFQGi6Rsb9EHos84X6X5+9JspmLw== + dependencies: + "@opentelemetry/semantic-conventions" "1.15.2" + +"@opentelemetry/otlp-transformer@^0.41.2": + version "0.41.2" + resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-transformer/-/otlp-transformer-0.41.2.tgz#cd3a7185ef77fe9b7b4c2d2f9e001fa1d2fa6cf8" + integrity sha512-jJbPwB0tNu2v+Xi0c/v/R3YBLJKLonw1p+v3RVjT2VfzeUyzSp/tBeVdY7RZtL6dzZpA9XSmp8UEfWIFQo33yA== + dependencies: + "@opentelemetry/api-logs" "0.41.2" + "@opentelemetry/core" "1.15.2" + "@opentelemetry/resources" "1.15.2" + "@opentelemetry/sdk-logs" "0.41.2" + "@opentelemetry/sdk-metrics" "1.15.2" + "@opentelemetry/sdk-trace-base" "1.15.2" + +"@opentelemetry/resources@1.15.2": + version "1.15.2" + resolved "https://registry.yarnpkg.com/@opentelemetry/resources/-/resources-1.15.2.tgz#0c9e26cb65652a1402834a3c030cce6028d6dd9d" + integrity sha512-xmMRLenT9CXmm5HMbzpZ1hWhaUowQf8UB4jMjFlAxx1QzQcsD3KFNAVX/CAWzFPtllTyTplrA4JrQ7sCH3qmYw== + dependencies: + "@opentelemetry/core" "1.15.2" + "@opentelemetry/semantic-conventions" "1.15.2" + +"@opentelemetry/sdk-logs@0.41.2": + version "0.41.2" + resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-logs/-/sdk-logs-0.41.2.tgz#c3eeb6793bdfa52351d66e2e66637e433abed672" + integrity sha512-smqKIw0tTW15waj7BAPHFomii5c3aHnSE4LQYTszGoK5P9nZs8tEAIpu15UBxi3aG31ZfsLmm4EUQkjckdlFrw== + dependencies: + "@opentelemetry/core" "1.15.2" + "@opentelemetry/resources" "1.15.2" + +"@opentelemetry/sdk-metrics@1.15.2": + version "1.15.2" + resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-metrics/-/sdk-metrics-1.15.2.tgz#eadd0a049de9cd860e1e0d49eea01156469c4b60" + integrity sha512-9aIlcX8GnhcsAHW/Wl8bzk4ZnWTpNlLtud+fxUfBtFATu6OZ6TrGrF4JkT9EVrnoxwtPIDtjHdEsSjOqisY/iA== + dependencies: + "@opentelemetry/core" "1.15.2" + "@opentelemetry/resources" "1.15.2" + lodash.merge "^4.6.2" + +"@opentelemetry/sdk-trace-base@1.15.2": + version "1.15.2" + resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.15.2.tgz#4821f94033c55a6c8bbd35ae387b715b6108517a" + integrity sha512-BEaxGZbWtvnSPchV98qqqqa96AOcb41pjgvhfzDij10tkBhIu9m0Jd6tZ1tJB5ZHfHbTffqYVYE0AOGobec/EQ== + dependencies: + "@opentelemetry/core" "1.15.2" + "@opentelemetry/resources" "1.15.2" + "@opentelemetry/semantic-conventions" "1.15.2" + +"@opentelemetry/semantic-conventions@1.15.2": + version "1.15.2" + resolved "https://registry.yarnpkg.com/@opentelemetry/semantic-conventions/-/semantic-conventions-1.15.2.tgz#3bafb5de3e20e841dff6cb3c66f4d6e9694c4241" + integrity sha512-CjbOKwk2s+3xPIMcd5UNYQzsf+v94RczbdNix9/kQh38WiQkM90sUOi3if8eyHFgiBjBjhwXrA7W3ydiSQP9mw== + "@pdf-lib/fontkit@^1.1.1": version "1.1.1" resolved "https://registry.yarnpkg.com/@pdf-lib/fontkit/-/fontkit-1.1.1.tgz#f18473892b65e3253eb73f4569785abd2c03b1e0" @@ -6682,6 +6778,11 @@ multicast-dns@^7.2.5: dns-packet "^5.2.2" thunky "^1.0.2" +murmurhash-js@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/murmurhash-js/-/murmurhash-js-1.0.0.tgz#b06278e21fc6c37fa5313732b0412bcb6ae15f51" + integrity sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw== + mz@^2.7.0: version "2.7.0" resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32" @@ -9150,6 +9251,11 @@ typescript@^5.2.2: resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78" integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w== +ua-parser-js@^1.0.32: + version "1.0.36" + resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.36.tgz#a9ab6b9bd3a8efb90bb0816674b412717b7c428c" + integrity sha512-znuyCIXzl8ciS3+y3fHJI/2OhQIXbXw9MWC/o3qwyR+RGppjZHrM27CGFSKCJXi2Kctiz537iOu2KnXs1lMQhw== + unbox-primitive@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e" @@ -9345,7 +9451,7 @@ wbuf@^1.1.0, wbuf@^1.7.3: dependencies: minimalistic-assert "^1.0.0" -web-vitals@^3.5.0: +web-vitals@^3.1.1, web-vitals@^3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-3.5.0.tgz#3a5571f00743ecd059394b61e0adceec7fac2634" integrity sha512-f5YnCHVG9Y6uLCePD4tY8bO/Ge15NPEQWtvm3tPzDKygloiqtb4SVqRHBcrIAqo2ztqX5XueqDn97zHF0LdT6w==