From 5f8f13d475597f4ab1b24fa919221b81b20fc6a4 Mon Sep 17 00:00:00 2001
From: williambza <william.brander@gmail.com>
Date: Mon, 8 Jun 2026 14:58:36 +0200
Subject: [PATCH 1/3] Add access denied checks

---
 .../src/components/ServiceControlAvailable.vue  | 10 ++++++++++
 .../components/monitoring/monitoringClient.ts   |  5 +++++
 .../src/components/serviceControlClient.ts      |  3 ++-
 src/Frontend/src/resources/ConnectionState.ts   |  1 +
 .../src/stores/ConnectionsAndStatsStore.ts      | 17 ++++++++++++++---
 src/Frontend/src/utils/HttpError.ts             |  7 +++++++
 6 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 src/Frontend/src/utils/HttpError.ts

diff --git a/src/Frontend/src/components/ServiceControlAvailable.vue b/src/Frontend/src/components/ServiceControlAvailable.vue
index b40c6dc31f..f7f6269e93 100644
--- a/src/Frontend/src/components/ServiceControlAvailable.vue
+++ b/src/Frontend/src/components/ServiceControlAvailable.vue
@@ -10,6 +10,16 @@ const connectionState = connectionStore.connectionState;
 
 <template>
   <div class="sp-loader" v-if="connectionState.connecting && !connectionState.unableToConnect" />
+  <div v-else-if="connectionState.forbidden" class="text-center unsupported">
+    <h1>Access Denied</h1>
+    <p>
+      You do not have permission to access the ServiceControl instance at
+      <span id="serviceControlUrl">{{ serviceControlClient.url }}</span>. Please ensure your account has the required permissions.
+    </p>
+    <div class="action-toolbar">
+      <RouterLink :to="routeLinks.configuration.connections.link"><span class="btn btn-default btn-primary whiteText">View Connection Details</span></RouterLink>
+    </div>
+  </div>
   <ConditionalRender v-else :supported="!connectionState.unableToConnect">
     <template #unsupported>
       <div class="text-center unsupported">
diff --git a/src/Frontend/src/components/monitoring/monitoringClient.ts b/src/Frontend/src/components/monitoring/monitoringClient.ts
index 4b22ed4bed..df5bed62be 100644
--- a/src/Frontend/src/components/monitoring/monitoringClient.ts
+++ b/src/Frontend/src/components/monitoring/monitoringClient.ts
@@ -1,5 +1,6 @@
 import { authFetch } from "@/composables/useAuthenticatedFetch";
 import type { Endpoint, EndpointDetails } from "@/resources/MonitoringEndpoint";
