wip: improved panel timeout error handling + small stuff

Author: tabarra

core/modules/AdminStore/index.js

@@ -350,8 +350,8 @@ export default class AdminStore {
      * Add a new admin to the admins file
      * NOTE: I'm fully aware this coud be optimized. Leaving this way to improve readability and error verbosity
      * @param {string} name
-     * @param {object|undefined} citizenfxData or false
-     * @param {object|undefined} discordData or false
+     * @param {object|false} citizenfxData or false
+     * @param {object|false} discordData or false
      * @param {string} password
      * @param {array} permissions
      */

panel/src/hooks/fetch.ts

@@ -1,5 +1,6 @@
 import { txToast, validToastTypes } from "@/components/TxToaster";
 import { useCsrfToken, useExpireAuthData } from "@/hooks/auth";
+import { msToShortDuration } from "@/lib/dateTime";
 import { useEffect, useRef } from "react";
 
 const WEBPIPE_PATH = "https://monitor/WebPipe";
@@ -131,6 +132,9 @@ type ApiCallOpts<RespType, ReqType> = {
     finally?: () => void;
 }
 
+//Just syntax sugar
+const VOID = undefined as void;
+
 export const useBackendApi = <
     RespType = any,
     ReqType = NonNullable<Object>,
@@ -149,6 +153,9 @@ export const useBackendApi = <
         }
     }, []);
 
+    /**
+     * @returns VOID if the request was aborted or error was handled, otherwise the response data
+     */
     return async (opts: ApiCallOpts<RespType, ReqType>) => {
         //The abort controller is not aborted, just forgotten
         abortController.current = new AbortController();
@@ -205,12 +212,14 @@ export const useBackendApi = <
         }
 
         //Starting request timeout
+        const timeoutMs = opts.timeout ?? ApiTimeout.DEFAULT;
         const timeoutId = setTimeout(() => {
             if (abortController.current?.signal.aborted) return;
             console.log('[TIMEOUT]', apiCallDesc);
-            abortController.current?.abort('timeout');
+            const msg = `Request timed out after ${msToShortDuration(timeoutMs, {units: ['s', 'ms']})}.`;
+            abortController.current?.abort(msg);
             handleError('Request Timeout', 'If you closed txAdmin, please restart it and try again.');
-        }, opts.timeout ?? ApiTimeout.DEFAULT);
+        }, timeoutMs);
 
         try {
             //Make request
@@ -220,7 +229,9 @@ export const useBackendApi = <
                 body: opts.data,
             }, abortController.current);
             clearTimeout(timeoutId);
-            if (abortController.current?.signal.aborted) return;
+            // if (abortController.current?.signal.aborted) {
+            //     throw abortController.current.signal.reason;
+            // };
 
             //If generic error
             if (hookOpts.throwGenericErrors && 'error' in data) {
@@ -261,11 +272,22 @@ export const useBackendApi = <
             return data as RespType;
 
         } catch (e) {
-            if (abortController.current?.signal.aborted) return;
+            // console.warn('Error Handling:', {
+            //     aborted: abortController.current?.signal.aborted,
+            //     reason: abortController.current?.signal.reason,
+            //     typeof: typeof e,
+            //     e,
+            // });
             clearTimeout(timeoutId);
+            if (e === 'unmount') {
+                console.warn('[UNMOUNTED]', apiCallDesc);
+                return VOID;
+            }
+            const error = abortController.current?.signal.reason ?? e as any;
             let errorMessage = 'unknown error';
-            const error = e as any;
-            if (typeof error.message !== 'string') {
+            if(typeof error === 'string') {
+                errorMessage = error;
+            } else if (typeof error.message !== 'string') {
                 errorMessage = JSON.stringify(error);
             } else if (error.message.startsWith('NetworkError')) {
                 errorMessage = 'Network error.\nIf you closed txAdmin, please restart it and try again.';
@@ -274,13 +296,10 @@ export const useBackendApi = <
             } else {
                 errorMessage = error.message;
             }
-
-            if (errorMessage.includes('unmount')) {
-                console.warn('[UNMOUNTED]', apiCallDesc);
-            } else {
-                console.error('[ERROR]', apiCallDesc, errorMessage);
-                handleError('Request Error', errorMessage);
-            }
+            
+            console.error('[ERROR]', apiCallDesc, errorMessage);
+            handleError('Request Error', errorMessage);
+            return VOID;
         } finally {
             if (opts.finally) {
                 try {

panel/src/pages/Dashboard/DashboardPage.tsx

@@ -47,23 +47,6 @@ function DashboardPageInner() {
                 <ThreadPerfCard />
             </div>
             <FullPerfCard />
-
-            {/* TODO: maybe convert in top server warning */}
-            {/* <div className="mx-auto max-w-4xl w-full sm:w-auto sm:min-w-[28rem] relative overflow-hidden z-40 p-3 pr-10 flex items-center justify-between space-x-4 rounded-xl border shadow-lg transition-all text-black/75 dark:text-white/90 border-warning/70 bg-warning-hint animate-toastbar-enter opacity-50 hover:opacity-100">
-                <div className="flex-shrink-0 flex flex-col gap-2 items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-warning stroke-warning animate-toastbar-icon">
-                        <circle cx="12" cy="12" r="10"></circle>
-                        <path d="M12 16v-4"></path>
-                        <path d="M12 8h.01"></path>
-                    </svg>
-                </div>
-                <div className="flex-grow">
-                    <span className="block whitespace-pre-line">
-                        <b>This update changes how the performance chart show its data.</b> <br />
-                        Now the histogram (colors) are based on the time spent on each bucket instead of the number of ticks. And the bucket boundaries (ms) may have changed to have a better resolution at lower tick times.
-                    </span>
-                </div>
-            </div> */}
         </div>
     );
 }
@@ -82,7 +65,7 @@ export default function DashboardPage() {
     } else if (txConfigState !== TxConfigState.Ready) {
         return <div className='size-full'>
             <ModalTabMessage>
-            <GenericSpinner msg={`Unknown Config State: ${String(txConfigState)}`} />
+                <GenericSpinner msg={`Unknown Config State: ${String(txConfigState)}`} />
             </ModalTabMessage>
         </div>;
     } else {

resource/sv_main.lua

@@ -281,12 +281,14 @@ end
 
 -- Event so the client can ack the warning
 RegisterNetEvent('txsv:ackWarning', function(actionId)
-    if pendingWarnings[tostring(source)] == actionId then
+    if type(actionId) ~= 'string' then return end
+    local srcStr = tostring(source)
+    if pendingWarnings[srcStr] == actionId then
         PrintStructuredTrace(json.encode({
             type = 'txAdminAckWarning',
             actionId = actionId,
         }))
-        pendingWarnings[tostring(source)] = nil
+        pendingWarnings[srcStr] = nil
     end
 end)
 

scripts/build/dev.ts

@@ -57,7 +57,7 @@ fs.writeFileSync(path.join(fxsPaths.monitor, 'package.json'), '{"type":"commonjs
 //Create txAdmin process runner
 const txInstance = new TxAdminRunner(fxsPaths.root, fxsPaths.bin, txDevEnv);
 
-//Listens on stdin for the key 'r'
+//Listens on stdin for commands
 process.stdin.on('data', (data) => {
     const cmd = data.toString().toLowerCase().trim();
     if (cmd === 'r' || cmd === 'rr') {