Displaying custom errors in the modal window when using flows

[gloribus]

Summary

Now when using "Run script" in threads, if you want to inform users about an error and terminate the process (filter) throw new Error() is used

But error prints only for administrator.

            if (req.accountability?.admin === true) {
            payload = {
                errors: [
                    {
                        message: err.message,
                        { extensions: {
                            code: 'INTERNAL_SERVER_ERROR',
                            { err.extensions,
                        },
                    },
                ],
            };
            }

I propose to add an error return method from the code, so you can set your own header, text, and error code. Right now an unexpected error is displayed.

You can also add a basic "inform user" operation

Basic Example

No response

Motivation

Often there are additional checks in the threads and there is no way to report that his request has ended for such and such reason.

Detailed Design

There is already a mechanism to display a modal window on error, you need to give the possibility to display it from the flows

Requirements List

Must Have:

• Method for displaying a modal window with an error from "Run Script"
• Basic output operation with an error

Should Have:

• Ability to display not in the modal window, but in the place of validation error messages

Could Have:

Won't Have:

• A simple message "An unexpected error occurred"

Drawbacks

I don't think so, because the function is really useful for custom solutions

Alternatives

Manually change node_module every update or hope that users learn psychic skills

Adoption Strategy

I think that developers who actively use streams will appreciate this update. The standard error output and its masking for non-administrators will remain, so it doesn't break anything

Unresolved Questions

No response

[d3v1an7]

I can't get a modal to appear, even for admins. I really want to throw "something" at the user to let them know the flow failed.
@gloribus does throw new Error() still work for you? If so, can you share what I might be missing?

[gloribus]

throw new Error('test message');
v10.5.3
for admin still work

[shipsides-sparknel]

you can take it a step further and use the built in error format, that way instead of displaying the pop up it displays the error in the app page as normal. however, like the normal throw this still only works for admins.

it would be cool if this feature could work in conjunction with this default extension to allow customizable errors that fit the method of others.

if (currentQualDocs.length === 0) { 
                throw {
                    message: 'Qualifications must be uploaded',   
                    extensions: {
                        code: 'FAILED_VALIDATION',
                        field: 'Qualifications_Upload',
                        type: 'nempty'
                    }
                }
} 

[d3v1an7]

Unfortunately, neither of these examples above work for me on Directus 10.5.3, even with an admin user.
I only get the temp pop up in the bottom right saying Flow "Test" ran successfully, regardless of success or failure.

But I'm using the cloud hosted version -- am wondering if that might be why? I thought the codebase was the same...

[shipsides-sparknel]

the manual trigger is not a good one to use for this example, it doesn't return async results in the app. you can only see the error results in app in a filter flow.

edit: didn't fully read before posting lol

[jeffsmonteiro]

First, I need to say that this feature is super important for better control of flows, and mainly to improve the user experience in the app.

Second, performing tests (as ADMIN), I was able to print the modal by removing the extension parameters from throw (example below). But unfortunately, I can't edit sensitive modal issues like Title, Message Color and Button Text.

module.exports = async function(data) {
    throw {
        message: 'Your message from flow here using JS Block',
        extensions: {
            code: 'MYCODE',
        }
    }
    return {};
}

Unfortunately too, the Directus documentation also doesn't talk about using throw and its parameters. It would be a great start to improve the documentation.

It's here the CODES list from source:

export enum ErrorCode {
	ContainsNullValues = 'CONTAINS_NULL_VALUES',
	ContentTooLarge = 'CONTENT_TOO_LARGE',
	Forbidden = 'FORBIDDEN',
	IllegalAssetTransformation = 'ILLEGAL_ASSET_TRANSFORMATION',
	InvalidCredentials = 'INVALID_CREDENTIALS',
	InvalidForeignKey = 'INVALID_FOREIGN_KEY',
	InvalidIp = 'INVALID_IP',
	InvalidOtp = 'INVALID_OTP',
	InvalidPayload = 'INVALID_PAYLOAD',
	InvalidProvider = 'INVALID_PROVIDER',
	InvalidProviderConfig = 'INVALID_PROVIDER_CONFIG',
	InvalidQuery = 'INVALID_QUERY',
	InvalidToken = 'INVALID_TOKEN',
	MethodNotAllowed = 'METHOD_NOT_ALLOWED',
	NotNullViolation = 'NOT_NULL_VIOLATION',
	RangeNotSatisfiable = 'RANGE_NOT_SATISFIABLE',
	RecordNotUnique = 'RECORD_NOT_UNIQUE',
	RequestsExceeded = 'REQUESTS_EXCEEDED',
	RouteNotFound = 'ROUTE_NOT_FOUND',
	ServiceUnavailable = 'SERVICE_UNAVAILABLE',
	TokenExpired = 'TOKEN_EXPIRED',
	UnexpectedResponse = 'UNEXPECTED_RESPONSE',
	UnprocessableContent = 'UNPROCESSABLE_CONTENT',
	UnsupportedMediaType = 'UNSUPPORTED_MEDIA_TYPE',
	UserSuspended = 'USER_SUSPENDED',
	ValueOutOfRange = 'VALUE_OUT_OF_RANGE',
	ValueTooLong = 'VALUE_TOO_LONG',
}

Looking at the source code, I believe it would not be difficult to implement a palliative solution by creating a generic model to address dialog desires from the flow.

[ched-dev]

You can create custom errors with @directus/errors as of Directus 10.4

Is that what you are mentioning?

[shipsides-sparknel]

this isn't an option for directus cloud (if i tried to do it right)

[Malu44]

Can you use @directus/errors in a flow?

[DanielBiegler]

Can you use @directus/errors in a flow?

As of v10.6 the implementation of the "Run Script"-Operation changed and doesnt allow you to import any other modules.

In a custom operation you can do anything, so for those, yes.

Apart from that the createError function doesnt do much, you can just create those yourself, take a look: https://github.com/directus/directus/blob/main/packages/errors/src/create-error.ts

[rijkvanzanten]

Heya! Thanks for opening this feature request!

This feature request has received over 15 votes from the community. This means we'll move this feature request to the Under Review state!

The Core team will schedule a meeting to review this request as soon as possible. The discussion will then be approved or denied. You may or may not be invited to join this meeting with the core team.

For more information, see our Feature Request Process.

[jeffsmonteiro]

Cool!

Given the relevance of the user experience and the complexity that flows can adopt, it would be of great value to offer not only the possibility of displaying the modal, but also offering customized actions for it, which does not seem complex to me given the architecture of the flow itself. Because the modal could be a block and its response (initially with two buttons) could route to the next block.

This can be very important because some actions in the flow can be destructive or impact other data, such as statuses or values in other collections.

In this case, it should also be possible to edit the button names. Their display could continue as the default, a secondary (cancellation/refusal) and a primary (success/confirmation).

[rijkvanzanten]

Related feature request that touches on the implementation for the underlying error message: #19178

[hauzdigital]

I'm really looking forward to this feature! As we are currently unable to provide feedback to App users (not admins), and this has generated some frustration.

As already said above, providing continuous feedback to the user is a UX practice.

[floux-digital]

OMG! Any news about this? We really need this! In addition, I would love to see what @jeffsmonteiro commented on. Adding these modals to flows would be amazing and very practical!

[MarkBurvs]

Also would love an update on this. It would be amazing to be able to trigger a modal from a flow.

[robinsonjohn]

Another vote for the ability to display a modal/custom error message from a flow!