Bruk frontendlogger npm pakke istedenfor å hente det inn runtime

Author: AlexGaard

package-lock.json

@@ -35,13 +35,14 @@
   "dependencies": {
     "@craco/craco": "^5.6.4",
     "@navikt/fnrvalidator": "^1.1.3",
+    "@navikt/frontendlogger": "^2.0.0",
     "@navikt/navspa": "^1.1.1",
     "classnames": "^2.2.6",
     "constate": "^3.0.1",
     "craco-less": "^1.17.0",
     "dayjs": "^1.8.36",
-    "lodash.throttle": "^4.1.1",
     "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1",
     "nav-frontend-alertstriper": "^3.0.23",
     "nav-frontend-alertstriper-style": "^2.0.17",
     "nav-frontend-chevron": "^1.0.13",

package.json

@@ -6,13 +6,6 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <title>Beslutteroversikt</title>
 
-        <script>
-            window.frontendlogger = {info: function(){}, warn: function(){}, error: function(){}, event: function(){}};
-            window.frontendlogger.appname = 'beslutteroversikt';
-        </script>
-
-        <script type="application/javascript" src="/frontendlogger/logger.js"></script>
-
         <link rel="stylesheet" href="/internarbeidsflatedecorator/v2.1/static/css/main.css" />
         <script src="/internarbeidsflatedecorator/v2.1/static/js/head.v2.min.js"></script>
     </head>

public/index.html

@@ -4,9 +4,9 @@ import { lagBeslutterOversiktSok } from '../utils/sok-utils';
 import { useSokStore } from '../stores/sok-store';
 import { hasFinishedWithData } from '../rest/utils';
 import { usePrevious } from '../utils';
-import { frontendlogger } from '../utils/frontend-logger';
 import { BeslutteroversiktSok } from '../rest/api';
 import { PTO_VEDTAKSSTOTTE_PILOT } from '../rest/feature';
+import { logMetrikk } from '../utils/logger';
 
 function logSokMetrikker(sok: BeslutteroversiktSok, currentPage: number): void {
 	const filterMetrikker: any = {};
@@ -18,7 +18,7 @@ function logSokMetrikker(sok: BeslutteroversiktSok, currentPage: number): void {
 		filterMetrikker.visMineBrukere = sok.filter.visMineBrukere || false;
 	}
 
-	frontendlogger.logMetrikk('sok', {
+	logMetrikk('sok', {
 		page: currentPage,
 		orderByField: sok.orderByField,
 		orderByDirection: sok.orderByDirection,

src/components/sok-sync.tsx

@@ -1,20 +1,19 @@
 import { useCallback, useMemo, useState } from 'react';
 import { FetchInfo, FetchState, FetchStatus } from './utils';
-import { logger } from '../utils/logger';
 
 export interface Fetch<D = any, FP = any> extends FetchState<D> {
 	fetch: (fetchParams: FP, onFinished?: (fetchState: FetchState<D>) => void) => void;
 	reset: () => void;
 }
 
-const createInitialFetchState = (): FetchState<any> => ({
+const createInitialFetchState = (): FetchState => ({
 	status: FetchStatus.NOT_STARTED,
 	error: null,
 	data: null as any,
 	httpCode: -1
 });
 
-const createPendingFetchState = (): FetchState<any> => ({
+const createPendingFetchState = (): FetchState => ({
 	status: FetchStatus.PENDING,
 	error: null,
 	data: null as any,
@@ -59,10 +58,6 @@ const useFetch = <D = {}, FP = any>(createFetchInfo: (fetchParams: FP) => FetchI
 				return createFinishedFetchState(null as any, error, -1);
 			})
 			.then(state => {
-				if (state.httpCode >= 400) {
-					logger.error('API kall feilet', state);
-				}
-
 				if (onFinished) {
 					onFinished(state);
 				}

src/rest/use-fetch.ts

@@ -1,4 +1,4 @@
-import { frontendlogger } from '../utils/frontend-logger';
+import { logError } from '../utils/logger';
 
 export type FetchInfo = RequestInit & { url: string };
 
@@ -62,7 +62,7 @@ export const fetchWithInfo = (fetchInfo: FetchInfo) => {
 			res.clone()
 				.text()
 				.then(txt => {
-					frontendlogger.logError({ error: txt });
+					logError({ error: txt });
 				})
 				.catch();
 

src/rest/utils.ts

@@ -1,35 +1,18 @@
-import env from './environment';
-import { frontendlogger } from './frontend-logger';
+import {
+	createFrontendLogger,
+	createMockFrontendLogger,
+	DEFAULT_FRONTENDLOGGER_API_URL
+} from '@navikt/frontendlogger/lib';
+import { APP_NAME } from './constants';
 
-export const log = (...args: any[]): void => {
-	if (env.isDevelopment) {
-		console.log(...args); // tslint:disable-line
-	}
-};
-
-export const warn = (...args: any[]): void => {
-	if (env.isDevelopment) {
-		console.warn(...args); // tslint:disable-line
-	}
-};
-
-export const info = (...args: any[]): void => {
-	if (env.isDevelopment) {
-		console.info(...args); // tslint:disable-line
-	}
-};
+export const logger = process.env.REACT_APP_DEV
+	? createMockFrontendLogger(APP_NAME)
+	: createFrontendLogger(APP_NAME, DEFAULT_FRONTENDLOGGER_API_URL);
 
-export const error = (...args: any[]): void => {
-	if (env.isDevelopment) {
-		console.error(...args); // tslint:disable-line
-	} else if (env.isProduction) {
-		frontendlogger.logError({ error: JSON.stringify(args) });
-	}
+export const logError = (fields?: {}, tags?: {}): void => {
+	logger.event(`${APP_NAME}.error`, fields, tags);
 };
 
-export const logger = {
-	log,
-	error,
-	warn,
-	info
+export const logMetrikk = (metrikkNavn: string, fields?: {}, tags?: {}): void => {
+	logger.event(`${APP_NAME}.metrikker.${metrikkNavn}`, fields, tags);
 };