first commit

common/resources/client/errors/backend-error-response.ts

@@ -0,0 +1,12 @@
+export interface BackendErrorMessages {
+  [key: string]: string | string[];
+}
+
+export interface BackendErrorResponse<T = BackendErrorMessages> {
+  errors?: T;
+  message?: string;
+  exception?: string;
+  action?: {label: string; action: string};
+  status: number;
+  type?: string;
+}

common/resources/client/errors/ignored-sentry-errors.ts

@@ -0,0 +1,9 @@
+export const ignoredSentryErrors = [
+  'Failed to fetch dynamically imported module',
+  "Failed to execute 'removeChild' on 'Node'",
+  "Failed to execute 'insertBefore' on 'Node'",
+  'ResizeObserver loop limit exceeded',
+  'ResizeObserver loop completed with undelivered notifications',
+  'Importing a module script failed.',
+  'chrome-extension://',
+];

common/resources/client/errors/on-form-query-error.ts

@@ -0,0 +1,27 @@
+import axios from 'axios';
+import {UseFormReturn} from 'react-hook-form';
+import {BackendErrorResponse} from './backend-error-response';
+import {showHttpErrorToast} from '@common/utils/http/show-http-error-toast';
+
+export function onFormQueryError(r: unknown, form: UseFormReturn<any>) {
+  if (form && axios.isAxiosError(r) && r.response) {
+    const response = r.response.data as BackendErrorResponse;
+    if (!response.errors) {
+      showHttpErrorToast(r);
+    } else {
+      Object.entries(response.errors || {}).forEach(([key, errors], index) => {
+        if (typeof errors === 'string') {
+          form.setError(key, {message: errors}, {shouldFocus: index === 0});
+        } else {
+          errors.forEach((message, subIndex) => {
+            form.setError(
+              key,
+              {message},
+              {shouldFocus: index === 0 && subIndex === 0},
+            );
+          });
+        }
+      });
+    }
+  }
+}

common/resources/client/errors/page-error-message.tsx

@@ -0,0 +1,19 @@
+import {IllustratedMessage} from '@common/ui/images/illustrated-message';
+import {ErrorIcon} from '@common/icons/material/Error';
+import {Trans} from '@common/i18n/trans';
+
+export function PageErrorMessage() {
+  return (
+    <IllustratedMessage
+      className="mt-40"
+      image={
+        <div>
+          <ErrorIcon size="xl" />
+        </div>
+      }
+      imageHeight="h-auto"
+      title={<Trans message="There was an issue loading this page" />}
+      description={<Trans message="Please try again later" />}
+    />
+  );
+}