fixup! Bruk faro til frontend observability

navikt · May 27, 2024 · ded784f · ded784f
1 parent a6314fe
commit ded784f
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -15,19 +15,20 @@
     <script src="%VITE_HODE_URL_V2%/latest/dist/bundle.js"></script>
     <link rel="stylesheet" href="%VITE_HODE_URL_V2%/latest/dist/index.css" />
 
-    <script type="application/javascript">
-      const global = globalThis;
-    </script>
-
-    <script type="module" src="/src/index.tsx"></script>
-
     <script unleash toggles="modiapersonoversikt.decorator-v3,modiapersonoversikt.enable-faro">
       const applicationFeatureToggles = {
           useNewDecorator: "$unleash{modiapersonoversikt.decorator-v3}"
           enableFaro: "$unleash{modiapersonoversikt.enable-faro}"
       };
       window.applicationFeatureToggles = applicationFeatureToggles;
     </script>
+
+    <script type="application/javascript">
+      const global = globalThis;
+    </script>
+
+    <script type="module" src="/src/index.tsx"></script>
+
     <title>Modia Personoversikt</title>
 </head>
 <body>

diff --git a/src/app/AppContainer.tsx b/src/app/AppContainer.tsx
@@ -49,7 +49,6 @@ import { LandingPage } from './internarbeidsflatedecorator/LandingPage';
 import { createBrowserHistory } from 'history';
 import { ConnectedRouter, routerMiddleware } from 'connected-react-router';
 import { initializeObservability } from '../utils/observability';
-import { FaroRoute } from '@grafana/faro-react';
 
 const AppStyle = styled.div`
     height: 100vh;
@@ -145,12 +144,12 @@ function AppContainer() {
                             <SentryRoute path={paths.landingPage}>
                                 <LandingPage />
                             </SentryRoute>
-                            <FaroRoute>
+                            <SentryRoute>
                                 <AppStyle>
                                     {!window.erChatvisning && <Decorator />}
                                     <App />
                                 </AppStyle>
-                            </FaroRoute>
+                            </SentryRoute>
                         </Switch>
                     </ConnectedRouter>
                 </Provider>

diff --git a/src/index.tsx b/src/index.tsx
@@ -9,7 +9,8 @@ setupTimeSpentMetrics();
 
 if (import.meta.env.DEV) {
     window.applicationFeatureToggles = {
-        useNewDecorator: true
+        useNewDecorator: true,
+        enableFaro: true
     };
 }
 

diff --git a/src/mock/index.ts b/src/mock/index.ts
@@ -420,7 +420,3 @@ setupStandardteksterMock(mock);
 setUpSaksbehandlersEnheterMock(mock);
 setupSaksbehandlerInnstillingerMock(mock);
 setupDraftMock(mock);
-
-window.applicationFeatureToggles = {
-    useNewDecorator: true
-};
diff --git a/src/sentry-route.ts b/src/sentry-route.ts
diff --git a/src/sentry-route.tsx b/src/sentry-route.tsx
@@ -0,0 +1,10 @@
+import React, { ComponentProps } from 'react';
+import { FaroRoute } from '@grafana/faro-react';
+import { Route } from 'react-router-dom';
+
+export const SentryRoute = ({ children, ...props }: ComponentProps<typeof FaroRoute>) => {
+    if (window.faro) {
+        return <FaroRoute {...props}>{children}</FaroRoute>;
+    }
+    return <Route {...props}>{children}</Route>;
+};
diff --git a/src/utils/observability.ts b/src/utils/observability.ts
@@ -1,21 +1,32 @@
-import { getWebInstrumentations, initializeFaro, ReactIntegration, ReactRouterVersion } from '@grafana/faro-react';
+import {
+    getWebInstrumentations,
+    initializeFaro,
+    InternalLoggerLevel,
+    ReactIntegration,
+    ReactRouterVersion
+} from '@grafana/faro-react';
 import { History } from 'history';
 import { Route } from 'react-router-dom';
 import { getEnvFromHost } from './environment';
 import { getWindowFeature } from './featureToggles';
 
 export const initializeObservability = (history: History) => {
-    if (!getWindowFeature('enableFaro')) return;
+    if (!getWindowFeature('enableFaro') && !import.meta.env.VITE_GRAFANA_COLLECTOR) return;
 
     const env = getEnvFromHost();
-    if (!['q2'].includes(env)) {
+    if (!['q2'].includes(env) && !import.meta.env.VITE_GRAFANA_COLLECTOR) {
         console.info('Not running in GCP, web observability disabled');
     }
+
+    console.log(import.meta.env.VITE_GRAFANA_COLLECTOR);
     initializeFaro({
-        url: env === 'prod' ? 'https://telemetry.nav.no/collect' : 'https://telemetry.ekstern.dev.nav.no/collect',
+        url:
+            import.meta.env.VITE_GRAFANA_COLLECTOR ??
+            (env === 'prod' ? 'https://telemetry.nav.no/collect' : 'https://telemetry.ekstern.dev.nav.no/collect'),
         app: {
             name: 'modiapersonoversikt'
         },
+        internalLoggerLevel: InternalLoggerLevel.VERBOSE,
         instrumentations: [
             ...getWebInstrumentations(),
             new ReactIntegration({

diff --git a/src/window-variabler.ts b/src/window-variabler.ts
@@ -1,9 +1,13 @@
+import { Faro } from "@grafana/faro-web-sdk";
+
 declare global {
     interface Window {
         erChatvisning: boolean;
         applicationFeatureToggles: {
             useNewDecorator: string | boolean;
+            enableFaro: string | boolean;
         };
+        faro?: Faro
     }
 }