FEATURE: Use custom transformer for flow exceptions

Classes/GraphQL/Resolver/Type/MutationResolver.php

@@ -23,6 +23,7 @@
 use Flowpack\Media\Ui\GraphQL\Context\AssetSourceContext;
 use Flowpack\Media\Ui\Service\AssetCollectionService;
 use Neos\Flow\Annotations as Flow;
+use Neos\Flow\I18n\Translator;
 use Neos\Flow\Persistence\Exception\IllegalObjectTypeException;
 use Neos\Flow\Persistence\Exception\InvalidQueryException;
 use Neos\Flow\Persistence\PersistenceManagerInterface;
@@ -113,6 +114,23 @@ class MutationResolver implements ResolverInterface
      */
     protected $assetCollectionService;
 
+    /**
+     * @Flow\Inject
+     * @var Translator
+     */
+    protected $translator;
+
+    protected function localizedMessage(string $id, string $fallback = '', array $arguments = []): string
+    {
+        return $this->translator->translateById($id, [], null, null, 'Main', 'Flowpack.Media.Ui') ?? $fallback;
+    }
+
+    protected function localizedMessageFromException(\Exception $exception): string
+    {
+        $labelIdentifier = 'errors.' . $exception->getCode() . '.message';
+        return $this->localizedMessage($labelIdentifier, $exception->getMessage());
+    }
+
     /**
      * @throws Exception
      */
@@ -125,23 +143,45 @@ public function deleteAsset($_, array $variables, AssetSourceContext $assetSourc
 
         $assetProxy = $assetSourceContext->getAssetProxy($id, $assetSourceId);
         if (!$assetProxy) {
-            return new MutationResult(false, ['Asset could not be resolved']);
+            return new MutationResult(
+                false,
+                [$this->localizedMessage(
+                    'actions.deleteAssets.noProxy',
+                    'Asset could not be resolved')
+                ]
+            );
         }
         $asset = $assetSourceContext->getAssetForProxy($assetProxy);
 
         if (!$asset) {
-            return new MutationResult(false, ['Cannot delete asset that was never imported']);
+            return new MutationResult(
+                false,
+                [
+                    $this->localizedMessage(
+                        'actions.deleteAssets.noImportExists',
+                        'Cannot delete asset that was never imported'
+                    )
+                ]
+            );
         }
 
         try {
             $this->assetRepository->remove($asset);
         } catch (AssetServiceException $e) {
-            return new MutationResult(false, [$e->getMessage()]);
+            return new MutationResult(false, [$this->localizedMessageFromException($e)]);
         } catch (\Exception $e) {
             throw new Exception('Failed to delete asset', 1591537315);
         }
 
-        return new MutationResult(true, ['Asset deleted']);
+        return new MutationResult(
+            true,
+            [
+                $this->localizedMessage(
+                    'actions.deleteAssets.success',
+                    'Asset deleted'
+                )
+            ]
+        );
     }
 
     /**

Classes/Transform/FlowErrorTransform.php

@@ -0,0 +1,49 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Flowpack\Media\Ui\Transform;
+
+use GraphQL\Error\Error;
+use GraphQL\Executor\ExecutionResult;
+use GraphQLTools\Transforms\Transform;
+use Neos\Flow\Annotations as Flow;
+use Neos\Flow\Log\ThrowableStorageInterface;
+
+/**
+ * This transform is used to convert exceptions to errors in the GraphQL response.
+ * To be able to localize error messages we extend the FlowErrorTransform from the t3n.GraphQL package.
+ */
+class FlowErrorTransform extends \t3n\GraphQL\Transform\FlowErrorTransform
+{
+    public function transformResult(ExecutionResult $result): ExecutionResult
+    {
+        $result->errors = array_map(function (Error $error) {
+            $previousError = $error->getPrevious();
+            if (!$previousError instanceof Error) {
+                $message = $this->throwableStorage->logThrowable($previousError);
+
+                if (!$this->includeExceptionMessageInOutput) {
+                    $message = preg_replace('/.* - See also: (.+)\.txt$/s', 'Internal error ($1)', $message);
+                }
+
+                $errorExtendedInformation = $error->getExtensions();
+                $errorExtendedInformation['errorCode'] = $previousError->getCode();
+
+                return new Error(
+                    $message,
+                    $error->getNodes(),
+                    $error->getSource(),
+                    $error->getPositions(),
+                    $error->getPath(),
+                    $previousError,
+                    $errorExtendedInformation
+                );
+            }
+
+            return $error;
+        }, $result->errors);
+
+        return $result;
+    }
+}

Configuration/Settings.GraphQL.yaml

@@ -4,6 +4,7 @@ t3n:
       'media-assets':
         logRequests: false
         context: 'Flowpack\Media\Ui\GraphQL\Context\AssetSourceContext'
