Merge pull request #2853 from Brain-up/feat/server-down-error-page

Show server-down page when server is unavailable

Author: lifeart

frontend/app/components/error-page.gts

@@ -0,0 +1,27 @@
+import type { TOC } from '@ember/component/template-only';
+import isServerError from 'brn/utils/is-server-error';
+import ServerDown from 'brn/components/server-down';
+
+interface Signature {
+  Args: {
+    model: unknown;
+  };
+}
+
+function errorMessage(error: unknown): string {
+  if (error instanceof Error) return error.message;
+  return String(error ?? '');
+}
+
+const ErrorPage: TOC<Signature> = <template>
+  {{#if (isServerError @model)}}
+    <ServerDown />
+  {{else}}
+    oooops...
+    <pre class="overflow-x-auto whitespace-pre-wrap break-words">
+      {{errorMessage @model}}
+    </pre>
+  {{/if}}
+</template>;
+
+export default ErrorPage;

frontend/app/components/server-down.gts

@@ -0,0 +1,32 @@
+import { t } from 'ember-intl';
+
+const TELEGRAM_URL = 'https://t.me/BrainUpUsers';
+
+<template>
+  <div class="flex min-h-[60vh] items-center justify-center" data-test-server-down>
+    <div class="mx-auto max-w-lg rounded-lg bg-white p-8 text-center shadow-lg">
+      <div class="mb-4 text-6xl">&#x26A0;</div>
+      <h1 class="mb-4 text-2xl font-bold text-gray-800" data-test-server-down-title>
+        {{t "server_down.title"}}
+      </h1>
+      <p class="mb-4 text-gray-600" data-test-server-down-message>
+        {{t "server_down.message"}}
+      </p>
+      <p class="mb-2 text-gray-600">
+        {{t "server_down.telegram_prompt"}}
+      </p>
+      <a
+        href={{TELEGRAM_URL}}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="mb-4 inline-block text-lg font-semibold text-blue-600 hover:text-blue-800 hover:underline"
+        data-test-server-down-telegram-link
+      >
+        {{TELEGRAM_URL}}
+      </a>
+      <p class="mt-4 text-sm text-gray-500" data-test-server-down-fix-promise>
+        {{t "server_down.fix_promise"}}
+      </p>
+    </div>
+  </div>
+</template>

frontend/app/routes/application.js

@@ -3,6 +3,7 @@ import { service } from '@ember/service';
 import { isTesting } from '@embroider/macros';
 import translationsForRuRu from 'virtual:ember-intl/translations/ru-ru';
 import translationsForEnUs from 'virtual:ember-intl/translations/en-us';
+import isServerError from 'brn/utils/is-server-error';
 
 export default class ApplicationRoute extends Route {
   @service('session') session;
@@ -14,24 +15,28 @@ export default class ApplicationRoute extends Route {
   async beforeModel() {
     await this.session.setup();
 
+    this.intl.addTranslations('ru-ru', translationsForRuRu);
+    this.intl.addTranslations('en-us', translationsForEnUs);
+
+    const navigatorLanguage = navigator.languages.filter(el => el.includes('-')).map(el => el.toLowerCase())[0];
+    const rawLocale = localStorage.getItem('locale') || navigatorLanguage;
+    const locale = rawLocale === 'ru-ru' ? 'ru-ru' : 'en-us';
+    this.intl.setLocale([locale]);
+
     if (this.session.isAuthenticated) {
       try {
         await Promise.all([
           this.network.loadCurrentUser(),
           this.tasksManager.loadTodayCompletedExercises(),
         ]);
-      } catch {
-        // handled by loadCurrentUser (redirects to login)
+      } catch (e) {
+        // Re-throw server/network errors so the error template is shown
+        if (isServerError(e)) {
+          throw e;
+        }
+        // Other errors (e.g. 401) are handled by loadCurrentUser (redirects to login)
       }
     }
-
-    this.intl.addTranslations('ru-ru', translationsForRuRu);
-    this.intl.addTranslations('en-us', translationsForEnUs);
-
-    const navigatorLanguage = navigator.languages.filter(el => el.includes('-')).map(el => el.toLowerCase())[0];
-    const rawLocale = localStorage.getItem('locale') || navigatorLanguage;
-    const locale = rawLocale === 'ru-ru' ? 'ru-ru' : 'en-us';
-    this.intl.setLocale([locale]);
   }
 
   redirect(_/* : unknown */, { to }/*: Transition*/) {

frontend/app/templates/error.gts

@@ -1,17 +1,8 @@
-import type { TOC } from '@ember/component/template-only';
 import RouteTemplate from 'ember-route-template';
+import ErrorPage from 'brn/components/error-page';
 
-interface Signature {
-  Args: {
-    model: string;
-  };
-}
-
-const tpl: TOC<Signature> = <template>
-    oooops...
-    <pre class="overflow-x-auto whitespace-pre-wrap break-words">
-      {{@model}}
-    </pre>
-  </template>;
-
-export default RouteTemplate(tpl);
+export default RouteTemplate<{ model: unknown }>(
+  <template>
+    <ErrorPage @model={{@model}} />
+  </template>
+);

frontend/app/utils/is-server-error.ts

@@ -0,0 +1,40 @@
+interface ErrorLike {
+  status?: number;
+  code?: number;
+  isRequestError?: boolean;
+  name?: string;
+  message?: string;
+  errors?: Array<{ status?: number | string }>;
+}
+
+function isErrorLike(error: unknown): error is ErrorLike {
+  return typeof error === 'object' && error !== null;
+}
+
+/**
+ * Detects whether an error represents a server/network failure
+ * (as opposed to a client error like 401/404).
+ *
+ * Returns true for:
+ * - WarpDrive FetchError with status >= 500 or status 0 (network error)
+ * - HTTP 5xx errors from error payloads
+ * - TypeError from fetch (network failures)
+ */
+export default function isServerError(error: unknown): boolean {
+  if (!isErrorLike(error)) return false;
+
+  // WarpDrive FetchError with status >= 500 or network error (status 0)
+  if (error.isRequestError) {
+    const status = error.status ?? error.code ?? 0;
+    return status === 0 || status >= 500;
+  }
+
+  // HTTP 5xx from error payload
+  const status = error.status ?? Number(error.errors?.[0]?.status);
+  if (status && status >= 500) return true;
+
+  // Network failures (fetch throws TypeError for network errors)
+  if (error instanceof TypeError && error.message?.includes('fetch')) return true;
+
+  return false;
+}

frontend/tests/integration/components/server-down/component-test.gts

@@ -0,0 +1,35 @@
+// @ts-nocheck -- QUnit test context typing not supported with @types/qunit v2.9
+import { module, test } from 'qunit';
+import { setupIntl } from 'ember-intl/test-support';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import ServerDown from 'brn/components/server-down';
+
+module('Integration | Component | server-down', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks, 'en-us');
+
+  test('it renders the server down page', async function (assert) {
+    await render(<template><ServerDown /></template>);
+
+    assert.dom('[data-test-server-down]').exists();
+    assert.dom('[data-test-server-down-title]').hasText('t:server_down.title');
+    assert.dom('[data-test-server-down-message]').hasText('t:server_down.message');
+  });
+
+  test('it shows the Telegram link with correct attributes', async function (assert) {
+    await render(<template><ServerDown /></template>);
+
+    const link = assert.dom('[data-test-server-down-telegram-link]');
+    link.hasAttribute('href', 'https://t.me/BrainUpUsers');
+    link.hasAttribute('target', '_blank');
+    link.hasAttribute('rel', 'noopener noreferrer');
+    link.hasText('https://t.me/BrainUpUsers');
+  });
+
+  test('it shows the fix promise message', async function (assert) {
+    await render(<template><ServerDown /></template>);
+
+    assert.dom('[data-test-server-down-fix-promise]').hasText('t:server_down.fix_promise');
+  });
+});

frontend/tests/integration/templates/error-test.gts

@@ -0,0 +1,71 @@
+// @ts-nocheck -- QUnit test context typing not supported with @types/qunit v2.9
+import { module, test } from 'qunit';
+import { setupIntl } from 'ember-intl/test-support';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import ErrorPage from 'brn/components/error-page';
+
+module('Integration | Component | error-page', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks, 'en-us');
+
+  test('it renders ServerDown for WarpDrive FetchError with status 500', async function (assert) {
+    const model = { isRequestError: true, status: 500, code: 500 };
+
+    await render(<template><ErrorPage @model={{model}} /></template>);
+
+    assert.dom('[data-test-server-down]').exists('shows server-down page');
+    assert.dom('pre').doesNotExist('does not show generic error');
+  });
+
+  test('it renders ServerDown for network error (status 0)', async function (assert) {
+    const model = { isRequestError: true, status: 0, code: 0 };
+
+    await render(<template><ErrorPage @model={{model}} /></template>);
+
+    assert.dom('[data-test-server-down]').exists('shows server-down page for network error');
+  });
+
+  test('it renders ServerDown for status 503', async function (assert) {
+    const model = { isRequestError: true, status: 503, code: 503 };
+
+    await render(<template><ErrorPage @model={{model}} /></template>);
+
+    assert.dom('[data-test-server-down]').exists('shows server-down page for 503');
+  });
+
+  test('it renders ServerDown for plain status 500 object', async function (assert) {
+    const model = { status: 500 };
+
+    await render(<template><ErrorPage @model={{model}} /></template>);
+
+    assert.dom('[data-test-server-down]').exists('shows server-down page for plain 500');
+  });
+
+  test('it renders generic error for client errors (status 404)', async function (assert) {
+    const model = { isRequestError: true, status: 404, code: 404 };
+
+    await render(<template><ErrorPage @model={{model}} /></template>);
+
+    assert.dom('[data-test-server-down]').doesNotExist('does not show server-down page');
+    assert.dom('pre').exists('shows generic error pre block');
+  });
+
+  test('it renders generic error for string model', async function (assert) {
+    const model = 'Something went wrong';
+
+    await render(<template><ErrorPage @model={{model}} /></template>);
+
+    assert.dom('[data-test-server-down]').doesNotExist('does not show server-down page');
+    assert.dom('pre').hasText('Something went wrong');
+  });
+
+  test('it renders generic error for a regular Error object', async function (assert) {
+    const model = new Error('Unknown failure');
+
+    await render(<template><ErrorPage @model={{model}} /></template>);
+
+    assert.dom('[data-test-server-down]').doesNotExist('does not show server-down page');
+    assert.dom('pre').exists('shows generic error');
+  });
+});

frontend/tests/unit/utils/is-server-error-test.ts

@@ -0,0 +1,85 @@
+import { module, test } from 'qunit';
+import isServerError from 'brn/utils/is-server-error';
+
+module('Unit | Utils | is-server-error', function () {
+  test('returns false for null/undefined', function (assert) {
+    assert.false(isServerError(null));
+    assert.false(isServerError(undefined));
+  });
+
+  test('returns false for non-object values', function (assert) {
+    assert.false(isServerError('some string error'));
+    assert.false(isServerError(42));
+    assert.false(isServerError(true));
+  });
+
+  test('returns true for WarpDrive FetchError with status 500', function (assert) {
+    const error = { isRequestError: true, status: 500, code: 500 };
+    assert.true(isServerError(error));
+  });
+
+  test('returns true for WarpDrive FetchError with status 503', function (assert) {
+    const error = { isRequestError: true, status: 503, code: 503 };
+    assert.true(isServerError(error));
+  });
+
+  test('returns true for WarpDrive FetchError with status 0 (network error)', function (assert) {
+    const error = { isRequestError: true, status: 0, code: 0 };
+    assert.true(isServerError(error));
+  });
+
+  test('returns false for WarpDrive FetchError with status 401', function (assert) {
+    const error = { isRequestError: true, status: 401, code: 401 };
+    assert.false(isServerError(error));
+  });
+
+  test('returns false for WarpDrive FetchError with status 404', function (assert) {
+    const error = { isRequestError: true, status: 404, code: 404 };
+    assert.false(isServerError(error));
+  });
+
+  test('returns true for error with status 500 in errors array', function (assert) {
+    const error = { errors: [{ status: 500 }] };
+    assert.true(isServerError(error));
+  });
+
+  test('returns true for error with string status "502" in errors array', function (assert) {
+    const error = { errors: [{ status: '502' }] };
+    assert.true(isServerError(error));
+  });
+
+  test('returns false for error with status 400 in errors array', function (assert) {
+    const error = { errors: [{ status: 400 }] };
+    assert.false(isServerError(error));
+  });
+
+  test('returns true for TypeError with fetch message', function (assert) {
+    const error = new TypeError('Failed to fetch');
+    assert.true(isServerError(error));
+  });
+
+  test('returns false for TypeError without fetch message', function (assert) {
+    const error = new TypeError('Cannot read property of undefined');
+    assert.false(isServerError(error));
+  });
+
+  test('returns false for AbortError (user-initiated navigation)', function (assert) {
+    const error = { name: 'AbortError', message: 'The operation was aborted' };
+    assert.false(isServerError(error));
+  });
+
+  test('returns false for generic Error', function (assert) {
+    const error = new Error('Something went wrong');
+    assert.false(isServerError(error));
+  });
+
+  test('returns true for direct status 500 on error object', function (assert) {
+    const error = { status: 500 };
+    assert.true(isServerError(error));
+  });
+
+  test('returns false for direct status 422 on error object', function (assert) {
+    const error = { status: 422 };
+    assert.false(isServerError(error));
+  });
+});

frontend/translations/en-us.yaml

@@ -462,6 +462,12 @@ doctor:
     add_failed: Failed to add patient
     header_link: Patients
 
+server_down:
+  title: Server is not responding
+  message: "Our server is currently not responding: it may be reloading or experiencing an issue."
+  telegram_prompt: "Please let us know in our Telegram chat:"
+  fix_promise: We will try to fix the problem as soon as possible.
+
 contributors:
   title: "Our Team"
   subtitle: "We are all here to make your life easier!"

frontend/translations/ru-ru.yaml

@@ -463,6 +463,12 @@ doctor:
     add_failed: Не удалось добавить пациента
     header_link: Пациенты
 
+server_down:
+  title: Сервер не отвечает
+  message: "Наш сервер сейчас не отвечает: он перезагружается или возникла какая-то проблема."
+  telegram_prompt: "Пожалуйста, напишите об этом в наш Telegram чат:"
+  fix_promise: Мы постараемся исправить проблему как можно скорее.
+
 contributors:
   title: "Наша команда"
   subtitle: "Мы собрались все вместе, чтобы сделать вашу жизнь проще!"