fix(frontend): improve error handling for MaterialTable

api/config/packages/sentry.yaml

@@ -14,11 +14,21 @@ services:
                     - Symfony\Component\HttpKernel\Exception\NotFoundHttpException
                     - Symfony\Component\Routing\Exception\ResourceNotFoundException
                     - Symfony\Component\Security\Core\Exception\AccessDeniedException
-                    - Symfony\Component\HttpKernel\Exception\HttpException
+                    # The following exceptions should not be reported by the API, because they are client errors (400) and should hence be reported by the client.
+                    # For the moment we keep them in, in order to track some frontend issues in Sentry.
+                    # - Symfony\Component\Serializer\Exception\ExtraAttributesException
+                    # - Symfony\Component\Serializer\Exception\UnexpectedValueException
 
 monolog:
     handlers:
         sentry:
+            type: fingers_crossed
+            action_level: error
+            handler: sentry_main
+            excluded_http_codes: [400, 401, 403, 404, 405, 422] # This exclusions only work for exceptions of type Symfony\Component\HttpKernel\Exception\HttpException
+            buffer_size: 50 # How many messages should be saved? Prevent memory leaks
+
+        sentry_main:
             type: sentry
             level: !php/const Monolog\Logger::ERROR
             hub_id: Sentry\State\HubInterface

api/src/Serializer/Normalizer/TranslationConstraintViolationListNormalizer.php

@@ -50,7 +50,10 @@ public function normalize(mixed $object, string $format = null, array $context =
 
                     $translations = $this->translateToAllLocalesService->translate(
                         $violation->getMessageTemplate(),
-                        $violation->getParameters()
+                        array_merge(
+                            $violation->getPlural() ? ['%count%' => $violation->getPlural()] : [],
+                            $violation->getParameters()
+                        )
                     );
 
                     $resultItem = [

api/tests/Api/Camps/CreateCampTest.php

@@ -752,6 +752,33 @@ public function testCreateCampReturnsProperDatesInTimezoneBehindUTC() {
         ]);
     }
 
+    public function testCreateCampValidatesTooLongNameAndIncludesTranslationInfo() {
+        static::createClientWithCredentials()->request('POST', '/camps', ['json' => $this->getExampleWritePayload([
+            'name' => 'This camp name has 33 characters!',
+        ])]);
+
+        $this->assertResponseStatusCodeSame(422);
+        $this->assertJsonContains([
+            'violations' => [
+                [
+                    'i18n' => [
+                        'key' => 'symfony.component.validator.constraints.length',
+                        'parameters' => [
+                            'value' => '"This camp name has 33 characters!"',
+                            'limit' => '32',
+                        ],
+                        'translations' => [
+                            'en' => 'This value is too long. It should have 32 characters or less.',
+                            'de' => 'Diese Zeichenkette ist zu lang. Sie sollte höchstens 32 Zeichen haben.',
+                            'fr' => 'Cette chaîne est trop longue. Elle doit avoir au maximum 32 caractères.',
+                            'it' => 'Questo valore è troppo lungo. Dovrebbe essere al massimo di 32 caratteri.',
+                        ],
+                    ],
+                ],
+            ],
+        ]);
+    }
+
     public function getExampleWritePayload($attributes = [], $except = []) {
         return $this->getExamplePayload(Camp::class, Post::class, $attributes, [], $except);
     }

frontend/.jest/environment.js

@@ -3,10 +3,10 @@ window.environment = {
   COOKIE_PREFIX: 'localhost_',
   PRINT_URL: '/print',
   SENTRY_FRONTEND_DSN: null,
-  SENTRY_ENVIRONMENT: "http://localhost:3000",
+  SENTRY_ENVIRONMENT: 'local',
   DEPLOYMENT_TIME: '',
   VERSION: '',
   VERSION_LINK_TEMPLATE: 'https://github.com/ecamp/ecamp3/commit/{version}',
   FEATURE_DEVELOPER: true,
-  LOGIN_INFO_TEXT_KEY: 'dev'
+  LOGIN_INFO_TEXT_KEY: 'dev',
 }

frontend/public/environment.dist

