Merge pull request #293 from COS301-SE-2024/feat/web/profiling

chore: Update npm dependencies and add Faro SDK and Tracing libraries
COS301-SE-2024 · Aug 12, 2024 · ae15f6a · ae15f6a
2 parents debc271 + b46e0b9
commit ae15f6a
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 79 deletions.
diff --git a/frontend/occupi-web/bun.lockb b/frontend/occupi-web/bun.lockb
diff --git a/frontend/occupi-web/package.json b/frontend/occupi-web/package.json
@@ -17,6 +17,9 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@grafana/faro-react": "^1.9.0",
+    "@grafana/faro-web-sdk": "^1.9.0",
+    "@grafana/faro-web-tracing": "^1.9.0",
     "@headlessui/react": "^2.1.1",
     "@headlessui/tailwindcss": "^0.2.1",
     "@heroicons/react": "^2.1.4",

diff --git a/frontend/occupi-web/src/App.tsx b/frontend/occupi-web/src/App.tsx
@@ -4,6 +4,8 @@ import { Layout } from "@layouts/index";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { NotificationsSettings } from "@pages/notificationsSettings/NotificationsSettings";
+import { FaroRoutes } from '@grafana/faro-react';
+import ProtectedRoutes from "@components/protectedRoutes/ProtectedRoutes";
 
 function App() {
   // Initialize the theme state with system preference
@@ -33,40 +35,39 @@ function App() {
   }, [theme]);
   return (
     <Router>
-      <Routes>
-        <Route path="/" element={<LoginForm />} />
-        <Route path="/otp" element={<OtpPage />} />
+        <FaroRoutes>
+            <Route path="/" element={<LoginForm />} />
+            <Route path="/otp" element={<OtpPage />} />
+            <Route
+              path="/*"
+              element={
+                <ProtectedRoutes>
+                  <Layout>
+                    <Routes>
+                      <Route path="dashboard/*" element={<Dashboard />}>
+                        <Route path="overview" element={<OverviewComponent />} />
+                        <Route path="bookings" element={<BookingComponent />} />
+                        <Route path="visitations" element={<Visitation />} />
+                        <Route path="analysis" element={<Analysis />} />
+                      </Route>
+                      <Route path="reports" element={<PDFReport />} />{/**attach appropriate component */}
+                      <Route path="faq" element={ <Faq/> } />{/**attach appropriate component */}
+                      <Route path="ai-dashboard" element={<AiDashboard />} />{/**consider making ths its own page */}
+                      <Route path="rooms" element={<Rooms />} />{/**attach appropriate component */}
+                      {/* <Route path="notifications" element={<Notifications />} />*attach appropriate component */}
 
-        <Route path="/*" element={
-          <Layout>
-          <Routes>
-            <Route path="dashboard/*" element={<Dashboard />} >
-              <Route path="overview" element={<OverviewComponent />} />
-              <Route path="bookings" element={<BookingComponent />} />*attach appropriate component
-              <Route path="visitations" element={<Visitation />} />{/**attach appropriate component */}
-              <Route path="analysis" element={<Analysis/>} />{}
-            </Route>
-
-            <Route path="reports" element={<PDFReport />} />{/**attach appropriate component */}
-            <Route path="faq" element={ <Faq/> } />{/**attach appropriate component */}
-            <Route path="ai-dashboard" element={<AiDashboard />} />{/**consider making ths its own page */}
-           <Route path="rooms" element={<Rooms />} />{/**attach appropriate component */}
-           {/* <Route path="notifications" element={<Notifications />} />*attach appropriate component */}
-
-
-
-
-            <Route path="settings/*" element={<Settings />}>
-              <Route path="profile" element={<ProfileView />} />{/**attach appropriate component */}
-              <Route path="appearance" element={<Appearance />} />
-              <Route path="notifications" element={<NotificationsSettings />} />{/**attach appropriate component */}
-              <Route path="security" element={<SecurityPage />} />{/**attach appropriate component */}
-              <Route path="about" element={<AboutPage />} />{/**attach appropriate component */}
-            </Route>
-          </Routes>
-        </Layout>}>
+                      <Route path="settings/*" element={<Settings />}>
+                        <Route path="profile" element={<ProfileView />} />{/**attach appropriate component */}
+                        <Route path="appearance" element={<Appearance />} />
+                        <Route path="notifications" element={<NotificationsSettings />} />{/**attach appropriate component */}
+                        <Route path="security" element={<SecurityPage />} />{/**attach appropriate component */}
+                        <Route path="about" element={<AboutPage />} />{/**attach appropriate component */}
+                      </Route>
+                    </Routes>
+                  </Layout>
+                </ProtectedRoutes>}>
         </Route>
-      </Routes>
+      </FaroRoutes>
     </Router>
   );
 }

