Event Handler microfrontend

Digital Enabler - Event Handler microfrontend

This Event Handler (EH) handles common errors returned by calls the server, they are:

• some Client error responses (400, 401, 403, 404, 409)
• all generic Server error responses (500–599)

The EH works in the background of the tool in which it is mounted. It remain listening for errors event listed above and make an event dispatch for those events that require a callback action or a user action.

NOTE: See here on how to mount a microfrontend.

This project is also available from the following CDN.

Pre-requisites

Before you continue you need to

• have NPM installed
• have NodeJS installed
• have VueJS and Vue-CLI installed
• have a GitHub account
• use VisualStudio Code or IntelliJ Idea as your development IDE

Project management

Installation

Open a Terminal window in the project folder and go inside the app folder, then launch the command:

npm install

NOTE: When install finished, do not care about the warnings on the versions and vulnerability problems reported, and DO NOT launch the npm audit fix or npm audit fix –force commands

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

NOTE: Alternatively to the command indicated above you can use the VueUI browser interface

How to trigger Event Handler

Since the EH listens for any error events with this error-xyz event name, whenever you want to alert an error in your application through you can invoke the Event-Handler with this method (or similar) from your calling application:

    setError(err, prevent, actionEv) {
      if (!err || err.response.status >= 500) {
        err = {
          response: {
            status: "500",
            statusText: "server_error",
          },
        };
      }
      document.dispatchEvent(
        new CustomEvent("error-" + err.response.status, {
          detail: {
            preventDefault: prevent | false,
            callbackEvent: actionEv,
            data: err.response,
          },
        })
      );
    },

In particular you need to have to set 3 params that should be passed to a CustomEvent inside a dispatchEvent just like the code above. The err param is the whole error object you obtain from the server invocation or something else; prevent param is a boolean true/false, if it is true tells the EH that if the event is handled its default popup Alert is not be shown as it normally would be if its value is false or not is present; the last param actionEv is the action that want be done after the event, and usually it must be a name of an addEventListener you want to activate.

NOTE: the if of the method catch all errors from 500 and upper like a generic 500 error.

The invocation of this method should be something similar:

    // If you not want to arise an Alert popup but you want to run an event *error-login-callback* that will be listened from an event listener with that name.
     ...})
        .catch((err) => {
          this.setError(err, true, "error-login-callback");
        });
    ...

    // If you not want to arise an Alert popup to inform the user of error.
    ...
    .catch((err) => {
          this.setError(err, false);
        });
    ...

For more info about CustomEvent you can click here.

Configs

To work properly the Event Handler needs an event-handler-config.json file with this settings:

{
  "mf": "Event Handler",
  "api": "https://[generic_api_location]/api"
}

This json file must to be stored and setted as described here and also here.