Modernisering feilmeldingskode (#6482)

* Ny komponent for stor feilmelding på side.

Bruker aksel komponenter og dropper intl støtte for å forenkle kodebasen.

* Skriver om ForbiddenPage komponent til å bruke ny BigError komponent.

Lager også separat, moderne storybook fil for den, og flytter test inn i storybook.

* Skriver om NotFoundPage komponent til å bruke ny BigError komponent.

Lager også separat, moderne storybook fil for den, og flytter test inn i storybook.

* Skriver om UnauthorizedPage komponent til å bruke ny BigError komponent.

Lager også separat, moderne storybook fil for den, og flytter test inn i storybook.

* Skriver om IngenBehandlingValgtPanel komponent til å ikkje bruke intl lenger

Lager også separat, moderne storybook fil for den, og flytter test inn i storybook.

* Fjerna ubrukt textCode prop på ErrorBoundary, lagt til storybook test

* Endra ErrorPage til å bruke BigError, fjerna ErrorPageWrapper.

Lage samtidig story for ErrorPage og flytte test inn der.

* Legg til standardfeilmelding og større margin på BigError.

* Justert feilmelding som viser når ErrorBoundary blir utløst.

Oppfordrer brukeren til å laste sida på nytt for å prøve igjen, og så melde frå viss det ikkje hjalp.

* ErrorBoundary viser no referanse til sentry rapport.

Slik at saksbehandler kan inkludere denne viss feil blir rapportert inn, og forenkle vår feilsøking.

* Flytta sak-infosider til v2/gui/src/sak/feilmeldinger. Sletta gammal sak-infosider pakke.

Gjere og nødvendige tilpassinger for at kode skal kompilere under v2/.

Bytter og namn på ny v2 sak/infomeldinger til sak/feilmeldinger.

Justerer title i tilhøyrande storybook filer for å matche ny filsti.

* Fiks så CopyButton på ErrorPage blir inline i feilmelding.

* typofix i BigError.tsx

* NetworkErrorPage komponent for bruk ved nettverksfeil lagt til.

Oppfordrer saksbehandler til å prøve igjen ved nettverksfeil, og inkludere litt feilsøkingsinfo ved innrapportering av feil som ikkje løyser seg ved retry.

* Handter nettverksfeil i BehandlingTilbakekrevingIndex.

Viser feilmelding istadenfor å prøve å køyre vidare med manglande data viss lasting av data frå server feiler.

* Fjern utdatert referanse til sak-infosider, fiks ulovlig import path.

* css module typegen

* legg til "--allow-empty" på lint-staged hook.

Ellers vart commit av generert typescript deklarasjon for css modul blokkert.

* Behold quotes i modules.d.css.ts filer

prettier fjerner disse, men då feila typed-css-modules sjekken etterpå, så må beholde disse quotes.

* Revert "legg til "--allow-empty" på lint-staged hook."

This reverts commit b0d6b30.

packages/behandling-tilbakekreving/src/BehandlingTilbakekrevingIndex.tsx

@@ -1,17 +1,19 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { ReduxFormStateCleaner, Rettigheter, useSetBehandlingVedEndring } from '@k9-sak-web/behandling-felles';
-import { KodeverkMedNavn, Behandling, Fagsak, FagsakPerson } from '@k9-sak-web/types';
+import { Behandling, Fagsak, FagsakPerson, KodeverkMedNavn } from '@k9-sak-web/types';
 import { LoadingPanel } from '@fpsak-frontend/shared-components';
 import { RestApiState, useRestApiErrorDispatcher } from '@k9-sak-web/rest-api-hooks';
 
 import TilbakekrevingPaneler from './components/TilbakekrevingPaneler';
 import FetchedData from './types/fetchedDataTsType';
 import {
-  restApiTilbakekrevingHooks,
   requestTilbakekrevingApi,
+  restApiTilbakekrevingHooks,
   TilbakekrevingBehandlingApiKeys,
 } from './data/tilbakekrevingBehandlingApi';
+import NetworkErrorPage from '@k9-sak-web/gui/sak/feilmeldinger/NetworkErrorPage.js';
+import { extractErrorInfo } from '../../rest-api-hooks/src/error/extractErrorInfo.js';
 
 const tilbakekrevingData = [
   { key: TilbakekrevingBehandlingApiKeys.AKSJONSPUNKTER },
@@ -124,7 +126,7 @@ const BehandlingTilbakekrevingIndex = ({
     };
   }, []);
 
-  const { data, state } = restApiTilbakekrevingHooks.useMultipleRestApi<FetchedData>(tilbakekrevingData, {
+  const { data, state, error } = restApiTilbakekrevingHooks.useMultipleRestApi<FetchedData>(tilbakekrevingData, {
     keepData: true,
     updateTriggers: [behandling?.versjon],
     suspendRequest: !behandling,
@@ -135,6 +137,10 @@ const BehandlingTilbakekrevingIndex = ({
     return <LoadingPanel />;
   }
 
+  if (state === RestApiState.ERROR) {
+    return <NetworkErrorPage {...extractErrorInfo(error)} />;
+  }
+
   return (
     <>
       <ReduxFormStateCleaner

packages/rest-api-hooks/src/error/extractErrorInfo.ts

@@ -0,0 +1,28 @@
+import { AxiosError } from 'axios';
+
+interface ErrorInfo {
+  navCallId: string | undefined;
+  statusCode: number | undefined;
+}
+
+/**
+ * Kan brukast for å hente ut meta informasjon frå AxiosError som har skjedd.
+ * Brukast for å vise referanse i feilmelding til bruker, slik at denne kan inkluderast i evt feilmelding vidare.
+ *
+ * @param error feil som har oppstått
+ * @returns objekt med Nav-Callid string og http status kode for respons viss denne info finnast.
+ */
+export const extractErrorInfo = (error: unknown): Readonly<ErrorInfo> => {
+  const resp: ErrorInfo = {
+    navCallId: undefined,
+    statusCode: undefined,
+  };
+  if (error instanceof AxiosError) {
+    const callId = error.config.headers.get('Nav-Callid');
+    if (typeof callId === 'string') {
+      resp.navCallId = callId;
+    }
+    resp.statusCode = error.status;
+  }
+  return resp;
+};

packages/sak-app/package.json

@@ -39,7 +39,6 @@
     "@k9-sak-web/rest-api-hooks": "1.0.0",
     "@k9-sak-web/sak-aktor": "1.0.0",
     "@k9-sak-web/sak-behandling-velger": "1.0.0",
-    "@k9-sak-web/sak-infosider": "1.0.0",
     "@k9-sak-web/sak-meldinger": "1.0.0",
     "@k9-sak-web/sak-meny-marker-behandling": "1.0.0",
     "@k9-sak-web/sak-notat": "1.0.0",

packages/sak-app/src/app/AppIndex.tsx

@@ -5,7 +5,8 @@ import { useLocation } from 'react-router-dom';
 import { parseQueryString } from '@fpsak-frontend/utils';
 import { useRestApiError, useRestApiErrorDispatcher } from '@k9-sak-web/rest-api-hooks';
 import EventType from '@k9-sak-web/rest-api/src/requestApi/eventType';
-import { ForbiddenPage, UnauthorizedPage } from '@k9-sak-web/sak-infosider';
+import ForbiddenPage from '@k9-sak-web/gui/sak/feilmeldinger/ForbiddenPage.js';
+import UnauthorizedPage from '@k9-sak-web/gui/sak/feilmeldinger/UnauthorizedPage.js';
 import { NavAnsatt } from '@k9-sak-web/types';
 
 import { K9sakApiKeys, restApiHooks } from '../data/k9sakApi';

packages/sak-app/src/app/ErrorBoundary.stories.tsx

@@ -0,0 +1,45 @@
+import ErrorBoundary from './ErrorBoundary.js';
+import { Meta, StoryObj } from '@storybook/react';
+import { fn, expect } from '@storybook/test';
+import { useEffect } from 'react';
+
+const meta = {
+  title: 'sak/sak-app',
+  component: ErrorBoundary,
+} satisfies Meta<typeof ErrorBoundary>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const NonFailingChild = () => <p>Nothing to see here, move along.</p>;
+
+const FailingChild = () => {
+  useEffect(() => {
+    throw new Error('TEST FAIL');
+  }, []);
+  return <p>Error boundary should be displayed instead of this</p>;
+};
+
+export const ErrorBoundaryNotTriggered: Story = {
+  args: {
+    errorMessageCallback: fn(),
+    children: <NonFailingChild />,
+  },
+  play: async ({ args }) => {
+    await expect(args.errorMessageCallback).toHaveBeenCalledTimes(0);
+  },
+};
+
+export const ErrorBoundaryTriggered: Story = {
+  args: {
+    errorMessageCallback: fn(),
+    children: <FailingChild />,
+  },
+  play: async ({ canvas, args }) => {
+    await expect(args.errorMessageCallback).toHaveBeenCalledOnce();
+    await expect(canvas.getByRole('heading')).toHaveTextContent(
+      'Det har oppstått en teknisk feil i denne behandlingen.',
+    );
+  },
+};

packages/sak-app/src/app/ErrorBoundary.tsx

@@ -1,17 +1,16 @@
 import React, { Component, ReactNode, ErrorInfo } from 'react';
 import { captureException, withScope } from '@sentry/browser';
-
-import { ErrorPage } from '@k9-sak-web/sak-infosider';
+import ErrorPage from '@k9-sak-web/gui/sak/feilmeldinger/ErrorPage.js';
 
 interface OwnProps {
   errorMessageCallback: (error: any) => void;
-  textCode?: string;
   children: ReactNode;
   doNotShowErrorPage?: boolean;
 }
 
 interface State {
   hasError: boolean;
+  sentryId: string | undefined;
 }
 
 export class ErrorBoundary extends Component<OwnProps, State> {
@@ -21,7 +20,7 @@ export class ErrorBoundary extends Component<OwnProps, State> {
 
   constructor(props: OwnProps) {
     super(props);
-    this.state = { hasError: false };
+    this.state = { hasError: false, sentryId: undefined };
   }
 
   static getDerivedStateFromError() {
@@ -35,7 +34,11 @@ export class ErrorBoundary extends Component<OwnProps, State> {
     withScope(scope => {
       Object.keys(info).forEach(key => {
         scope.setExtra(key, info[key]);
-        captureException(error);
+        const sentryId = captureException(error);
+        this.setState({
+          ...this.state,
+          sentryId,
+        });
       });
     });
 
@@ -54,10 +57,10 @@ export class ErrorBoundary extends Component<OwnProps, State> {
   }
 
   render(): ReactNode {
-    const { children, doNotShowErrorPage, textCode } = this.props;
-    const { hasError } = this.state;
+    const { children, doNotShowErrorPage } = this.props;
+    const { hasError, sentryId } = this.state;
 
-    return hasError && !doNotShowErrorPage ? <ErrorPage textCode={textCode} /> : children;
+    return hasError && !doNotShowErrorPage ? <ErrorPage sentryId={sentryId} /> : children;
   }
 }
 

packages/sak-app/src/app/components/Home.tsx

@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 
-import { NotFoundPage } from '@k9-sak-web/sak-infosider';
+import NotFoundPage from '@k9-sak-web/gui/sak/feilmeldinger/NotFoundPage.js';
 
 import AktoerIndex from '../../aktoer/AktoerIndex';
 import FagsakIndex from '../../fagsak/FagsakIndex';

packages/sak-app/src/behandling/BehandlingerIndex.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 
 import { BehandlingAppKontekst, Fagsak, ArbeidsgiverOpplysningerWrapper } from '@k9-sak-web/types';
-import { IngenBehandlingValgtPanel } from '@k9-sak-web/sak-infosider';
+import IngenBehandlingValgtPanel from '@k9-sak-web/gui/sak/feilmeldinger/IngenBehandlingValgtPanel.js';
 
 import BehandlingIndex from './BehandlingIndex';
 import { behandlingRoutePath } from '../app/paths';
@@ -25,15 +25,15 @@ export const BehandlingerIndex = ({
   <Routes>
     <Route
       path={behandlingRoutePath}
-      element={(
+      element={
         <BehandlingIndex
           fagsak={fagsak}
           alleBehandlinger={alleBehandlinger}
           arbeidsgiverOpplysninger={arbeidsgiverOpplysninger}
           setBehandlingIdOgVersjon={setBehandlingIdOgVersjon}
           setRequestPendingMessage={setRequestPendingMessage}
         />
-      )}
+      }
     />
     <Route path="/" element={<IngenBehandlingValgtPanel numBehandlinger={alleBehandlinger.length} />} />
   </Routes>