+        errorTransform: 'Flowpack\Media\Ui\Transform\FlowErrorTransform'
         schemas:
           root:
             typeDefs: 'resource://Flowpack.Media.Ui/Private/GraphQL/schema.root.graphql'

Resources/Private/JavaScript/asset-collections/src/components/CreateAssetCollectionDialog.tsx

@@ -31,11 +31,8 @@ const CreateAssetCollectionDialog = () => {
             .then(() => {
                 Notify.ok(translate('assetCollectionActions.create.success', 'Asset collection was created'));
             })
-            .catch((error) => {
-                Notify.error(
-                    translate('assetCollectionActions.create.error', 'Failed to create asset collection'),
-                    error.message
-                );
+            .catch(() => {
+                return;
             });
     }, [setDialogVisible, createAssetCollection, title, selectedAssetCollection?.id, Notify, translate]);
 

Resources/Private/JavaScript/asset-collections/src/components/DeleteButton.tsx

@@ -49,11 +49,8 @@ const DeleteButton: React.FC = () => {
                     );
                     setSelectedAssetCollectionAndTag({ tagId: null, assetCollectionId: null });
                 })
-                .catch((error) => {
-                    Notify.error(
-                        translate('assetCollectionActions.delete.error', 'Failed to delete asset collection'),
-                        error.message
-                    );
+                .catch(() => {
+                    return;
                 });
         }
     }, [

Resources/Private/JavaScript/asset-tags/src/components/CreateTagDialog.tsx

@@ -28,8 +28,8 @@ const CreateTagDialog: React.FC = () => {
             .then(() => {
                 Notify.ok(translate('tagActions.create.success', 'Tag was created'));
             })
-            .catch((error) => {
-                Notify.error(translate('tagActions.create.error', 'Failed to create tag'), error.message);
+            .catch(() => {
+                return;
             });
     }, [Notify, setDialogState, createTag, dialogState, translate, selectedAssetCollection]);
     const setLabel = useCallback((label) => setDialogState((state) => ({ ...state, label })), [setDialogState]);

Resources/Private/JavaScript/asset-upload/src/components/Dialogs/NewAssetDialog.tsx

@@ -55,8 +55,8 @@ const NewAssetDialog: React.FC = () => {
                     void refetch();
                 }
             })
-            .catch((error) => {
-                Notify.error(translate('fileUpload.error', 'Upload failed'), error);
+            .catch(() => {
+                return;
             });
     }, [uploadFiles, dialogState.files.selected, setFiles, Notify, translate, refetch]);
 

Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx

@@ -29,8 +29,8 @@ const AssetActions: React.FC<ItemActionsProps> = ({ asset }: ItemActionsProps) =
             .then(() => {
                 Notify.ok(translate('assetActions.import.success', 'Asset was successfully imported'));
             })
-            .catch((error) => {
-                Notify.error(translate('assetActions.import.error', 'Failed to import asset'), error.message);
+            .catch(() => {
+                return;
             });
     }, [importAsset, asset, Notify, translate]);
 

Resources/Private/JavaScript/media-module/src/core/CreateErrorHandler.ts

@@ -1,20 +1,27 @@
 import { onError } from '@apollo/client/link/error';
 
 const createErrorHandler = (notify: NeosNotification) => {
+    const translate = (id, value = null, args = {}, packageKey = 'Flowpack.Media.Ui', source = 'Main') => {
+        return window.NeosCMS.I18n.translate(id, value, packageKey, source, args);
+    };
+
     return onError(({ graphQLErrors, networkError }) => {
         if (graphQLErrors) {
             graphQLErrors.map((data) => {
-                const isInternalError = data.extensions.code === 'INTERNAL_SERVER_ERROR';
-
-                console.error(
-                    data.extensions.code === isInternalError ? '[Internal server error]' : '[GraphQL error]',
-                    data.path,
-                    data
-                );
+                const isInternalError = data.extensions.category === 'internal';
+                const defaultErrorTitle = isInternalError
+                    ? translate('errors.internal.title', 'Internal server error')
+                    : translate('errors.graphql.title', 'Communication error');
+                let errorMessageLabel = '';
+                let errorTitleLabel = '';
+                if (data.extensions.errorCode) {
+                    errorTitleLabel = `errors.${data.extensions.errorCode}.title`;
+                    errorMessageLabel = `errors.${data.extensions.errorCode}.message`;
+                }
 
                 notify.error(
-                    data.extensions.code === isInternalError ? 'Internal server error' : 'Communication error',
-                    data.message
+                    translate(errorTitleLabel, defaultErrorTitle),
+                    errorMessageLabel.length ? translate(errorMessageLabel) : data.message
                 );
             });
         }