Added error screen

pwa/package.json

@@ -65,7 +65,7 @@
     "@types/qs": "^6.9.14",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.23",
-    "@utrecht/component-library-react": "^3.0.1-alpha.27",
+    "@utrecht/component-library-react": "9.0.3",
     "@utrecht/design-tokens": "^1.0.0-alpha.640",
     "axios": "^1.7.9",
     "clsx": "^2.1.0",

pwa/src/apiService/apiService.ts

@@ -8,6 +8,8 @@ import OpenWoo from "./resources/openWoo";
 import FooterContent from "./resources/footerContent";
 import Markdown from "./resources/markdown";
 import AvailableFilters from "./resources/availableFilters";
+import MenusApi from "./resources/menus";
+import PagesApi from "./resources/pages";
 
 interface PromiseMessage {
   loading?: string;
@@ -74,6 +76,14 @@ export default class APIService {
     return new Markdown(this.MarkdownClient, this.Send);
   }
 
+  public get Menus(): MenusApi {
+    return new MenusApi(this.BaseClient, this.Send);
+  }
+
+  public get Pages(): PagesApi {
+    return new PagesApi(this.BaseClient, this.Send);
+  }
+
   // Send method
   public Send: TSendFunction = (instance, method, endpoint, payload, promiseMessage) => {
     const _payload = JSON.stringify(payload);

pwa/src/apiService/resources/menus.ts

@@ -0,0 +1,20 @@
+import { AxiosInstance } from "axios";
+import { TSendFunction } from "../apiService";
+
+export default class MenusApi {
+    private _instance: AxiosInstance;
+    private _send: TSendFunction;
+
+    constructor(_instance: AxiosInstance, send: TSendFunction) {
+        this._instance = _instance;
+        this._send = send;
+    }
+
+    public getAll = async (): Promise<any> => {
+        const { data } = await this._send(this._instance, "GET", "/menus?_limit=50");
+
+        return data;
+    };
+}
+
+

pwa/src/apiService/resources/pages.ts

@@ -0,0 +1,20 @@
+import { AxiosInstance } from "axios";
+import { TSendFunction } from "../apiService";
+
+export default class PagesApi {
+    private _instance: AxiosInstance;
+    private _send: TSendFunction;
+
+    constructor(_instance: AxiosInstance, send: TSendFunction) {
+        this._instance = _instance;
+        this._send = send;
+    }
+
+    public getAll = async (): Promise<any> => {
+        const { data } = await this._send(this._instance, "GET", "/pages?_limit=50");
+
+        return data;
+    };
+}
+
+

pwa/src/components/errorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { ErrorScreen } from "../errorScreen/ErrorScreen";
+
+interface ErrorBoundaryProps {
+    children: React.ReactNode;
+}
+
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+    errorInfo: React.ErrorInfo | null;
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps) {
+        super(props);
+        this.state = {
+            hasError: false,
+            error: null,
+            errorInfo: null,
+        };
+    }
+
+    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+        return {
+            hasError: true,
+            error,
+        };
+    }
+
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+        console.error("ErrorBoundary caught an error:", error, errorInfo);
+        this.setState({
+            error,
+            errorInfo,
+        });
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                <ErrorScreen
+                    error={this.state.error}
+                    errorInfo={this.state.errorInfo}
+                />
+            );
+        }
+
+        return this.props.children;
+    }
+}
+

pwa/src/components/errorScreen/ErrorScreen.module.css