diff --git a/frontend/occupi-web/src/instrumentation.ts b/frontend/occupi-web/src/instrumentation.ts
@@ -0,0 +1,32 @@
+import { createRoutesFromChildren, matchRoutes, Routes, useLocation, useNavigationType } from 'react-router-dom';
+import { createReactRouterV6Options, getWebInstrumentations, initializeFaro, ReactIntegration } from '@grafana/faro-react';
+import { TracingInstrumentation } from '@grafana/faro-web-tracing';
+
+export const initFaro = () => {
+return initializeFaro({
+  url: 'https://faro-collector-prod-eu-west-2.grafana.net/collect/ea5284621142dec3268388718e2edb70',
+  app: {
+    name: 'Occupi-web',
+    version: '1.0.0',
+    environment: 'production'
+  },
+
+  instrumentations: [
+    // Mandatory, omits default instrumentations otherwise.
+    ...getWebInstrumentations(),
+
+    new TracingInstrumentation(),
+
+    // React integration for React applications.
+     new ReactIntegration({
+      router: createReactRouterV6Options({
+        createRoutesFromChildren,
+        matchRoutes,
+        Routes,
+        useLocation,
+        useNavigationType,
+      }),
+    }),
+  ],
+});
+}
diff --git a/frontend/occupi-web/src/main.tsx b/frontend/occupi-web/src/main.tsx
@@ -3,7 +3,9 @@ import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
 import {NextUIProvider} from "@nextui-org/react";
-// import { UserProvider } from 'userStore.tsx';
+import { initFaro } from 'instrumentation.ts';
+
+initFaro();
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   // <UserProvider>

