navikt/frontendlogger

Tilgjengeliggjør errorlogging og metrikklogging for frontendapplikasjoner

FRONTENDLOGGER

Felles applikasjon som håndterer logging fra frontend og eksponerer ett script som alle applikasjoner kan bruke.

Eksempel på bruk:

Via script-tag

De to følgende script-tagene må legges til i index.html Førstnevnte gir en fallback slik at applikasjonen din ikke feiler om frontendloggeren skulle være nede, og spesifiserer appname som skal brukes. Funksjonene definert i window.frontendlogger blir overskrevet scriptet blir lastet inn.

<script type="application/javascript">
    window.frontendlogger = { info: function(){}, warn: function(){}, error: function(){}, event: function(){}};
    window.frontendlogger.appname = 'testapp';
</script>
<script type="application/javascript" src="/frontendlogger/logger.js"></script>

Errors som propageres til window vil automatisk bli fanget opp og logger som error. Hvis man ønsker å manuelt sende logger fra applikasjonen kan det gjøres ved å kalle window.frontendlogger.info fra applikasjonen.

window.frontendlogger.info('Min melding');
window.frontendlogger.info({
    message: 'Min melding',
    extra_felt_til_kibana: 'Litt ekstra informasjon her'
});

Hvis man ønsker å logge events/metrikker til Grafana fra applikasjonen kan det gjøres ved å kalle window.frontendlogger.event(name, fields, tags) fra applikasjonen.

window.frontendlogger.event(
    'Tiltakinfo-sidevisning', 
    {'underOppfolging':true, 'Feltnavn2':3}, 
    {'Tagnavn1':'TagVerdi1','Tagnavn2':'TagVerdi2'}
);

Typescript Om man bruker typescript og vil ha med typesikkerheten derifra kan man bruke denne;

declare global {
    type Data = string | { message: string, [key: string]: any };
    type Extra = { [key: string]: any };
    interface Window {
        frontendlogger: {
            info(data: Data): void;
            warn(data: Data): void;
            error(data: Data): void;
            event(name: string, fields?: Extra, tags?: Extra): void;
        }
    }
}

Via npm-modul

Installer: npm install @navikt/frontendlogger --save

Bruk:

import {
	createFrontendLogger,
	createMockFrontendLogger,
	DEFAULT_FRONTENDLOGGER_API_URL,
    setUpErrorReporting
} from '@navikt/frontendlogger';

export const logger = createFrontendLogger('my-app-name', DEFAULT_FRONTENDLOGGER_API_URL);
//export const logger = createMockFrontendLogger('my-app-name');

// Logging 
logger.info('Info');
logger.warn('Warn');
logger.error('Error');

// Metrics
logger.event('navn-pa-metrikk', { field1: 'value1' }, { tag1: 'value2' });

// Log errors with window.onerror
setUpErrorReporting(logger);

NB setUpErrorReporting bør kalles så tidlig som mulig siden dette setter opp den globale error-håndteringen

Kontakt og spørsmål

Opprett en issue i GitHub for eventuelle spørsmål.

frontendlogger's Issues

Eksponering på dev.nav.no

Har dere noen planer om å tilgjengeliggjøre frontendlogger på dev.nav.no slik at den kan nås fra naisdevice?

Rette feil/mangler i henhold til krav i navikt/utvikling (funnet av roboten repo-linter)

Dette er en autogenerert issue, laget av et skript som går gjennom alle NAV sine kodebaser på Github og gjør diverse sjekker. Her er en liste over ting som må endres.

Beskrivelse mangler

På Github kan man gi hver kodebase en kort beskrivelse. Denne bør fortelle hva kodebasen heter, og litt om hva den brukes til. (Eksempel: kodebasen "veilarbportefoljeflatefs" har beskrivelse "Oversikt for veiledere over oppfølgingsbrukere".)

Spørsmål og svar

Jeg har meninger om disse rådene - kan jeg komme med tilbakemeldinger?

Skriv i vei, på Slack-kanalen #open-source.

Kodebasen vår er ikke open source, derfor er det ikke noe poeng

Selv om koden i dag ikke er åpen for innsyn, så ta høyde for at den kan komme til å bli det i fremtiden. Uansett så vil forbedringene være til hjelp, enten kodebasen er åpen eller ei!

Hvem har ansvaret for å fikse det her?

Det er i utgangspunktet den/de/teamet som eier kodebasen som må fikse.

Det er en feil i rådene

Alle roboter gjør jo feil, denne også. Lag en issue på https://github.com/navikt/repo-linter.

Teste den i lokal

Hvordan kan jeg sjekke at logging funker i app når kjører lokal?

Bruke xhr istede for fetch

For å få bedre portabilitet

se navikt/pus-decorator#8