Faro i dine-pleiepenger

Author: frodehansen2

apps/dine-pleiepenger/nais.js

@@ -0,0 +1,7 @@
+export default {
+    telemetryCollectorURL: 'http://localhost:12347/collect',
+    app: {
+        name: 'dine-pleiepenger',
+        version: 'dev',
+    },
+};

apps/dine-pleiepenger/nais/dev-gcp.json

@@ -24,6 +24,7 @@
         "NEXT_PUBLIC_APPSTATUS_DATASET": "staging",
         "NEXT_PUBLIC_APPSTATUS_PROJECT_ID": "ryujtq87",
         "NPM_CONFIG_CACHE": "/tmp",
+        "NEXT_PUBLIC_TELEMETRY_URL": "https://telemetry.dev-gcp.nav.cloud.nais.io/collect",
 
         "NEXT_PUBLIC_DINE_UTBETALINGER": "https://tjenester.nav.no/utbetalingsoversikt/",
         "NEXT_PUBLIC_ENDRINGSDIALOG_URL": "https://endringsmelding-pleiepenger.intern.dev.nav.no/",

apps/dine-pleiepenger/nais/envs/.env.dev

@@ -10,6 +10,8 @@ NEXT_PUBLIC_API_URL_BRUKERDIALOG=http://k9-brukerdialog-api
 NEXT_PUBLIC_FEATURE_APPSTATUS=off
 NEXT_PUBLIC_APPSTATUS_DATASET=staging
 NEXT_PUBLIC_APPSTATUS_PROJECT_ID=ryujtq87
+NEXT_PUBLIC_TELEMETRY_URL=https://telemetry.dev-gcp.nav.cloud.nais.io/collect
+
 
 # Innholdslenker
 NEXT_PUBLIC_DINE_UTBETALINGER=https://tjenester.nav.no/utbetalingsoversikt/

apps/dine-pleiepenger/nais/envs/.env.prod

@@ -10,6 +10,7 @@ NEXT_PUBLIC_API_URL_BRUKERDIALOG=http://k9-brukerdialog-api
 NEXT_PUBLIC_FEATURE_APPSTATUS=off
 NEXT_PUBLIC_APPSTATUS_DATASET=production
 NEXT_PUBLIC_APPSTATUS_PROJECT_ID=ryujtq87
+NEXT_PUBLIC_TELEMETRY_URL=https://telemetry.prod-gcp.nav.cloud.nais.io/collect
 
 # Innholdslenker
 NEXT_PUBLIC_DINE_UTBETALINGER=https://tjenester.nav.no/utbetalingsoversikt/

apps/dine-pleiepenger/nais/prod-gcp.json

@@ -24,6 +24,7 @@
         "NEXT_PUBLIC_FEATURE_APPSTATUS": "off",
         "NEXT_PUBLIC_APPSTATUS_DATASET": "production",
         "NEXT_PUBLIC_APPSTATUS_PROJECT_ID": "ryujtq87",
+        "NEXT_PUBLIC_TELEMETRY_URL": "https://telemetry.prod-gcp.nav.cloud.nais.io/collect",
 
         "NEXT_PUBLIC_DINE_UTBETALINGER": "https://tjenester.nav.no/utbetalingsoversikt/",
         "NEXT_PUBLIC_ENDRINGSDIALOG_URL": "https://www.nav.no/familie/sykdom-i-familien/soknad/endringsmelding-pleiepenger",

apps/dine-pleiepenger/next.config.js

@@ -13,6 +13,7 @@ const appDirectives = {
         'https://*.nav.no',
         'https://*.uxsignals.com',
         'http://localhost:1234',
+        'http://localhost:12347',
         'http://*.api.sanity.io',
     ],
 };

apps/dine-pleiepenger/package.json