+import { HttpError } from "@/utils/HttpError";
 
 export interface MetricsConnectionDetails {
   Enabled: boolean;
@@ -96,6 +97,10 @@ class MonitoringClient {
     }
 
     const response = await authFetch(`${this.url}${suffix}`);
+    if (!response.ok) {
+      throw new HttpError(response.status, response.statusText);
+    }
+
     const data = await response.json();
 
     return [response, data];
diff --git a/src/Frontend/src/components/serviceControlClient.ts b/src/Frontend/src/components/serviceControlClient.ts
index 73e3c0c9e0..40ad24c535 100644
--- a/src/Frontend/src/components/serviceControlClient.ts
+++ b/src/Frontend/src/components/serviceControlClient.ts
@@ -1,4 +1,5 @@
 import { authFetch } from "@/composables/useAuthenticatedFetch";
+import { HttpError } from "@/utils/HttpError";
 
 export interface ServiceControlInstanceConnection {
   settings: { [key: string]: object };
@@ -30,7 +31,7 @@ class ServiceControlClient {
 
   public async fetchTypedFromServiceControl<T>(suffix: string, signal?: AbortSignal): Promise<[Response, T]> {
     const response = await authFetch(`${this.url}${suffix}`, { signal });
-    if (!response.ok) throw new Error(response.statusText ?? "No response");
+    if (!response.ok) throw new HttpError(response.status, response.statusText ?? "No response");
     const data = await response.json();
 
     return [response, data];
diff --git a/src/Frontend/src/resources/ConnectionState.ts b/src/Frontend/src/resources/ConnectionState.ts
index 93936f8032..ccfc98521c 100644
--- a/src/Frontend/src/resources/ConnectionState.ts
+++ b/src/Frontend/src/resources/ConnectionState.ts
@@ -3,4 +3,5 @@ export interface ConnectionState {
   connecting: boolean;
   connectedRecently: boolean;
   unableToConnect: boolean | null;
+  forbidden: boolean;
 }
diff --git a/src/Frontend/src/stores/ConnectionsAndStatsStore.ts b/src/Frontend/src/stores/ConnectionsAndStatsStore.ts
index b7aae7ee1b..da7d9af2e1 100644
--- a/src/Frontend/src/stores/ConnectionsAndStatsStore.ts
+++ b/src/Frontend/src/stores/ConnectionsAndStatsStore.ts
@@ -6,6 +6,7 @@ import type { ConnectionState } from "@/resources/ConnectionState";
 import { useCounter } from "@vueuse/core";
 import monitoringClient from "@/components/monitoring/monitoringClient";
 import serviceControlClient from "@/components/serviceControlClient";
+import { HttpError } from "@/utils/HttpError";
 
 export const useConnectionsAndStatsStore = defineStore("ConnectionsAndStatsStore", () => {
   const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;
@@ -25,6 +26,7 @@ export const useConnectionsAndStatsStore = defineStore("ConnectionsAndStatsStore
     connecting: false,
     connectedRecently: false,
     unableToConnect: null,
+    forbidden: false,
   });
 
   const monitoringConnectionState = reactive<ConnectionState>({
@@ -32,6 +34,7 @@ export const useConnectionsAndStatsStore = defineStore("ConnectionsAndStatsStore
     connecting: false,
     connectedRecently: false,
     unableToConnect: null,
+    forbidden: false,
   });
 
   const displayConnectionsWarning = computed(() => (connectionState.unableToConnect || (monitoringConnectionState.unableToConnect && isMonitoringEnabled)) ?? false);
@@ -87,6 +90,7 @@ async function fetchAndSetConnectionState(fetchFunction: () => Promise<number |
     try {
       const data = await fetchFunction();
       connectionState.unableToConnect = false;
+      connectionState.forbidden = false;
       connectionState.connectedRecently = true;
       connectionState.connected = true;
       connectionState.connecting = false;
@@ -94,10 +98,17 @@ async function fetchAndSetConnectionState(fetchFunction: () => Promise<number |
       return data ?? 0;
     } catch (err) {
       connectionState.connected = false;
-      connectionState.unableToConnect = true;
-      connectionState.connectedRecently = false;
       connectionState.connecting = false;
-      logger.error(err);
+      connectionState.connectedRecently = false;
+
+      if (err instanceof HttpError && err.status === 403) {
+        connectionState.forbidden = true;
+        connectionState.unableToConnect = false;
+      } else {
+        connectionState.forbidden = false;
+        connectionState.unableToConnect = true;
+        logger.error(err);
+      }
     }
   } catch {
     connectionState.connecting = false;
diff --git a/src/Frontend/src/utils/HttpError.ts b/src/Frontend/src/utils/HttpError.ts
new file mode 100644
index 0000000000..cd72f55f63
--- /dev/null
+++ b/src/Frontend/src/utils/HttpError.ts
@@ -0,0 +1,7 @@
+export class HttpError extends Error {
+    status: number;
+    constructor(status: number, message?: string) {
+        super(message ?? String(status));
+        this.status = status;
+    }
+}
\ No newline at end of file

From fcb0e8261a6fefb08e9fd22d60bd38acf402bd05 Mon Sep 17 00:00:00 2001
From: williambza <william.brander@gmail.com>
Date: Tue, 9 Jun 2026 11:21:36 +0200
Subject: [PATCH 2/3] Fix lint

---
 .../src/components/ServiceControlAvailable.vue       |  5 +++--
 src/Frontend/src/utils/HttpError.ts                  | 12 ++++++------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/Frontend/src/components/ServiceControlAvailable.vue b/src/Frontend/src/components/ServiceControlAvailable.vue
index f7f6269e93..e791a17b40 100644
--- a/src/Frontend/src/components/ServiceControlAvailable.vue
+++ b/src/Frontend/src/components/ServiceControlAvailable.vue
@@ -12,6 +12,7 @@ const connectionState = connectionStore.connectionState;
   <div class="sp-loader" v-if="connectionState.connecting && !connectionState.unableToConnect" />
   <div v-else-if="connectionState.forbidden" class="text-center unsupported">
     <h1>Access Denied</h1>
+    <!-- prettier-ignore -->
     <p>
       You do not have permission to access the ServiceControl instance at
       <span id="serviceControlUrl">{{ serviceControlClient.url }}</span>. Please ensure your account has the required permissions.
@@ -24,10 +25,10 @@ const connectionState = connectionStore.connectionState;
     <template #unsupported>
       <div class="text-center unsupported">
         <h1>Cannot connect to ServiceControl</h1>
+        <!-- prettier-ignore -->
         <p>
           ServicePulse is unable to connect to the ServiceControl instance at
-          <span id="serviceControlUrl">{{ serviceControlClient.url }}</span
-          >. Please ensure that ServiceControl is running and accessible from your machine.
+          <span id="serviceControlUrl">{{ serviceControlClient.url }}</span>. Please ensure that ServiceControl is running and accessible from your machine.
         </p>
         <div class="action-toolbar">
           <RouterLink :to="routeLinks.configuration.connections.link"><span class="btn btn-default btn-primary whiteText">View Connection Details</span></RouterLink>
diff --git a/src/Frontend/src/utils/HttpError.ts b/src/Frontend/src/utils/HttpError.ts
index cd72f55f63..659c13642b 100644
--- a/src/Frontend/src/utils/HttpError.ts
+++ b/src/Frontend/src/utils/HttpError.ts
@@ -1,7 +1,7 @@
 export class HttpError extends Error {
-    status: number;
-    constructor(status: number, message?: string) {
-        super(message ?? String(status));
-        this.status = status;
-    }
-}
\ No newline at end of file
+  status: number;
+  constructor(status: number, message?: string) {
+    super(message ?? String(status));
+    this.status = status;
+  }
+}

From d6aa56e4a569117711892d34262db1796ccd9cf1 Mon Sep 17 00:00:00 2001
From: williambza <william.brander@gmail.com>
Date: Wed, 10 Jun 2026 11:03:08 +0200
Subject: [PATCH 3/3] Fix tests and lint

---
 .../src/components/ServiceControlAvailable.vue |  2 ++
 .../components/monitoring/monitoringClient.ts  | 18 +++++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/Frontend/src/components/ServiceControlAvailable.vue b/src/Frontend/src/components/ServiceControlAvailable.vue
index e791a17b40..31c7ad0c99 100644
--- a/src/Frontend/src/components/ServiceControlAvailable.vue
+++ b/src/Frontend/src/components/ServiceControlAvailable.vue
@@ -12,6 +12,7 @@ const connectionState = connectionStore.connectionState;
   <div class="sp-loader" v-if="connectionState.connecting && !connectionState.unableToConnect" />
   <div v-else-if="connectionState.forbidden" class="text-center unsupported">
     <h1>Access Denied</h1>
+    <!-- This is here so that the new line does not need to begin with `>.` because that's ugly and we should feel ashamed of committing that -->
     <!-- prettier-ignore -->
     <p>
       You do not have permission to access the ServiceControl instance at
@@ -25,6 +26,7 @@ const connectionState = connectionStore.connectionState;
     <template #unsupported>
       <div class="text-center unsupported">
         <h1>Cannot connect to ServiceControl</h1>
+        <!-- This is here so that the new line does not need to begin with `>.` because that's ugly and we should feel ashamed of committing that -->
         <!-- prettier-ignore -->
         <p>
           ServicePulse is unable to connect to the ServiceControl instance at
diff --git a/src/Frontend/src/components/monitoring/monitoringClient.ts b/src/Frontend/src/components/monitoring/monitoringClient.ts
index df5bed62be..5793d5f092 100644
--- a/src/Frontend/src/components/monitoring/monitoringClient.ts
+++ b/src/Frontend/src/components/monitoring/monitoringClient.ts
@@ -37,9 +37,13 @@ class MonitoringClient {
   }
 
   public async getMonitoringVersion() {
-    const [response] = await this.fetchTypedFromMonitoring("");
-    if (response?.ok) {
-      return response.headers.get("X-Particular-Version") ?? "";
+    try {
+      const [response] = await this.fetchTypedFromMonitoring("");
+      if (response?.ok) {
+        return response.headers.get("X-Particular-Version") ?? "";
+      }
+    } catch {
+      // swallow the exception, the default return captures the intent
     }
     return "";
   }
@@ -50,8 +54,12 @@ class MonitoringClient {
   }
 
   public async getMonitoredEndpoints(historyPeriod: number) {
-    const [, data] = await this.fetchTypedFromMonitoring<Endpoint[]>(`monitored-endpoints?history=${historyPeriod}`);
-    return data ?? [];
+    try {
+      const [, data] = await this.fetchTypedFromMonitoring<Endpoint[]>(`monitored-endpoints?history=${historyPeriod}`);
+      return data ?? [];
+    } catch {
+      return [];
+    }
   }
 
   public async deletedMonitoredEndpoint(endpointName: string, instanceId: string) {