Added error handling

src/const.ts

@@ -8,3 +8,9 @@ export const defaults = {
 };
 
 export const MISSING_PARAMETER_ERROR = `Either provide parameter as Actor input or as query parameter: `;
+
+export const BASIC_INFORMATION = 'Once you have the Tester MCP Client running, you can ask:\n'
+    + '- "What Apify Actors I can use"\n'
+    + '- "Which Actor is the best for scraping Instagram comments"\n'
+    + "- \"Can you scrape the first 10 pages of Google search results for 'best restaurants in Prague'?\"\n"
+    + '\n';

src/main.ts

@@ -16,6 +16,7 @@ import cors from 'cors';
 import dotenv from 'dotenv';
 import express from 'express';
 
+import { BASIC_INFORMATION } from './const.js';
 import { processInput } from './input.js';
 import { log } from './logger.js';
 import { MCPClient } from './mcpClient.js';
@@ -109,16 +110,47 @@ app.post('/message', async (req, res) => {
     }
 });
 
+/**
+ * Periodically check if the main server is still reachable.
+ */
+app.get('/pingMcpServer', async (_req, res) => {
+    try {
+        // Attempt to ping the main MCP server
+        const response = await client.isConnected();
+        res.json({ status: response });
+    } catch (err) {
+        res.json({ status: 'Not connected', error: (err as Error).message });
+    }
+});
+
+app.post('/reconnect', async (_req, res) => {
+    try {
+        log.debug('Reconnecting to main server');
+        await client.connectToServer();
+        const response = await client.isConnected();
+        res.json({ status: response });
+    } catch (err) {
+        log.error(`Error reconnecting to main server: ${err}`);
+        res.json({ status: 'Not connected', error: (err as Error).message });
+    }
+});
+
+/**
+ * GET /client-info endpoint to provide the client with necessary information
+ */
 app.get('/client-info', (_req, res) => {
-    // If you have these values in config or environment, adapt as needed.
     res.json({
         mcpSseUrl: input.mcpSseUrl,
         systemPrompt: input.systemPrompt,
         modelName: input.modelName,
-        publicUrl: publicUrl,
+        publicUrl,
+        information: BASIC_INFORMATION,
     });
 });
 