@@ -14,6 +14,8 @@
         "storybook": "storybook dev -p 6006"
     },
     "dependencies": {
+        "@grafana/faro-web-sdk": "1.5.1",
+        "@grafana/faro-web-tracing": "1.5.1",
         "@navikt/appstatus-react-ds": "workspace: *",
         "@navikt/nav-dekoratoren-moduler": "2.1.6",
         "@navikt/next-logger": "1.23.0",

apps/dine-pleiepenger/src/faro/faro.ts

@@ -0,0 +1,43 @@
+import { Faro, getWebInstrumentations, initializeFaro, LogLevel } from '@grafana/faro-web-sdk';
+import { TracingInstrumentation } from '@grafana/faro-web-tracing';
+import { browserEnv } from '../utils/env';
+import nais from '../../nais.js';
+let faro: Faro | null = null;
+
+export function initInstrumentation(): void {
+    if (typeof window === 'undefined' || faro !== null) return;
+
+    getFaro();
+}
+
+export function getFaro(): Faro {
+    if (faro != null) return faro;
+    faro = initializeFaro({
+        url: browserEnv.NEXT_PUBLIC_TELEMETRY_URL,
+        app: nais.app,
+        instrumentations: [
+            ...getWebInstrumentations({
+                captureConsole: false,
+            }),
+            new TracingInstrumentation(),
+        ],
+    });
+    return faro;
+}
+
+export function pinoLevelToFaroLevel(pinoLevel: string): LogLevel {
+    switch (pinoLevel) {
+        case 'trace':
+            return LogLevel.TRACE;
+        case 'debug':
+            return LogLevel.DEBUG;
+        case 'info':
+            return LogLevel.INFO;
+        case 'warn':
+            return LogLevel.WARN;
+        case 'error':
+            return LogLevel.ERROR;
+        default:
+            throw new Error(`Unknown level: ${pinoLevel}`);
+    }
+}

apps/dine-pleiepenger/src/pages/_app.page.tsx

@@ -1,6 +1,7 @@
 import { Status, StatusMessage } from '@navikt/appstatus-react-ds';
 import { ReactElement } from 'react';
 import { IntlProvider } from 'react-intl';
+import { configureLogger } from '@navikt/next-logger';
 import { InnsynPsbApp } from '@navikt/sif-app-register';
 import { AmplitudeProvider } from '@navikt/sif-common-amplitude';
 import { storageParser } from '@navikt/sif-common-core-ds/src/utils/persistence/storageParser';
@@ -13,20 +14,31 @@ import ErrorBoundary from '../components/error-boundary/ErrorBoundary';
 import HentInnsynsdataFeilet from '../components/hent-innsynsdata-feilet/HentInnsynsdataFeilet';
 import EmptyPage from '../components/page-layout/empty-page/EmptyPage';
 import { InnsynsdataContextProvider } from '../context/InnsynsdataContextProvider';
+import { getFaro, initInstrumentation, pinoLevelToFaroLevel } from '../faro/faro';
+import { messages } from '../i18n';
 import { Innsynsdata } from '../types/InnsynData';
 import appSentryLogger from '../utils/appSentryLogger';
 import { browserEnv } from '../utils/env';
 import UnavailablePage from './unavailable.page';
 import 'react-loading-skeleton/dist/skeleton.css';
 import '../components/process/process.css';
 import '../style/global.css';
-import { messages } from '../i18n';
 
-export const APPLICATION_KEY = 'sif-innsyn';
+export const AMPLITUDE_APPLICATION_KEY = 'sif-innsyn';
 
 const innsynsdataFetcher = async (url: string): Promise<Innsynsdata> =>
     axios.get(url, { transformResponse: storageParser }).then((res) => res.data);
 
+initInstrumentation();
+
+configureLogger({
+    basePath: process.env.NEXT_PUBLIC_BASE_PATH,
+    onLog: (log) =>
+        getFaro().api.pushLog(log.messages, {
+            level: pinoLevelToFaroLevel(log.level.label),
+        }),
+});
+
 function MyApp({ Component, pageProps }: AppProps): ReactElement {
     const { data, error, isLoading } = useSWR<Innsynsdata, AxiosError>(
         `${browserEnv.NEXT_PUBLIC_BASE_PATH}/api/innsynsdata`,

apps/dine-pleiepenger/src/pages/api/appStatus.api.ts

@@ -4,7 +4,7 @@ import { withAuthenticatedApi } from '../../auth/withAuthentication';
 import { getXRequestId } from '../../utils/apiUtils';
 import { SanityConfig, fetchStatus } from '@navikt/appstatus-react-ds';
 import { browserEnv } from '../../utils/env';
-import { APPLICATION_KEY } from '../_app.page';
+import { AMPLITUDE_APPLICATION_KEY } from '../_app.page';
 import { ApplicationState } from '@navikt/appstatus-react-ds/src/hooks/useGetApplicationStatus';
 
 const sanityConfig: SanityConfig = {
@@ -13,7 +13,7 @@ const sanityConfig: SanityConfig = {
 };
 
 export const fetchAppStatus = async (): Promise<ApplicationState | undefined> => {
-    return await fetchStatus(APPLICATION_KEY, sanityConfig);
+    return await fetchStatus(AMPLITUDE_APPLICATION_KEY, sanityConfig);
 };
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {

apps/dine-pleiepenger/src/utils/env.ts

@@ -9,6 +9,9 @@ export const publicEnvSchema = z.object({
     NEXT_PUBLIC_API_URL_INNSYN: z.union([z.string(), z.undefined()]),
     NEXT_PUBLIC_API_URL_BRUKERDIALOG: z.union([z.string(), z.undefined()]),
 
+    /** Faro telemetry */
+    NEXT_PUBLIC_TELEMETRY_URL: z.string(),
+
     /** Appstatus */
     NEXT_PUBLIC_FEATURE_APPSTATUS: z.string(),
     NEXT_PUBLIC_APPSTATUS_PROJECT_ID: z.string(),
@@ -59,6 +62,7 @@ export const serverEnvSchema = z.object({
  * They MUST be provided during the build step.
  */
 export const browserEnv = publicEnvSchema.parse({
+    NEXT_PUBLIC_TELEMETRY_URL: process.env.NEXT_PUBLIC_TELEMETRY_URL,
     NEXT_PUBLIC_BASE_PATH: process.env.NEXT_PUBLIC_BASE_PATH,
     NEXT_PUBLIC_LOGIN_URL: process.env.NEXT_PUBLIC_LOGIN_URL,
     NEXT_PUBLIC_RUNTIME_ENVIRONMENT: process.env.NEXT_PUBLIC_RUNTIME_ENVIRONMENT,