Observability/faro (#47)

* legger på grafana faro for web vitals
* fjerner browser env url'er som kun skal trenges serverside
* legger til codeowners

.env.example

@@ -3,4 +3,5 @@ DP_RAPPORTERING_URL="https://dp-rapportering.intern.dev.nav.no"
 IS_LOCALHOST="true"
 DP_RAPPORTERING_TOKEN=""
 NAIS_CLUSTER_NAME="dev-gcp"
-USE_MSW="true"
+USE_MSW="true"
+FARO_URL="http://localhost:12347/collect"

.nais/nais.yaml

@@ -49,6 +49,8 @@ spec:
       value: {{dekorator.env}}
     - name: COMMIT
       value: {{commit}}
+    - name: FARO_URL
+      value: {{faro_url}}
   accessPolicy:
     outbound:
       external:

.nais/vars-dev.yaml

@@ -2,3 +2,4 @@ ingress: "https://dagpenger.intern.dev.nav.no/rapportering"
 base_path: "/rapportering"
 idporten:
   level: idporten-loa-high
+faro_url: "https://telemetry.ekstern.dev.nav.no/collect"

.nais/vars-prod.yaml

@@ -2,3 +2,4 @@ ingress: "https://dagpenger.nav.no/rapportering"
 base_path: "/rapportering"
 idporten:
   level: Level4
+faro_url: "https://telemetry.nav.no/collect"

CODEOWNERS

@@ -0,0 +1,3 @@
+# These owners will be the default owners for everything in
+# the repo.
+* @navikt/teamdagpenger

app/root.tsx

@@ -22,6 +22,7 @@ import type { ISanityTexts } from "./sanity/sanity.types";
 import { getEnv } from "./utils/env.utils";
 
 import indexStyle from "~/index.css";
+import { initInstrumentation } from "~/utils/faro";
 
 export const sanityClient = createClient(sanityConfig);
 
@@ -87,13 +88,14 @@ export async function loader() {
     sanityTexts,
     env: {
       BASE_PATH: process.env.BASE_PATH,
-      DP_RAPPORTERING_URL: process.env.DP_RAPPORTERING_URL,
       IS_LOCALHOST: process.env.IS_LOCALHOST,
+      FARO_URL: process.env.FARO_URL,
     },
     fragments,
   });
 }
 
+initInstrumentation();
 export default function App() {
   const { env, fragments } = useLoaderData<typeof loader>();
   return (

app/utils/env.utils.ts

@@ -13,6 +13,7 @@ interface IEnv {
   USE_MSW: string;
   NAIS_APP_IMAGE: string;
   COMMIT: string;
+  FARO_URL: string;
 }
 
 export function getEnv(value: keyof IEnv) {

app/utils/faro.ts

@@ -0,0 +1,26 @@
+import { type Faro, getWebInstrumentations, initializeFaro } from "@grafana/faro-web-sdk";
+import { getEnv } from "~/utils/env.utils";
+let faro: Faro | null = null;
+
+export function initInstrumentation(): void {
+  if (typeof window === "undefined" || faro !== null) return;
+
+  getFaro();
+}
+
+export function getFaro(): Faro | null {
+  if (faro != null) return faro;
+  faro = initializeFaro({
+    url: getEnv("FARO_URL"), // required, see below
+    app: {
+      name: "dp-rapportering-frontend", // required
+      version: "0.1", // optional; useful in Grafana to get diff between versions
+    },
+    instrumentations: [
+      ...getWebInstrumentations({
+        captureConsole: true,
+      }),
+    ],
+  });
+  return faro;
+}

package.json

@@ -16,6 +16,7 @@
     "pre-commit": "lint-staged && npm run typecheck"
   },
   "dependencies": {
+    "@grafana/faro-web-sdk": "^1.2.3",
     "@navikt/aksel-icons": "^5.7.6",
     "@navikt/dp-auth": "^0.3.15",
     "@navikt/ds-css": "^5.7.6",