Merge pull request #98 from pupboss/master

fix: avoid errors in browser console

5 files changed, 18 insertions, 15 deletions

diff --git a/src/api/connections.ts b/src/api/connections.ts
index fd0901b..772ec4a 100644
--- a/src/api/connections.ts
+++ b/src/api/connections.ts
@@ -51,11 +51,11 @@ function appendData(s: string) {
   let o: ConnectionsData;
   try {
     o = JSON.parse(s);
-    o.connections.forEach(conn => {
-      let m = conn.metadata;
+    o.connections?.forEach((conn) => {
+      const m = conn.metadata;
       if (m.process == null) {
         if (m.processPath != null) {
-          m.process = m.processPath.replace(/^.*[/\\](.*)$/, "$1");
+          m.process = m.processPath.replace(/^.*[/\\](.*)$/, '$1');
         }
       }
     });
@@ -86,12 +86,12 @@ export function fetchData(
   const ws = new WebSocket(url);
   ws.addEventListener('error', () => {
     wsState = 3;
-    subscribers.forEach((s) => s.onClose());
+    subscribers.forEach((s) => s.onClose?.());
     subscribers.length = 0;
   });
   ws.addEventListener('close', () => {
     wsState = 3;
-    subscribers.forEach((s) => s.onClose());
+    subscribers.forEach((s) => s.onClose?.());
     subscribers.length = 0;
   });
   ws.addEventListener('message', (event) => appendData(event.data));
diff --git a/src/components/APIConfig.tsx b/src/components/APIConfig.tsx
index 9491d2f..c67a157 100644
--- a/src/components/APIConfig.tsx
+++ b/src/components/APIConfig.tsx
@@ -86,11 +86,13 @@ function APIConfig({ dispatch }) {
   const detectApiServer = async () => {
     // if there is already a clash API server at `/`, just use it as default value
     const res = await fetch('/');
-    res.json().then((data) => {
-      if (data['hello'] === 'clash') {
-        setBaseURL(window.location.origin);
-      }
-    });
+    if (res.headers.get('content-type')?.includes('application/json')) {
+      res.json().then((data) => {
+        if (data['hello'] === 'clash') {
+          setBaseURL(window.location.origin);
+        }
+      });
+    }
   };
   useEffect(() => {
     detectApiServer();
diff --git a/src/components/Connections.tsx b/src/components/Connections.tsx
index cff9a26..b76af79 100644
--- a/src/components/Connections.tsx
+++ b/src/components/Connections.tsx
@@ -313,9 +313,10 @@ function Conn({ apiConfig }) {
     ({ connections }) => {
       const prevConnsKv = arrayToIdKv(prevConnsRef.current);
       const now = Date.now();
-      const x = connections.map((c: ConnectionItem) =>
-        formatConnectionDataItem(c, prevConnsKv, now, sourceMap)
-      );
+      const x =
+        connections?.map((c: ConnectionItem) =>
+          formatConnectionDataItem(c, prevConnsKv, now, sourceMap)
+        ) ?? [];
       const closed = [];
       for (const c of prevConnsRef.current) {
         const idx = x.findIndex((conn: ConnectionItem) => conn.id === c.id);
diff --git a/src/components/TrafficNow.tsx b/src/components/TrafficNow.tsx
index ae69910..ad7d910 100644
--- a/src/components/TrafficNow.tsx
+++ b/src/components/TrafficNow.tsx
@@ -74,7 +74,7 @@ function useConnection(apiConfig) {
       setState({
         upTotal: prettyBytes(uploadTotal),
         dlTotal: prettyBytes(downloadTotal),
-        connNumber: connections.length,
+        connNumber: connections ? connections.length : 0,
         mUsage: prettyBytes(memory),
       });
     },
diff --git a/src/store/app.ts b/src/store/app.ts
index 26f311f..fb5fc2d 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -179,7 +179,7 @@ function parseConfigQueryString() {
   const qs = search.replace(/^\?/, '').split('&');
   for (let i = 0; i < qs.length; i++) {
     const [k, v] = qs[i].split('=');
-    collector[k] = encodeURIComponent(v);
+    collector[k] = decodeURIComponent(v);
   }
   return collector;
 }