diff --git a/frontend/occupi-web/vite.config.ts b/frontend/occupi-web/vite.config.ts
@@ -32,7 +32,7 @@ export default defineConfig({
     // https: true,
     proxy: {
       '/api': {
-        target: 'https://dev.occupi.tech',
+        target: process.env.NODE_ENV === "development" || process.env.NODE_ENV === "preview-dev" ? 'https://dev.occupi.tech' : "https://occupi.tech",
         changeOrigin: true,
         secure: false,
         rewrite: (path) => path.replace(/^\/api/, '/api'),
@@ -49,7 +49,7 @@ export default defineConfig({
         },
       },
       '/auth': {
-        target: 'https://dev.occupi.tech',
+        target: process.env.NODE_ENV === "development" || process.env.NODE_ENV === "preview-dev" ? 'https://dev.occupi.tech' : "https://occupi.tech",
         changeOrigin: true,
         secure: false,
         rewrite: (path) => path.replace(/^\/auth/, '/auth'),

diff --git a/occupi-backend/go.mod b/occupi-backend/go.mod
@@ -8,6 +8,7 @@ require (
 	github.com/alexedwards/argon2id v1.0.0
 	github.com/centrifugal/gocent/v3 v3.3.0
 	github.com/dgrijalva/jwt-go v3.2.0+incompatible
+	github.com/getsentry/sentry-go v0.28.1
 	github.com/gin-contrib/cors v1.7.2
 	github.com/gin-contrib/sessions v1.0.1
 	github.com/gin-gonic/gin v1.10.0
@@ -19,22 +20,28 @@ require (
 	github.com/newrelic/go-agent/v3 v3.34.0
 	github.com/nfnt/resize v0.0.0-20180221191011-83c6a9932646
 	github.com/oliveroneill/exponent-server-sdk-golang v0.0.0-20210823140141-d050598be512
+	github.com/prometheus/client_golang v1.19.1
 	github.com/rabbitmq/amqp091-go v1.10.0
 	github.com/sirupsen/logrus v1.9.3
 	github.com/spf13/viper v1.19.0
 	github.com/stretchr/testify v1.9.0
 	github.com/ulule/limiter/v3 v3.11.2
 	go.mongodb.org/mongo-driver v1.15.0
+	go.opentelemetry.io/contrib/instrumentation/runtime v0.53.0
+	go.opentelemetry.io/otel v1.28.0
+	go.opentelemetry.io/otel/exporters/otlp/otlpmetric/otlpmetrichttp v1.28.0
+	go.opentelemetry.io/otel/exporters/otlp/otlptrace v1.28.0
+	go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracehttp v1.28.0
+	go.opentelemetry.io/otel/sdk v1.28.0
+	go.opentelemetry.io/otel/sdk/metric v1.28.0
 	gopkg.in/gomail.v2 v2.0.0-20160411212932-81ebce5c23df
 )
 
 require (
 	github.com/beorn7/perks v1.0.1 // indirect
 	github.com/cenkalti/backoff/v4 v4.3.0 // indirect
 	github.com/cespare/xxhash/v2 v2.2.0 // indirect
-	github.com/felixge/httpsnoop v1.0.4 // indirect
 	github.com/fxamacker/cbor/v2 v2.7.0 // indirect
-	github.com/getsentry/sentry-go v0.28.1 // indirect
 	github.com/go-logr/logr v1.4.2 // indirect
 	github.com/go-logr/stdr v1.2.2 // indirect
 	github.com/go-webauthn/x v0.1.12 // indirect
@@ -43,23 +50,13 @@ require (
 	github.com/google/go-tpm v0.9.1 // indirect
 	github.com/grpc-ecosystem/grpc-gateway/v2 v2.20.0 // indirect
 	github.com/patrickmn/go-cache v2.1.0+incompatible // indirect
-	github.com/prometheus/client_golang v1.19.1 // indirect
 	github.com/prometheus/client_model v0.5.0 // indirect
 	github.com/prometheus/common v0.48.0 // indirect
 	github.com/prometheus/procfs v0.12.0 // indirect
 	github.com/x448/float16 v0.8.4 // indirect
-	go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.53.0 // indirect
-	go.opentelemetry.io/contrib/instrumentation/runtime v0.53.0 // indirect
-	go.opentelemetry.io/otel v1.28.0 // indirect
-	go.opentelemetry.io/otel/exporters/otlp/otlpmetric/otlpmetrichttp v1.28.0 // indirect
-	go.opentelemetry.io/otel/exporters/otlp/otlptrace v1.28.0 // indirect
-	go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracehttp v1.28.0 // indirect
 	go.opentelemetry.io/otel/metric v1.28.0 // indirect
-	go.opentelemetry.io/otel/sdk v1.28.0 // indirect
-	go.opentelemetry.io/otel/sdk/metric v1.28.0 // indirect
 	go.opentelemetry.io/otel/trace v1.28.0 // indirect
 	go.opentelemetry.io/proto/otlp v1.3.1 // indirect
-	go.uber.org/zap v1.27.0 // indirect
 	google.golang.org/genproto/googleapis/api v0.0.0-20240701130421-f6361c86f094 // indirect
 	google.golang.org/genproto/googleapis/rpc v0.0.0-20240701130421-f6361c86f094 // indirect
 	google.golang.org/grpc v1.64.0 // indirect
@@ -97,7 +94,6 @@ require (
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
 	github.com/montanaflynn/stats v0.7.1 // indirect
-	github.com/newrelic/go-agent/v3/integrations/logcontext-v2/nrzap v1.2.1
 	github.com/newrelic/go-agent/v3/integrations/nrgin v1.3.1
 	github.com/newrelic/go-agent/v3/integrations/nrlogrus v1.0.1
 	github.com/pelletier/go-toml/v2 v2.2.2 // indirect
@@ -116,7 +112,6 @@ require (
 	github.com/xdg-go/scram v1.1.2 // indirect
 	github.com/xdg-go/stringprep v1.0.4 // indirect
 	github.com/youmark/pkcs8 v0.0.0-20201027041543-1326539a0a0a // indirect
-	go.uber.org/atomic v1.9.0 // indirect
 	go.uber.org/multierr v1.10.0 // indirect
 	golang.org/x/arch v0.8.0 // indirect
 	golang.org/x/crypto v0.25.0 // indirect