Merge pull request #885 from navikt/handtering-av-softerror

Håndtering av "soft errors":

src/App.tsx

@@ -5,6 +5,7 @@ import {Route, Routes} from 'react-router-dom';
 import Wrapper from './components/Wrapper';
 import ErrorBoundary from './components/error/ErrorBoundary';
 import DetailViewFile from './components/DetailViewFile';
+import ErrorFallback from "./components/error/ErrorFallback.tsx";
 
 
 function App() {
@@ -13,8 +14,8 @@ function App() {
 
     return (
         <QueryClientProvider client={queryClient}>
+            <ErrorBoundary FallbackComponent={ErrorFallback}>
             <Navbar/>
-            <ErrorBoundary>
                 <Routes>
                     <Route path='/:id' element={<Wrapper/>}></Route>
                     <Route path='/file/*' element={<DetailViewFile/>}></Route>

src/api/domain/GuiModel.ts

@@ -1,6 +1,8 @@
+import GuiModelMetadata from "./GuiModelMetadata.ts";
+
 export type GuiModel = {
     request?: any[];
     response?: any[];
-    metadata?: string[];
+    metadata?: GuiModelMetadata;
     fromFile?: boolean;
 }

src/api/domain/GuiModelMetadata.ts

@@ -0,0 +1,8 @@
+interface GuiModelMetadata {
+    status?: string,
+    info?: string,
+    bruktSats?: string,
+    debugLog?: string,
+}
+
+export default GuiModelMetadata

src/api/service/Queries.ts

@@ -1,7 +1,8 @@
 import { useQuery } from "@tanstack/react-query"
-import axios from "axios"
-import { LogResponse } from "../domain/LogResponse"
-import { GuiModel } from "../domain/GuiModel"
+import axios, { AxiosResponse } from "axios"
+import {LogResponse} from "../domain/LogResponse"
+import {GuiModel} from "../domain/GuiModel"
+import GuiModelMetadata from "../domain/GuiModelMetadata.ts";
 
 
 const fetchByLogId = async (id: string): Promise<LogResponse> => {
@@ -61,6 +62,8 @@ const fetchGuiModelByFile = async (body: string, clazzName: string, environment:
             }
         })
 
+    checkResponseForSoftErrors(response)
+
     return response.data as GuiModel
 
 
@@ -101,7 +104,7 @@ const fetchGuiModel = async (body: string, clazzName: string, environment: strin
                 'Accept': 'application/json',
             }
         })
-
+    checkResponseForSoftErrors(response)
     return response.data as GuiModel
 }
 
@@ -128,3 +131,13 @@ export const querySatstabeller = () => useQuery({
     queryFn: () => fetchSatsTabeller(),
     throwOnError: false,
 })
+
+function checkResponseForSoftErrors(response: AxiosResponse<unknown, GuiModelMetadata>) {
+    // @ts-ignore
+    if (response.status === 207 && response.data?.metadata?.status === "error") {
+        // @ts-ignore
+        throw new Error(response.data?.metadata?.info)
+    }
+
+}
+

src/components/DebugLogModal.tsx

@@ -44,7 +44,6 @@ const DebugLogModal: React.FC = () => {
                                 text="Kopier til utklippstavle"
                                 activeText="Kopierte til utklippstavle"
                     />
-
                     <Button variant="secondary" type="button" onClick={() => ref.current?.close()}>
                         Lukk
                     </Button>

src/components/error/ErrorBoundary.tsx

@@ -1,34 +1,48 @@
-import { Alert } from '@navikt/ds-react';
-import React, { Component, ErrorInfo } from 'react';
+import React, { Component, ErrorInfo, ReactNode } from 'react';
 
-interface Props {
-    children: React.ReactNode;
+interface FallbackProps {
+    error: Error;
+    errorInfo: ErrorInfo;
+}
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    FallbackComponent: React.ComponentType<FallbackProps>;
 }
 
-interface State {
+interface ErrorBoundaryState {
     hasError: boolean;
-    errorMessage: string;
+    error?: Error;
+    errorInfo?: ErrorInfo;
 }
 
-class ErrorBoundary extends Component<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        this.state = { hasError: false, errorMessage: '' };
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState = {
+        hasError: false,
+        error: undefined,
+        errorInfo: undefined
+    };
+
+    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true, error };
     }
 
