From fd1dd7d15f8ac06b1b599f1ccb850f0e45385d2c Mon Sep 17 00:00:00 2001
From: Fenne <fennehattink@gmail.com>
Date: Tue, 10 Dec 2024 11:46:40 +0100
Subject: [PATCH 1/9] Error page now shows when no page is found

---
 lib/public/Model.js                  | 11 +++++++++--
 lib/public/view.js                   |  3 +++
 lib/public/views/Error/ErrorModel.js | 21 +++++++++++++++++++++
 lib/public/views/Error/index.js      | 23 +++++++++++++++++++++++
 4 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 lib/public/views/Error/ErrorModel.js
 create mode 100644 lib/public/views/Error/index.js

diff --git a/lib/public/Model.js b/lib/public/Model.js
index d07f77a0a8..d14bc2d2d0 100644
--- a/lib/public/Model.js
+++ b/lib/public/Model.js
@@ -309,9 +309,16 @@ export default class Model extends Observable {
             case 'eos-report-create':
                 this.eosReportModel.loadCreation(this.router.params.shiftType);
                 break;
-            default:
-                this.router.go('?page=home');
+            case 'error':
                 break;
+            default:
+                if (this.router.params.page) {
+                    this.router.go('?page=error'); // Load 404 page for invalid routes
+                    break;
+                } else {
+                    this.router.go('?page=home'); // Redirect to home for empty routes
+                    break;
+                }
         }
     }
 
diff --git a/lib/public/view.js b/lib/public/view.js
index f89800d546..e82b80ab3a 100644
--- a/lib/public/view.js
+++ b/lib/public/view.js
@@ -53,6 +53,7 @@ import { QcFlagDetailsForDataPassPage } from './views/QcFlags/details/forDataPas
 import { QcFlagDetailsForSimulationPassPage } from './views/QcFlags/details/forSimulationPass/QcFlagDetailsForSimulationPassPage.js';
 import { GaqFlagsOverviewPage } from './views/QcFlags/GaqFlags/GaqFlagsOverviewPage.js';
 import { SynchronousQcFlagsOverviewPage } from './views/QcFlags/Synchronous/SynchronousQcFlagsOverviewPage.js';
+import { ErrorPage } from './views/Error/index.js';
 
 /**
  * Main view layout
@@ -114,6 +115,8 @@ export default (model) => {
         'tag-create': TagCreate,
 
         'eos-report-create': EosReportCreationPage,
+
+        error: ErrorPage,
     };
 
     return [
diff --git a/lib/public/views/Error/ErrorModel.js b/lib/public/views/Error/ErrorModel.js
new file mode 100644
index 0000000000..23230ef9f4
--- /dev/null
+++ b/lib/public/views/Error/ErrorModel.js
@@ -0,0 +1,21 @@
+import { Observable } from '/js/src/index.js';
+
+/**
+ * Model storing state for the home page
+ */
+export class ErrorModel extends Observable {
+    /**
+     * The constructor of the error model object
+     */
+    constructor() {
+        super();
+    }
+
+    /**
+     * Method to handle the not found page
+     * @returns {void}
+     */
+    loadNotFound() {
+        this.emit('notFound');
+    }
+}
diff --git a/lib/public/views/Error/index.js b/lib/public/views/Error/index.js
new file mode 100644
index 0000000000..2aa553df05
--- /dev/null
+++ b/lib/public/views/Error/index.js
@@ -0,0 +1,23 @@
+import { h, info } from '/js/src/index.js';
+
+/**
+ * Error page component that will be displayed when an error occurs
+ * @param {Model} errorModel - representing current application
+ * @returns {Component} Error page component
+ */
+export const ErrorPage = (errorModel) =>
+    h('div.flex-column.g2', [
+        h('.flex-row.g2', [
+            h('.flex-column', [
+                h('h3', 'Error'),
+                h('.f6', 'Error page'),
+                h('button.btn.btn-primary', {
+                    onclick: () => {
+                        errorModel.router.go('?page=home');
+                    } }, [
+                    info(),
+                    'Go to home Page',
+                ]),
+            ]),
+        ]),
+    ]);

From 71a06f361b36cf6454f195a730c0df0153c39f7f Mon Sep 17 00:00:00 2001
From: Fenne <fennehattink@gmail.com>
Date: Tue, 10 Dec 2024 12:17:43 +0100
Subject: [PATCH 2/9] Changed 404 styling