+/**
+ * POST /conversation/reset to reset the conversation
+ */
 app.post('/conversation/reset', (_req, res) => {
     client.resetConversation();
     res.json({ ok: true });

src/mcpClient.ts

@@ -64,7 +64,7 @@ export class MCPClient {
      * Connect to the server using stdio transport and list available tools.
      */
     async connectToServer() {
-        if (this.isConnected) return;
+        if (this._isConnected) return;
         const { customHeaders } = this;
         const transport = new SSEClientTransport(
             new URL(this.serverUrl),
@@ -84,11 +84,20 @@ export class MCPClient {
         );
         await this.client.connect(transport);
         await this.updateTools();
-        this._isConnected = true;
     }
 
-    get isConnected() {
-        return this._isConnected;
+    async isConnected() {
+        try {
+            await this.client.ping();
+            this._isConnected = true;
+            return 'OK';
+        } catch (error) {
+            this._isConnected = false;
+            if (error instanceof Error) {
+                return error.message;
+            }
+            return String(error);
+        }
     }
 
     resetConversation() {

src/public/client.js

@@ -3,10 +3,16 @@
 
 // ===== DOM Elements =====
 const chatLog = document.getElementById('chatLog');
+const clearBtn = document.getElementById('clearBtn');
+const clientInfo = document.getElementById('clientInfo');
+const information = document.getElementById('information');
+const mcpServerStatus = document.getElementById('mcpServerStatus');
+const mcpSseUrl = document.getElementById('mcpSseUrl');
 const queryInput = document.getElementById('queryInput');
+const reconnectBtn = document.getElementById('reconnectBtn');
 const sendBtn = document.getElementById('sendBtn');
-const clearBtn = document.getElementById('clearBtn');
 const spinner = document.getElementById('spinner');
+const statusIcon = document.getElementById('statusIcon');
 
 // Keep local messages for display (optional)
 const messages = [];
@@ -31,6 +37,11 @@ eventSource.onerror = (err) => {
     appendMessage('internal', `SSE connection error: ${JSON.stringify(err.message) || err}`);
 };
 
+// Then call connectSSE as soon as the browser is ready:
+document.addEventListener('DOMContentLoaded', () => {
+    reconnect();
+});
+
 /**
  * 2) Main function to append messages to the chat.
  *    If content is an array with tool blocks, we separate them out.
@@ -213,15 +224,17 @@ document.addEventListener('DOMContentLoaded', async () => {
         const resp = await fetch('/client-info');
         const data = await resp.json();
 
-        const mcpSseUrl = document.getElementById('mcpSseUrl');
         if (mcpSseUrl) {
             mcpSseUrl.textContent = data.mcpSseUrl;
         }
         // Show the system prompt in a collapsible <details> (assuming you have <pre id="systemPromptPre">)
-        const clientInfo = document.getElementById('clientInfo');
         if (clientInfo) {
             clientInfo.textContent = `Model name: ${data.modelName}\nSystem prompt: ${data.systemPrompt}`;
         }
+
+        if (information) {
+            information.innerHTML = `${data.information}`;
+        }
     } catch (err) {
         console.error('Error fetching client info:', err);
     }
@@ -243,3 +256,57 @@ clearBtn.addEventListener('click', async () => {
         console.error('Error resetting conversation:', err);
     }
 });
+
+async function checkConnection() {
+    fetch('/pingMcpServer')
+        .then((resp) => resp.json())
+        .then((data) => {
+            if (mcpServerStatus) {
+                updateMcpServerStatus(data.status);
+            }
+        })
+        .catch((err) => {
+            console.error('Network error calling /pingMcpServer:', err);
+            if (mcpServerStatus) {
+                mcpServerStatus.textContent = 'Network error';
+            }
+        });
+}
+
+async function reconnect() {
+    fetch('/reconnect', { method: 'POST' })
+        .then((resp) => resp.json())
+        .then((data) => {
+            if (mcpServerStatus) {
+                updateMcpServerStatus(data.status);
+            }
+        })
+        .catch((err) => {
+            console.error('Network error calling /reconnect:', err);
+            if (mcpServerStatus) {
+                updateMcpServerStatus('Network error');
+            }
+        });
+}
+
+function updateMcpServerStatus(status) {
+    const isOk = status === true || status === 'OK';
+    if (isOk) {
+        statusIcon.style.backgroundColor = 'green';
+        mcpServerStatus.textContent = 'OK';
+    } else {
+        statusIcon.style.backgroundColor = 'red';
+        mcpServerStatus.textContent = 'Disconnected';
+    }
+}
+
+reconnectBtn.addEventListener('click', async () => {
+    mcpServerStatus.textContent = 'Reconnecting...';
+    /* eslint-disable-next-line no-promise-executor-return */
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    await reconnect();
+});
+
+setInterval(async () => {
+    await checkConnection();
+}, 5000);

src/public/index.html

@@ -110,16 +110,39 @@
 </head>
 <body>
 <div id="chatContainer">
-    <div>
-        <strong>MCP Server URL <span id="mcpSseUrl" style="display: inline;"></span></strong>
-    </div>
+    <h2>Actors MCP Client</h2>
     <details style="margin: 8px 0;">
-        <summary>Information</summary>
+        <summary>Client settings (model name, system prompt)</summary>
         <pre id="clientInfo"></pre>
     </details>
-    <h2>Actors MCP Client</h2>
+    <details style="margin: 8px 0;">
+        <summary>Information</summary>
+        <pre id="information"></pre>
+    </details>
+    <div>
+        MCP Server SSE URL: <span id="mcpSseUrl" style="display: inline;"></span>
+    </div>
+    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
+        <!-- Left side: Status + Reconnect -->
+        <div style="display: flex; align-items: center; gap: 8px;">
+            <span>MCP Server Status:</span>
+            <!-- Circle icon for status: green or red -->
+            <span id="statusIcon"
+                  style="
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background-color: gray;
+          ">
+    </span>
+            <span id="mcpServerStatus">Unknown</span>
+            <button id="reconnectBtn">Reconnect</button>
+        </div>
+        <!-- Right side: Delete Conversation -->
+        <button id="clearBtn">Delete Conversation</button>
+    </div>
     <div id="chatLog"></div>
-
     <div id="inputRow">
         <label for="queryInput"></label><textarea id="queryInput" rows="2" placeholder="Type message..."></textarea>
         <button id="sendBtn">Send</button>