-    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-        console.error('ErrorBoundary fanget opp en feil: ', error, errorInfo);
-        this.setState({ hasError: true, errorMessage: error.message });
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+        console.log("ErrorBoundary caught an error")
+        console.log("error is: ", error)
+        console.log("errorInfo is: ", errorInfo)
+        console.error("Uncaught error:", error, errorInfo);
+        this.setState({ errorInfo });
     }
 
-    render() {
-        if (this.state.hasError) {
-            return (
-                <Alert variant='error' style={{ paddingTop: "60px" }}>
-                    {`En feil har oppstått: ${this.state.errorMessage}`}
-                </Alert>
-            )
+    render(): ReactNode {
+        if (this.state.hasError && this.state.error) {
+            const { FallbackComponent } = this.props;
+            const { error, errorInfo } = this.state;
+            // @ts-ignore
+            return <FallbackComponent error={error} errorInfo={errorInfo} />;
         }
+
         return this.props.children;
     }
 }

src/components/error/ErrorFallback.tsx

@@ -0,0 +1,61 @@
+import {Alert, Button, CopyButton, Heading, Modal} from "@navikt/ds-react";
+import React, {ErrorInfo, ReactNode, useRef} from "react";
+import {LinkIcon, ThumbUpIcon} from "@navikt/aksel-icons";
+
+
+interface FallbackProps {
+    error: Error;
+    errorInfo: ErrorInfo;
+}
+
+const ErrorFallback: React.FC<FallbackProps> = ({error}): ReactNode => {
+
+    const ref = useRef<HTMLDialogElement>(null)
+    const [windowSize] = React.useState([window.innerWidth, window.innerHeight]);
+
+    const defaultErrorHeading = "Oops! En feil har oppstått 😵‍💫😵"
+
+    if (error.toString().length > 150) {
+
+        return (
+            <div>
+                <Modal ref={ref} open={true} width={`${windowSize[0] - 100}`}>
+                    <Modal.Header>
+                        <Alert variant="error">{defaultErrorHeading}</Alert>
+                    </Modal.Header>
+                    <Modal.Body>
+                        <details style={{whiteSpace: 'pre-wrap'}} open={true}>
+                            <summary>Detaljert feilmelding</summary>
+                            <br/>
+                            {error.toString()}
+                        </details>
+                    </Modal.Body>
+                    <Modal.Footer>
+                        <CopyButton className={"copyButton"}
+                                    copyText={error.toString()}
+                                    text="Kopier feilmelding"
+                                    activeText="Kopierte feilmelding"
+                                    icon={<LinkIcon aria-hidden/>}
+                                    activeIcon={<ThumbUpIcon aria-hidden/>}
+                        />
+                        <Button type="button" onClick={() => ref.current?.close()}>
+                            Lukk
+                        </Button>
+                    </Modal.Footer>
+                </Modal>
+            </div>
+        )
+    }
+    return (
+        <div>
+            <Alert variant="error" style={{}}>
+                <Heading spacing size={"small"} level={"3"}>
+                    {defaultErrorHeading}
+                </Heading>
+                {error.toString()}
+            </Alert>
+        </div>
+    )
+}
+
+export default ErrorFallback

src/index.css

@@ -102,4 +102,10 @@
 .disable-regel-logg:hover {
     cursor: not-allowed;
     background-color: transparent;
+}
+
+.copyButton {
+    color: blue;
+    background: white;
+    border-color: blue;
 }