---
 lib/public/Model.js                  |  4 ++--
 lib/public/view.js                   |  2 +-
 lib/public/views/Error/ErrorModel.js | 21 -----------------
 lib/public/views/Error/index.js      | 34 ++++++++++++++++------------
 4 files changed, 22 insertions(+), 39 deletions(-)
 delete mode 100644 lib/public/views/Error/ErrorModel.js

diff --git a/lib/public/Model.js b/lib/public/Model.js
index d14bc2d2d0..2a3d53ebba 100644
--- a/lib/public/Model.js
+++ b/lib/public/Model.js
@@ -309,11 +309,11 @@ export default class Model extends Observable {
             case 'eos-report-create':
                 this.eosReportModel.loadCreation(this.router.params.shiftType);
                 break;
-            case 'error':
+            case '404-notfound':
                 break;
             default:
                 if (this.router.params.page) {
-                    this.router.go('?page=error'); // Load 404 page for invalid routes
+                    this.router.go('?page=404-notfound'); // Load 404 page for invalid routes
                     break;
                 } else {
                     this.router.go('?page=home'); // Redirect to home for empty routes
diff --git a/lib/public/view.js b/lib/public/view.js
index e82b80ab3a..d5427006d2 100644
--- a/lib/public/view.js
+++ b/lib/public/view.js
@@ -116,7 +116,7 @@ export default (model) => {
 
         'eos-report-create': EosReportCreationPage,
 
-        error: ErrorPage,
+        '404-notfound': ErrorPage,
     };
 
     return [
diff --git a/lib/public/views/Error/ErrorModel.js b/lib/public/views/Error/ErrorModel.js
deleted file mode 100644
index 23230ef9f4..0000000000
--- a/lib/public/views/Error/ErrorModel.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Observable } from '/js/src/index.js';
-
-/**
- * Model storing state for the home page
- */
-export class ErrorModel extends Observable {
-    /**
-     * The constructor of the error model object
-     */
-    constructor() {
-        super();
-    }
-
-    /**
-     * Method to handle the not found page
-     * @returns {void}
-     */
-    loadNotFound() {
-        this.emit('notFound');
-    }
-}
diff --git a/lib/public/views/Error/index.js b/lib/public/views/Error/index.js
index 2aa553df05..e15a259b00 100644
--- a/lib/public/views/Error/index.js
+++ b/lib/public/views/Error/index.js
@@ -1,23 +1,27 @@
-import { h, info } from '/js/src/index.js';
+import { h, iconHome } from '/js/src/index.js';
 
 /**
  * Error page component that will be displayed when an error occurs
- * @param {Model} errorModel - representing current application
+ * @param {Model} model - representing current application
  * @returns {Component} Error page component
  */
-export const ErrorPage = (errorModel) =>
-    h('div.flex-column.g2', [
-        h('.flex-row.g2', [
-            h('.flex-column', [
-                h('h3', 'Error'),
-                h('.f6', 'Error page'),
-                h('button.btn.btn-primary', {
-                    onclick: () => {
-                        errorModel.router.go('?page=home');
-                    } }, [
-                    info(),
-                    'Go to home Page',
-                ]),
+export const ErrorPage = (model) =>
+    h('div.flex-column.justify-center ', [
+        h('.flex-column.items-center.g3.mv4', [
+            h('img', {
+                src: 'assets/alice.png',
+                alt: 'Alice logo',
+                style: 'width: 200px',
+            }),
+            h('h2', 'Oops! Something went wrong.'),
+            h('h3', '404 - Page not found'),
+            h('.f5', 'The page you are looking for might have been removed, had its name changed or is temporarily unavailable.'),
+            h('button.btn.btn-primary', {
+                onclick: () => {
+                    model.router.go('?page=home');
+                } }, [
+                iconHome(),
+                ' Go to home Page',
             ]),
         ]),
     ]);

From e6b7ec4e6d92b2dddb8ae028dde13668086db6fc Mon Sep 17 00:00:00 2001
From: Fenne <fennehattink@gmail.com>
Date: Tue, 10 Dec 2024 14:00:34 +0100
Subject: [PATCH 3/9] Error page can now be changed according to error

---
 lib/public/Model.js                  | 54 +++++++++++++++++-----------
 lib/public/view.js                   |  2 +-
 lib/public/views/Error/ErrorModel.js | 53 +++++++++++++++++++++++++++
 lib/public/views/Error/index.js      | 28 +++++++++++----
 4 files changed, 108 insertions(+), 29 deletions(-)
 create mode 100644 lib/public/views/Error/ErrorModel.js

diff --git a/lib/public/Model.js b/lib/public/Model.js
index 2a3d53ebba..f3bf8d5ac4 100644
--- a/lib/public/Model.js
+++ b/lib/public/Model.js
@@ -13,31 +13,32 @@
 
 import { Loader, Observable, QueryRouter, sessionService } from '/js/src/index.js';
 
-import { LogsModel } from './views/Logs/LogsModel.js';
-import Tags from './views/Tags/Tags.js';
-import { RunsModel } from './views/Runs/RunsModel.js';
-import Flps from './views/Flps/Flps.js';
-import { EnvironmentModel } from './views/Environments/EnvironmentModel.js';
-import LhcFills from './views/LhcFills/LhcFills.js';
-import RunTypeModel from './views/RunTypes/RunTypeModel.js';
+import { registerFrontLinkListener } from './components/common/navigation/frontLinkListener.js';
 import { ModalModel } from './components/modal/ModalModel.js';
+import { BkpRoles } from './domain/enums/BkpRoles.js';
+import { UserRoleSelectionModel } from './models/UserRoleSelectionModel.js';
+import { detectorsProvider } from './services/detectors/detectorsProvider.js';
+import { ObservableData } from './utilities/ObservableData.js';
 import { debounce, INPUT_DEBOUNCE_TIME } from './utilities/debounce.js';
+import { getRoleForDetector } from './utilities/getRoleForDetector.js';
 import { userPreferencesStore } from './utilities/userPreferencesStore.js';
-import { registerFrontLinkListener } from './components/common/navigation/frontLinkListener.js';
+import { AboutModel } from './views/About/AboutModel.js';
+import { DataPassesModel } from './views/DataPasses/DataPassesModel.js';
+import { EnvironmentModel } from './views/Environments/EnvironmentModel.js';
 import { EosReportModel } from './views/EosReport/EosReportModel.js';
-import { AboutModel } from './views/About/About.js';
-import { StatisticsPageModel } from './views/Statistics/StatisticsPageModel.js';
-import { LhcPeriodsModel } from './views/lhcPeriods/LhcPeriodsModel.js';
+import { ErrorModel } from './views/Error/ErrorModel.js';
+import Flps from './views/Flps/Flps.js';
 import { HomePageModel } from './views/Home/Overview/HomePageModel.js';
-import { DataPassesModel } from './views/DataPasses/DataPassesModel.js';
-import { SimulationPassesModel } from './views/SimulationPasses/SimulationPassesModel.js';
+import LhcFills from './views/LhcFills/LhcFills.js';
+import { LogsModel } from './views/Logs/LogsModel.js';
 import { QcFlagTypesModel } from './views/QcFlagTypes/QcFlagTypesModel.js';
 import { QcFlagsModel } from './views/QcFlags/QcFlagsModel.js';
-import { UserRoleSelectionModel } from './models/UserRoleSelectionModel.js';
-import { ObservableData } from './utilities/ObservableData.js';
-import { BkpRoles } from './domain/enums/BkpRoles.js';
-import { getRoleForDetector } from './utilities/getRoleForDetector.js';
-import { detectorsProvider } from './services/detectors/detectorsProvider.js';
+import RunTypeModel from './views/RunTypes/RunTypeModel.js';
+import { RunsModel } from './views/Runs/RunsModel.js';
+import { SimulationPassesModel } from './views/SimulationPasses/SimulationPassesModel.js';
+import { StatisticsPageModel } from './views/Statistics/StatisticsPageModel.js';
+import Tags from './views/Tags/Tags.js';
+import { LhcPeriodsModel } from './views/lhcPeriods/LhcPeriodsModel.js';
 
 /**
  * Root of model tree
@@ -168,6 +169,12 @@ export default class Model extends Observable {
         this.aboutModel = new AboutModel();
         this.aboutModel.bubbleTo(this);
 
+        /**
+         * @type {ErrorModel}
+         */
+        this.errorModel = new ErrorModel();
+        this.errorModel.bubbleTo(this);
+
         // Setup router
         this.router = new QueryRouter();
         this.router.observe(this.handleLocationChange.bind(this));
@@ -309,14 +316,19 @@ export default class Model extends Observable {
             case 'eos-report-create':
                 this.eosReportModel.loadCreation(this.router.params.shiftType);
                 break;
-            case '404-notfound':
+            case 'error':
                 break;
             default:
                 if (this.router.params.page) {
-                    this.router.go('?page=404-notfound'); // Load 404 page for invalid routes
+                    this.errorModel.setError({
+                        code: '404',
+                        codeDescription: 'Page not found',
+                        message: 'The page you are looking for might have been removed, had its name changed or is temorarily unavailable.',
+                    });
+                    this.router.go('?page=error');
                     break;
                 } else {
-                    this.router.go('?page=home'); // Redirect to home for empty routes
+                    this.router.go('?page=home');
                     break;
                 }
         }
diff --git a/lib/public/view.js b/lib/public/view.js
index d5427006d2..e82b80ab3a 100644
--- a/lib/public/view.js
+++ b/lib/public/view.js
@@ -116,7 +116,7 @@ export default (model) => {
 
         'eos-report-create': EosReportCreationPage,
 
-        '404-notfound': ErrorPage,
+        error: ErrorPage,
     };
 
     return [
diff --git a/lib/public/views/Error/ErrorModel.js b/lib/public/views/Error/ErrorModel.js
new file mode 100644
index 0000000000..8bae8e430e
--- /dev/null
+++ b/lib/public/views/Error/ErrorModel.js
@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { Observable } from '/js/src/index.js';
+
+/**
+ * Model representing handlers for errorPage.js
+ */
+export class ErrorModel extends Observable {
+    /**
+     * The constructor for the Error model object
+     * @returns {Object} Constructs the Error model
+     */
+    constructor() {
+        super();
+        this.error = {
+            code: 'Unknown Error',
+            codeDescription: 'Something unexpected happened.',
+            message: 'Please try again later.',
+        };
+    }
+
+    /**
+     * Sets the error object for the model
+     * @param {Object} error The error object to set, must contain a code, codeDescription and message
+     * @returns {void}
+     */
+    setError(error) {
+        if (!error.code || !error.codeDescription || !error.message) {
+            return;
+        }
+        this.error = error;
+        this.notify();
+    }
+
+    /**
+     * Returns the error object for the model
+     * @returns {Object} The error object
+     */
+    getError() {
+        return this.error;
+    }
+}
diff --git a/lib/public/views/Error/index.js b/lib/public/views/Error/index.js
index e15a259b00..12d8843fe9 100644
--- a/lib/public/views/Error/index.js
+++ b/lib/public/views/Error/index.js
@@ -1,12 +1,25 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
 import { h, iconHome } from '/js/src/index.js';
 
 /**
- * Error page component that will be displayed when an error occurs
- * @param {Model} model - representing current application
+ * Error page component that dynamically displays error details based on the model
+ * @param {Model} model - Represents the current application state
  * @returns {Component} Error page component
  */
-export const ErrorPage = (model) =>
-    h('div.flex-column.justify-center ', [
+export const ErrorPage = (model) => {
+    const { code, codeDescription, message } = model.errorModel.error;
+    return h('div.flex-column.justify-center ', [
         h('.flex-column.items-center.g3.mv4', [
             h('img', {
                 src: 'assets/alice.png',
@@ -14,14 +27,15 @@ export const ErrorPage = (model) =>
                 style: 'width: 200px',
             }),
             h('h2', 'Oops! Something went wrong.'),
-            h('h3', '404 - Page not found'),
-            h('.f5', 'The page you are looking for might have been removed, had its name changed or is temporarily unavailable.'),
+            h('h3', `${code} - ${codeDescription}`),
+            h('.f5', message),
             h('button.btn.btn-primary', {
                 onclick: () => {
                     model.router.go('?page=home');
                 } }, [
                 iconHome(),
-                ' Go to home Page',
+                ' Go to Home Page',
             ]),
         ]),
     ]);
+};

From d2049a6ec67deee1dfbe2e25fdef35b957d328ac Mon Sep 17 00:00:00 2001
From: Fenne <fennehattink@gmail.com>
Date: Thu, 12 Dec 2024 15:42:55 +0100
Subject: [PATCH 4/9] Added tests

---
 lib/public/Model.js             |  2 +-
 test/public/error/error.test.js | 72 +++++++++++++++++++++++++++++++++
 test/public/error/index.js      | 17 ++++++++
 test/public/index.js            |  2 +
 4 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 test/public/error/error.test.js
 create mode 100644 test/public/error/index.js

diff --git a/lib/public/Model.js b/lib/public/Model.js
index f3bf8d5ac4..62a4f82d0e 100644
--- a/lib/public/Model.js
+++ b/lib/public/Model.js
@@ -22,7 +22,7 @@ import { ObservableData } from './utilities/ObservableData.js';
 import { debounce, INPUT_DEBOUNCE_TIME } from './utilities/debounce.js';
 import { getRoleForDetector } from './utilities/getRoleForDetector.js';
 import { userPreferencesStore } from './utilities/userPreferencesStore.js';
-import { AboutModel } from './views/About/AboutModel.js';
+import { AboutModel } from './views/About/About.js';
 import { DataPassesModel } from './views/DataPasses/DataPassesModel.js';
 import { EnvironmentModel } from './views/Environments/EnvironmentModel.js';
 import { EosReportModel } from './views/EosReport/EosReportModel.js';
diff --git a/test/public/error/error.test.js b/test/public/error/error.test.js
new file mode 100644
index 0000000000..32134001a6
--- /dev/null
+++ b/test/public/error/error.test.js
@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+const chai = require('chai');
+const { defaultBefore, defaultAfter, goToPage } = require('../defaults.js');
+const { resetDatabaseContent } = require('../../utilities/resetDatabaseContent.js');
+
+const { expect } = chai;
+
+module.exports = () => {
+    let page;
+    let browser;
+
+    before(async () => {
+        [page, browser] = await defaultBefore(page, browser);
+        await page.setViewport({
+            width: 700,
+            height: 720,
+            deviceScaleFactor: 1,
+        });
+        await resetDatabaseContent();
+    });
+
+    after(async () => {
+        [page, browser] = await defaultAfter(page, browser);
+    });
+
+    it('loads the page successfully', async () => {
+        const response = await goToPage(page, 'error');
+
+        // We expect the page to return the correct status code, making sure the server is running properly
+        expect(response.status()).to.equal(200);
+
+        // We expect the page to return the correct title, making sure there isn't another server running on this port
+        const title = await page.title();
+        expect(title).to.equal('AliceO2 Bookkeeping');
+    });
+
+    it('shows the error message', async () => {
+        await goToPage(page, 'error');
+
+        const errorTitle = await page.$eval('h2', (el) => el.innerText);
+        expect(errorTitle).to.equal('Oops! Something went wrong.');
+    });
+
+    it ('shows the default text', async () => {
+        await goToPage(page, 'error');
+
+        const errorCode = await page.$eval('h3', (el) => el.innerText);
+        expect(errorCode).to.equal('Unknown Error - Something unexpected happened.');
+    });
+
+    it ('shows 404 when page is not found', async () => {
+        await goToPage(page, 'sdf');
+
+        //eslint-disable-next-line no-console
+        console.log(await page.title());
+
+        const errorCode = await page.$eval('.h3', (el) => el.innerText);
+        expect(errorCode).to.equal('404 - Page not found');
+    });
+};
diff --git a/test/public/error/index.js b/test/public/error/index.js
new file mode 100644
index 0000000000..8bb859978d
--- /dev/null
+++ b/test/public/error/index.js
@@ -0,0 +1,17 @@
+/**
+ *  @license
+ *  Copyright CERN and copyright holders of ALICE O2. This software is
+ *  distributed under the terms of the GNU General Public License v3 (GPL
+ *  Version 3), copied verbatim in the file "COPYING".
+ *
+ *  See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ *  In applying this license CERN does not waive the privileges and immunities
+ *  granted to it by virtue of its status as an Intergovernmental Organization
+ *  or submit itself to any jurisdiction.
+ */
+const ErrorSuite = require('./error.test');
+
+module.exports = () => {
+    describe('Error Page', ErrorSuite);
+};
diff --git a/test/public/index.js b/test/public/index.js
index 51ec36837e..ca57751ba9 100644
--- a/test/public/index.js
+++ b/test/public/index.js
@@ -19,6 +19,7 @@ const FlpsSuite = require('./flps');
 const HomeSuite = require('./home');
 const AboutSuite = require('./about');
 const EnvsSuite = require('./envs');
+const ErrorSuite = require('./error');
 const EosReportSuite = require('./eosReport');
 const LhcPeriodsSuite = require('./lhcPeriods');
 const DataPassesSuite = require('./dataPasses');
@@ -41,4 +42,5 @@ module.exports = () => {
     describe('SimulationPasses', SimulationPassesSuite);
     describe('QcFlagTypes', QcFlagTypesSuite);
     describe('QcFlags', QcFlagsSuite);
+    describe('Error', ErrorSuite);
 };

From 8fc6d4f2894c1f92718c31addfed8123c1fe2f62 Mon Sep 17 00:00:00 2001
From: Fenne <fennehattink@gmail.com>
Date: Tue, 17 Dec 2024 09:09:12 +0100
Subject: [PATCH 5/9] Remove redundant tets

---
 test/public/error/error.test.js | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/test/public/error/error.test.js b/test/public/error/error.test.js
index 32134001a6..5d9bd35e52 100644
--- a/test/public/error/error.test.js
+++ b/test/public/error/error.test.js
@@ -59,14 +59,4 @@ module.exports = () => {
         const errorCode = await page.$eval('h3', (el) => el.innerText);
         expect(errorCode).to.equal('Unknown Error - Something unexpected happened.');
     });
-
-    it ('shows 404 when page is not found', async () => {
-        await goToPage(page, 'sdf');
-
-        //eslint-disable-next-line no-console
-        console.log(await page.title());
-
-        const errorCode = await page.$eval('.h3', (el) => el.innerText);
-        expect(errorCode).to.equal('404 - Page not found');
-    });
 };

From 55734074dbf95af7a35c959dd484cd4bafe0eb35 Mon Sep 17 00:00:00 2001
From: Fenne <fennehattink@gmail.com>
Date: Tue, 17 Dec 2024 16:21:45 +0100
Subject: [PATCH 6/9] Page parameter will now be displayed even after
 navigating to error page

---
 lib/public/Model.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/public/Model.js b/lib/public/Model.js
index 62a4f82d0e..4d7cc9a4ce 100644
--- a/lib/public/Model.js
+++ b/lib/public/Model.js
@@ -325,7 +325,8 @@ export default class Model extends Observable {
                         codeDescription: 'Page not found',
                         message: 'The page you are looking for might have been removed, had its name changed or is temorarily unavailable.',
                     });
-                    this.router.go('?page=error');
+                    this.router.params.page = 'error';
+                    this.router.notify();
                     break;
                 } else {
                     this.router.go('?page=home');

From 03f386360a904f0eccc4c43a27e1015707a3bee7 Mon Sep 17 00:00:00 2001
From: Fenne <fennehattink@gmail.com>
Date: Tue, 7 Jan 2025 10:50:47 +0100
Subject: [PATCH 7/9] small code improvements

---
 lib/public/views/Error/ErrorModel.js | 12 ++++++++++--
 lib/public/views/Error/index.js      | 14 ++++++--------
 test/public/error/error.test.js      |  9 ---------
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/lib/public/views/Error/ErrorModel.js b/lib/public/views/Error/ErrorModel.js
index 8bae8e430e..b363c4d813 100644
--- a/lib/public/views/Error/ErrorModel.js
+++ b/lib/public/views/Error/ErrorModel.js
@@ -17,6 +17,14 @@ import { Observable } from '/js/src/index.js';
  * Model representing handlers for errorPage.js
  */
 export class ErrorModel extends Observable {
+    /**
+     * The Error object.
+     * @typedef {(Object)} Error
+     * @property {string} code - The error code
+     * @property {string} codeDescription - The description of the error code
+     * @property {string} message - The error message
+     */
+
     /**
      * The constructor for the Error model object
      * @returns {Object} Constructs the Error model
@@ -32,7 +40,7 @@ export class ErrorModel extends Observable {
 
     /**
      * Sets the error object for the model
-     * @param {Object} error The error object to set, must contain a code, codeDescription and message
+     * @param {Error} error The error object
      * @returns {void}
      */
     setError(error) {
@@ -45,7 +53,7 @@ export class ErrorModel extends Observable {
 
     /**
      * Returns the error object for the model
-     * @returns {Object} The error object
+     * @returns {Error} The error object
      */
     getError() {
         return this.error;
diff --git a/lib/public/views/Error/index.js b/lib/public/views/Error/index.js
index 12d8843fe9..44d86f7888 100644
--- a/lib/public/views/Error/index.js
+++ b/lib/public/views/Error/index.js
@@ -10,7 +10,8 @@
  * granted to it by virtue of its status as an Intergovernmental Organization
  * or submit itself to any jurisdiction.
  */
-import { h, iconHome } from '/js/src/index.js';
+import { frontLink } from '../../components/common/navigation/frontLink.js';
+import { h } from '/js/src/index.js';
 
 /**
  * Error page component that dynamically displays error details based on the model
@@ -29,13 +30,10 @@ export const ErrorPage = (model) => {
             h('h2', 'Oops! Something went wrong.'),
             h('h3', `${code} - ${codeDescription}`),
             h('.f5', message),
-            h('button.btn.btn-primary', {
-                onclick: () => {
-                    model.router.go('?page=home');
-                } }, [
-                iconHome(),
-                ' Go to Home Page',
-            ]),
+            frontLink(
+                h('nav-link', ['Go to Home Page']),
+                'home',
+            ),
         ]),
     ]);
 };
diff --git a/test/public/error/error.test.js b/test/public/error/error.test.js
index 5d9bd35e52..bb8fce41cc 100644
--- a/test/public/error/error.test.js
+++ b/test/public/error/error.test.js
@@ -23,11 +23,6 @@ module.exports = () => {
 
     before(async () => {
         [page, browser] = await defaultBefore(page, browser);
-        await page.setViewport({
-            width: 700,
-            height: 720,
-            deviceScaleFactor: 1,
-        });
         await resetDatabaseContent();
     });
 
@@ -47,15 +42,11 @@ module.exports = () => {
     });
 
     it('shows the error message', async () => {
-        await goToPage(page, 'error');
-
         const errorTitle = await page.$eval('h2', (el) => el.innerText);
         expect(errorTitle).to.equal('Oops! Something went wrong.');
     });
 
     it ('shows the default text', async () => {
-        await goToPage(page, 'error');
-
         const errorCode = await page.$eval('h3', (el) => el.innerText);
         expect(errorCode).to.equal('Unknown Error - Something unexpected happened.');
     });

From 2c2655e9884c941fcc4ebc9ae57504d375b8164c Mon Sep 17 00:00:00 2001
From: Fenne <fennehattink@gmail.com>
Date: Mon, 13 Jan 2025 16:07:31 +0100
Subject: [PATCH 8/9] Reverted import refactor

---
 lib/public/Model.js | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/lib/public/Model.js b/lib/public/Model.js
index 4d7cc9a4ce..934d047691 100644
--- a/lib/public/Model.js
+++ b/lib/public/Model.js
@@ -13,32 +13,32 @@
 
 import { Loader, Observable, QueryRouter, sessionService } from '/js/src/index.js';
 
-import { registerFrontLinkListener } from './components/common/navigation/frontLinkListener.js';
+import { LogsModel } from './views/Logs/LogsModel.js';
+import Tags from './views/Tags/Tags.js';
+import { RunsModel } from './views/Runs/RunsModel.js';
+import Flps from './views/Flps/Flps.js';
+import { EnvironmentModel } from './views/Environments/EnvironmentModel.js';
+import LhcFills from './views/LhcFills/LhcFills.js';
+import RunTypeModel from './views/RunTypes/RunTypeModel.js';
 import { ModalModel } from './components/modal/ModalModel.js';
-import { BkpRoles } from './domain/enums/BkpRoles.js';
-import { UserRoleSelectionModel } from './models/UserRoleSelectionModel.js';
-import { detectorsProvider } from './services/detectors/detectorsProvider.js';
-import { ObservableData } from './utilities/ObservableData.js';
 import { debounce, INPUT_DEBOUNCE_TIME } from './utilities/debounce.js';
-import { getRoleForDetector } from './utilities/getRoleForDetector.js';
 import { userPreferencesStore } from './utilities/userPreferencesStore.js';
-import { AboutModel } from './views/About/About.js';
-import { DataPassesModel } from './views/DataPasses/DataPassesModel.js';
-import { EnvironmentModel } from './views/Environments/EnvironmentModel.js';
+import { registerFrontLinkListener } from './components/common/navigation/frontLinkListener.js';
 import { EosReportModel } from './views/EosReport/EosReportModel.js';
-import { ErrorModel } from './views/Error/ErrorModel.js';
-import Flps from './views/Flps/Flps.js';
+import { AboutModel } from './views/About/About.js';
+import { StatisticsPageModel } from './views/Statistics/StatisticsPageModel.js';
+import { LhcPeriodsModel } from './views/lhcPeriods/LhcPeriodsModel.js';
 import { HomePageModel } from './views/Home/Overview/HomePageModel.js';
-import LhcFills from './views/LhcFills/LhcFills.js';
-import { LogsModel } from './views/Logs/LogsModel.js';
+import { DataPassesModel } from './views/DataPasses/DataPassesModel.js';
+import { SimulationPassesModel } from './views/SimulationPasses/SimulationPassesModel.js';
 import { QcFlagTypesModel } from './views/QcFlagTypes/QcFlagTypesModel.js';
 import { QcFlagsModel } from './views/QcFlags/QcFlagsModel.js';
-import RunTypeModel from './views/RunTypes/RunTypeModel.js';
-import { RunsModel } from './views/Runs/RunsModel.js';
-import { SimulationPassesModel } from './views/SimulationPasses/SimulationPassesModel.js';
-import { StatisticsPageModel } from './views/Statistics/StatisticsPageModel.js';
-import Tags from './views/Tags/Tags.js';
-import { LhcPeriodsModel } from './views/lhcPeriods/LhcPeriodsModel.js';
+import { UserRoleSelectionModel } from './models/UserRoleSelectionModel.js';
+import { ObservableData } from './utilities/ObservableData.js';
+import { BkpRoles } from './domain/enums/BkpRoles.js';
+import { getRoleForDetector } from './utilities/getRoleForDetector.js';
+import { detectorsProvider } from './services/detectors/detectorsProvider.js';
+import { ErrorModel } from './views/Error/ErrorModel.js';
 
 /**
  * Root of model tree

From f3df447f7fa429a797da2ec35234fbf7cbef9bc2 Mon Sep 17 00:00:00 2001
From: Fenne <fennehattink@gmail.com>
Date: Mon, 13 Jan 2025 16:20:16 +0100
Subject: [PATCH 9/9] Small code improvements

---
 lib/public/views/Error/ErrorModel.js | 10 +++++-----
 lib/public/views/Error/index.js      |  7 +++++--
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/lib/public/views/Error/ErrorModel.js b/lib/public/views/Error/ErrorModel.js
index b363c4d813..7bf83d6bcc 100644
--- a/lib/public/views/Error/ErrorModel.js
+++ b/lib/public/views/Error/ErrorModel.js
@@ -18,8 +18,8 @@ import { Observable } from '/js/src/index.js';
  */
 export class ErrorModel extends Observable {
     /**
-     * The Error object.
-     * @typedef {(Object)} Error
+     * The ApplicationError object.
+     * @typedef {(object)} ApplicationError
      * @property {string} code - The error code
      * @property {string} codeDescription - The description of the error code
      * @property {string} message - The error message
@@ -27,7 +27,7 @@ export class ErrorModel extends Observable {
 
     /**
      * The constructor for the Error model object
-     * @returns {Object} Constructs the Error model
+     * @returns {object} Constructs the Error model
      */
     constructor() {
         super();
@@ -40,7 +40,7 @@ export class ErrorModel extends Observable {
 
     /**
      * Sets the error object for the model
-     * @param {Error} error The error object
+     * @param {ApplicationError} error The error object
      * @returns {void}
      */
     setError(error) {
@@ -53,7 +53,7 @@ export class ErrorModel extends Observable {
 
     /**
      * Returns the error object for the model
-     * @returns {Error} The error object
+     * @returns {ApplicationError} The error object
      */
     getError() {
         return this.error;
diff --git a/lib/public/views/Error/index.js b/lib/public/views/Error/index.js
index 44d86f7888..dc81956db3 100644
--- a/lib/public/views/Error/index.js
+++ b/lib/public/views/Error/index.js
@@ -11,7 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 import { frontLink } from '../../components/common/navigation/frontLink.js';
-import { h } from '/js/src/index.js';
+import { h, iconHome } from '/js/src/index.js';
 
 /**
  * Error page component that dynamically displays error details based on the model
@@ -31,7 +31,10 @@ export const ErrorPage = (model) => {
             h('h3', `${code} - ${codeDescription}`),
             h('.f5', message),
             frontLink(
-                h('nav-link', ['Go to Home Page']),
+                h('div.flex-row.justify-center.items-center.g1', [
+                    iconHome(),
+                    'Go to Home Page',
+                ]),
                 'home',
             ),
         ]),