@@ -3,7 +3,7 @@ window.environment = {
   COOKIE_PREFIX: 'localhost_',
   PRINT_URL: '/print',
   SENTRY_FRONTEND_DSN: null,
-  SENTRY_ENVIRONMENT: "http://localhost:3000",
+  SENTRY_ENVIRONMENT: "local",
   DEPLOYMENT_TIME: '',
   VERSION: '',
   VERSION_LINK_TEMPLATE: 'https://github.com/ecamp/ecamp3/commit/{version}',

frontend/public/environment.docker.dist

@@ -3,7 +3,7 @@ window.environment = {
   COOKIE_PREFIX: 'localhost_',
   PRINT_URL: '/print',
   SENTRY_FRONTEND_DSN: null,
-  SENTRY_ENVIRONMENT: "http://localhost:3000",
+  SENTRY_ENVIRONMENT: "local",
   DEPLOYMENT_TIME: '',
   VERSION: '',
   VERSION_LINK_TEMPLATE: 'https://github.com/ecamp/ecamp3/commit/{version}',

frontend/src/components/form/ServerErrorContent.vue

@@ -1,35 +1,17 @@
 <template>
-  <div v-if="!!serverError.name || !!serverError.response">
-    <template
-      v-if="
-        serverError.name === 'ServerException' &&
-        serverError.response &&
-        serverError.response.status === 422
-      "
-    >
-      <div class="title">Validation error</div>
-      <ul>
-        <li
-          v-for="(violation, index) in serverError.response.data.violations"
-          :key="index"
-        >
-          <div>
-            <b>{{ violation.propertyPath }}</b
-            >: {{ violation.message }}
-          </div>
-        </li>
-      </ul>
-    </template>
-    <template v-else>
-      {{ serverError.message }}
-    </template>
-  </div>
-  <div v-else>
-    {{ serverError }}
+  <div>
+    <span v-if="errorList.length === 1">{{ errorList[0] }}</span>
+    <ul v-else>
+      <li v-for="(error, index) in errorList" :key="index">
+        {{ error }}
+      </li>
+    </ul>
   </div>
 </template>
 
 <script>
+import { violationsToFlatArray } from '@/helpers/serverError'
+
 export default {
   name: 'ServerErrorContent',
   props: {
@@ -38,5 +20,10 @@ export default {
       default: null,
     },
   },
+  computed: {
+    errorList() {
+      return violationsToFlatArray(this.serverError, this.$i18n)
+    },
+  },
 }
 </script>

frontend/src/components/material/DialogMaterialItemCreate.vue

@@ -45,7 +45,7 @@ export default {
     showDialog: function (showDialog) {
       if (showDialog) {
         const entityData = {
-          quantity: '',
+          quantity: null,
           unit: '',
           article: '',
           materialList: null,

frontend/src/components/material/DialogMaterialItemForm.vue

@@ -9,11 +9,13 @@
     <e-text-field
       v-model="localMaterialItem.unit"
       :name="$tc('entity.materialItem.fields.unit')"
+      maxlength="32"
     />
     <e-text-field
       v-model="localMaterialItem.article"
       :name="$tc('entity.materialItem.fields.article')"
       vee-rules="required"
+      maxlength="64"
     />
     <e-select
       v-model="localMaterialItem.materialList"

frontend/src/components/material/MaterialCreateItem.vue

@@ -11,7 +11,6 @@
         ref="quantity"
         v-model="materialItem.quantity"
         dense
-        vee-rules="numeric"
         type="number"
         :name="$tc('entity.materialItem.fields.quantity')"
         fieldname="quantity"
@@ -23,6 +22,7 @@
         dense
         :name="$tc('entity.materialItem.fields.unit')"
         fieldname="unit"
+        maxlength="32"
       />
     </td>
     <td>
@@ -32,6 +32,7 @@
         vee-rules="required"
         :name="$tc('entity.materialItem.fields.article')"
         fieldname="article"
+        maxlength="64"
       />
     </td>
     <td :colspan="columns - 4">

frontend/src/components/material/MaterialTable.vue

@@ -54,6 +54,7 @@
         dense
         :uri="item.uri"
         fieldname="unit"
+        maxlength="32"
       />
       <span v-if="item.readonly">{{ item.unit }}</span>
     </template>
@@ -65,6 +66,7 @@
         dense
         :uri="item.uri"
         fieldname="article"
+        maxlength="64"
       />
       <span v-if="item.readonly">{{ item.article }}</span>
     </template>
@@ -198,6 +200,8 @@ import ServerErrorContent from '@/components/form/ServerErrorContent.vue'
 import ButtonRetry from '@/components/buttons/ButtonRetry.vue'
 import ButtonCancel from '@/components/buttons/ButtonCancel.vue'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
+import * as Sentry from '@sentry/browser'
+import { serverErrorToString } from '@/helpers/serverError.js'
 
 export default {
   name: 'MaterialTable',
@@ -375,7 +379,7 @@ export default {
     // retry to save to API (after server error)
     retry(item) {
       // reset error
-      this.$set(this.newMaterialItems[item.id], 'serverError', null)
+      this.$set(this.newMaterialItems[item.id], 'serverError', undefined)
 
       // try to save same data again
       this.postToApi(item.id, this.newMaterialItems[item.id])
@@ -399,6 +403,8 @@ export default {
         // catch server error
         .catch((error) => {
           this.$set(this.newMaterialItems[key], 'serverError', error)
+          this.$toast.error(errorToMultiLineToast(error))
+          Sentry.captureMessage(serverErrorToString(error))
         })
     },
 

frontend/src/components/toast/toasts.js

@@ -1,6 +1,6 @@
 import MultiLineToast from '@/components/toast/MultiLineToast.vue'
 import i18n from '@/plugins/i18n'
-import { transformViolations } from '@/helpers/serverError'
+import { violationsToFlatArray } from '@/helpers/serverError'
 
 function multiLineToast(lines) {
   return {
@@ -12,32 +12,8 @@ function multiLineToast(lines) {
   }
 }
 
-function violationsToFlatArray(e) {
-  const violationsObject = transformViolations(e, i18n)
-  const violations = Object.entries(violationsObject)
-  if (violations.length === 0) {
-    return []
-  }
-  if (violations.length === 1 && violationsObject[0]) {
-    return [violationsObject[0]]
-  }
-  const toArray = (element) => {
-    if (Array.isArray(element)) {
-      return element
-    }
-    return [element]
-  }
-  const result = []
-  for (const [key, value] of Object.entries(violationsObject)) {
-    for (const message of toArray(value)) {
-      result.push(`${key}: ${message}`)
-    }
-  }
-  return result
-}
-
 function errorToMultiLineToast(error) {
-  return multiLineToast(violationsToFlatArray(error))
+  return multiLineToast(violationsToFlatArray(error, i18n))
 }
 
-export { errorToMultiLineToast, multiLineToast, violationsToFlatArray }
+export { errorToMultiLineToast, multiLineToast }

frontend/src/helpers/serverError.js

@@ -66,4 +66,28 @@ const transformViolations = (error, i18n = null) => {
   return serverErrorMessages
 }
 
-export { serverErrorToString, transformViolations }
+function violationsToFlatArray(e, i18n) {
+  const violationsObject = transformViolations(e, i18n)
+  const violations = Object.entries(violationsObject)
+  if (violations.length === 0) {
+    return []
+  }
+  if (violations.length === 1 && violationsObject[0]) {
+    return [violationsObject[0]]
+  }
+  const toArray = (element) => {
+    if (Array.isArray(element)) {
+      return element
+    }
+    return [element]
+  }
+  const result = []
+  for (const [key, value] of Object.entries(violationsObject)) {
+    for (const message of toArray(value)) {
+      result.push(`${key}: ${message}`)
+    }
+  }
+  return result
+}
+
+export { serverErrorToString, transformViolations, violationsToFlatArray }

frontend/src/main.js

@@ -22,7 +22,7 @@ import { Resize } from 'vuetify/lib/directives'
 import ResizeObserver from 'v-resize-observer'
 
 if (window.environment && window.environment.SENTRY_FRONTEND_DSN) {
-  const environment = window.environment.SENTRY_ENVIRONMENT ?? 'http://localhost:3000'
+  const environment = window.environment.SENTRY_ENVIRONMENT ?? 'local'
   Sentry.init({
     Vue,
     dsn: window.environment.SENTRY_FRONTEND_DSN,

print/nuxt.config.js

@@ -100,7 +100,7 @@ export default {
     dsn: process.env.SENTRY_PRINT_DSN || '',
     disabled: process.env.NODE_ENV === 'development',
     config: {
-      environment: process.env.SENTRY_ENVIRONMENT ?? 'http://localhost:3000',
+      environment: process.env.SENTRY_ENVIRONMENT ?? 'local',
     },
   },
 

print/print.env

@@ -1,7 +1,7 @@
 INTERNAL_API_ROOT_URL=http://caddy:3000/api
 FRONTEND_URL=http://localhost:3000
 SENTRY_PRINT_DSN=
-SENTRY_ENVIRONMENT=http://localhost:3000
+SENTRY_ENVIRONMENT=local
 BROWSER_WS_ENDPOINT=ws://browserless:3000
 PRINT_URL=http://print:3003
 COOKIE_PREFIX=localhost_