@@ -0,0 +1,115 @@
+.wrapper {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--utrecht-document-background-color, #f5f5f5);
+}
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: var(--spacing-xl, 2rem);
+  text-align: center;
+}
+
+.iconContainer {
+  margin-bottom: var(--spacing-lg, 1.5rem);
+}
+
+.icon {
+  font-size: 4rem;
+  color: var(--utrecht-alert-error-color, #d32f2f);
+}
+
+.title {
+  margin-bottom: var(--spacing-md, 1rem);
+  color: var(--utrecht-heading-1-color, #1a1a1a);
+  font-size: 2rem;
+}
+
+.description {
+  margin-bottom: var(--spacing-lg, 1.5rem);
+  font-size: 1.1rem;
+  color: var(--utrecht-paragraph-color, #666);
+  line-height: 1.6;
+}
+
+.alert {
+  margin: var(--spacing-lg, 1.5rem) 0;
+  padding: var(--spacing-md, 1rem);
+  text-align: left;
+  border-radius: var(--border-radius-md, 4px);
+  background-color: #ffebee;
+  border-left: 4px solid #d32f2f;
+}
+
+.errorTitle {
+  margin-bottom: var(--spacing-sm, 0.5rem);
+  font-size: 1.2rem;
+  color: #c62828;
+}
+
+.errorMessage {
+  margin: 0;
+  font-size: 0.95rem;
+  color: #5f2120;
+  word-break: break-word;
+}
+
+.detailsSection {
+  margin: var(--spacing-lg, 1.5rem) 0;
+}
+
+.toggleButton {
+  margin-bottom: var(--spacing-md, 1rem);
+}
+
+.technicalDetails {
+  text-align: left;
+  background: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: var(--border-radius-md, 4px);
+  padding: var(--spacing-md, 1rem);
+  margin-top: var(--spacing-md, 1rem);
+}
+
+.stackTitle {
+  font-size: 1rem;
+  margin: var(--spacing-md, 1rem) 0 var(--spacing-sm, 0.5rem);
+  color: #333;
+}
+
+.stackTrace {
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: var(--border-radius-sm, 2px);
+  padding: var(--spacing-md, 1rem);
+  overflow-x: auto;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.85rem;
+  color: #333;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin: 0;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .container {
+    padding: var(--spacing-md, 1rem);
+  }
+
+  .title {
+    font-size: 1.5rem;
+  }
+
+  .description {
+    font-size: 1rem;
+  }
+
+  .icon {
+    font-size: 3rem;
+  }
+}
+

pwa/src/components/errorScreen/ErrorScreen.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import * as styles from "./ErrorScreen.module.css";
+import {
+    Page,
+    PageContent,
+    Heading1,
+    Heading2,
+    Paragraph,
+    Button,
+    Alert,
+} from "@utrecht/component-library-react/dist/css-module";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
+import { useTranslation } from "react-i18next";
+
+interface ErrorScreenProps {
+    error: Error | null;
+    errorInfo?: React.ErrorInfo | null;
+}
+
+export const ErrorScreen: React.FC<ErrorScreenProps> = ({ error, errorInfo }) => {
+    const { t } = useTranslation();
+    const [showDetails, setShowDetails] = React.useState(false);
+
+    return (
+        <div className={styles.wrapper}>
+            <Page>
+                <PageContent className={styles.container}>
+                    <div className={styles.iconContainer}>
+                        <FontAwesomeIcon icon={faExclamationTriangle} className={styles.icon} />
+                    </div>
+
+                    <Heading1 className={styles.title}>Oops, {t("something went wrong")}!</Heading1>
+
+                    <Paragraph className={styles.description}>
+                        {t(
+                            "We encountered an error while loading the data from the municipality. This might be due to incorrect or incomplete data.",
+                        )}
+                    </Paragraph>
+
+                    {error && (
+                        <Alert className={styles.alert} type="error">
+                            <Heading2 className={styles.errorTitle}>{t("Error details")}:</Heading2>
+                            <Paragraph className={styles.errorMessage}>
+                                <strong>{error.name}:</strong> {error.message}
+                            </Paragraph>
+                        </Alert>
+                    )}
+
+                    {errorInfo && (
+                        <div className={styles.detailsSection}>
+                            <Button
+                                appearance="secondary-action-button"
+                                className={styles.toggleButton}
+                                onClick={() => setShowDetails(!showDetails)}
+                            >
+                                {showDetails ? t("Hide technical details") : t("Show technical details")}
+                            </Button>
+
+                            {showDetails && (
+                                <div className={styles.technicalDetails}>
+                                    <pre className={styles.stackTrace}>{errorInfo.componentStack}</pre>
+                                    {error?.stack && (
+                                        <>
+                                            <Heading2 className={styles.stackTitle}>Stack Trace:</Heading2>
+                                            <pre className={styles.stackTrace}>{error.stack}</pre>
+                                        </>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </PageContent>
+            </Page>
+        </div>
+    );
+};
+

pwa/src/hooks/menus.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { useQuery } from "react-query";
+import APIService from "../apiService/apiService";
+import APIContext from "../apiService/apiContext";
+
+export const useMenus = () => {
+    const API: APIService | null = React.useContext(APIContext);
+
+    const getAll = () =>
+        useQuery<any, Error>(
+            [
+                "Menus",
+                typeof window !== "undefined" ? window.sessionStorage.getItem("OIDN_NUMBER") : undefined,
+            ],
+            () => API?.Menus.getAll(),
+            {
+                onError: (error) => {
+                    console.warn(error.message);
+                },
+                enabled: typeof window !== "undefined",
+            },
+        );
+
+    return { getAll };
+};
+
+

pwa/src/hooks/pages.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { useQuery } from "react-query";
+import APIService from "../apiService/apiService";
+import APIContext from "../apiService/apiContext";
+
+export const usePages = () => {
+    const API: APIService | null = React.useContext(APIContext);
+
+    const getAll = () =>
+        useQuery<any, Error>(
+            [
+                "Pages",
+                typeof window !== "undefined" ? window.sessionStorage.getItem("OIDN_NUMBER") : undefined,
+            ],
+            () => API?.Pages.getAll(),
+            {
+                onError: (error) => {
+                    console.warn(error.message);
+                },
+                enabled: typeof window !== "undefined",
+            },
+        );
+
+    return { getAll };
+};
+
+