fix(web): implement offline detection (#1065)

* xtreme connected edition

* change fallbackRender to fallbackComponent on ErrorBoundary

* call healthz endpoint when error is 500

* display custom offline message

* fix eslint indentation for switchCase

* Update ErrorPage.tsx

* check against error.cause

---------

Co-authored-by: Fabricio Silva <hi@fabricio.dev>

web/.eslintrc.js

@@ -19,7 +19,7 @@ module.exports = {
     // Allow only double quotes and backticks
     quotes: ["error", "double"],
     // Warn if a line isn't indented with a multiple of 2
-    indent: ["warn", 2],
+    indent: ["warn", 2, { "SwitchCase": 1 }],
     // Don't enforce any particular brace style
     curly: "off",
     // Allow only vars starting with _ to be ununsed vars
@@ -64,7 +64,7 @@ module.exports = {
         "@typescript-eslint/quotes": ["error", "double"],
         semi: "off",
         "@typescript-eslint/semi": ["warn", "always"],
-        indent: ["warn", 2],
+        indent: ["warn", 2, { "SwitchCase": 1 }],
         "@typescript-eslint/indent": "off",
         "@typescript-eslint/comma-dangle": "warn",
         "keyword-spacing": "off",

web/src/App.tsx

@@ -22,7 +22,7 @@ const queryClient = new QueryClient({
       // delay = Math.min(1000 * 2 ** attemptIndex, 30000)
       retry: true,
       useErrorBoundary: true,
-      suspense: true,
+      suspense: true
     },
     mutations: {
       onError: (error) => {
@@ -47,7 +47,7 @@ export function App() {
   return (
     <ErrorBoundary
       onReset={reset}
-      fallbackRender={ErrorPage}
+      FallbackComponent={ErrorPage}
     >
       <QueryClientProvider client={queryClient}>
         <Portal>

web/src/api/APIClient.ts

@@ -20,7 +20,7 @@ interface HttpConfig {
 function encodeRFC3986URIComponent(str: string): string {
   return encodeURIComponent(str).replace(
     /[!'()*]/g,
-    (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
+    (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`
   );
 }
 

web/src/components/alerts/ErrorPage.tsx

@@ -17,11 +17,20 @@ export const ErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
     }
   });
 
+  const parseTitle = () => {
+    switch (error?.cause) {
+      case "OFFLINE":
+        return "Connection to Autobrr failed! Check the application state and verify your connectivity.";
+      default:
+        return "We caught an unrecoverable error!";
+    }
+  };
+
   return (
     <div className="min-h-screen flex flex-col justify-center py-12 px-2 sm:px-6 lg:px-8">
       <div className="sm:mx-auto sm:w-full sm:max-w-screen-md md:max-w-screen-lg lg:max-w-screen-xl">
         <h1 className="text-3xl font-bold leading-6 text-gray-900 dark:text-gray-200 mt-4 mb-3">
-          We caught an unrecoverable error!
+          {parseTitle()}
         </h1>
         <h3 className="text-xl leading-6 text-gray-700 dark:text-gray-400 mb-4">
           Please consider reporting this error to our
@@ -67,7 +76,7 @@ export const ErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
             </pre>
           ) : null}
           <span className="block text-gray-800 mb-2 text-md">
-            You can try resetting the page state using the button provided below.
+            You can try resetting the page state using the button provided below or restarting your autobrr application.
             However, this is not guaranteed to fix the error.
           </span>
           <button