Skip to content

Middleware - on error for async load #6

@schirrel

Description

@schirrel

Like you've said "promise new Promise is handy, but it would be great if one could compose"

We can have async remotes with promise new Promise like:

promise new Promise((resolve) => {
    const script = document.createElement("script");
    script.src = "remote-url";
    script.onload = () => {
      const module = {
        get: (request) => window.appRemote.get(request),
        init: (arg) => {
          try {
            return window.appRemote.init(arg);
          } catch (e) {
            console.log("Problem loading appRemote", E);
          }
        },
      };
      resolve(module);
    };
    script.onerror = () => {
      const module = {
        get: () => () => {},
        init: () => () => {},
      };
      resolve(module);
    };
    document.head.appendChild(script);
  }
)

The script.onerror = () => { there ,help te application to don't throw error when tried to load the remote, with this we can have the app shell to load even when the remote is offline. Usually when returned a 404 this could be a lot of pain.

And when try to load then module itself, like `import myModule from "myRemote/myModule", it returns null, and so we can assume the remote is offline and do validations.

But all these script could be part of the middleware also, what you think?

 remotes: {
    app1: {
      async: true // this perform the whole promise promise new Promise

We can also provide a onError if the dev intent to throw an Exception or handle it any other wayt:

 remotes: {
    app1: {
      async: true // this perform the whole promise promise new Promise
      onError: () => {
        // here i can do whatever i want
        } 
     

Bellow a couple of prints with this approach working with regular development

  • Webpack config (i am using vue-cli but not a big deal)

Captura de Tela 2022-07-19 às 22 42 40

  • Using on the Component

Captura de Tela 2022-07-19 às 22 42 24

  • The browser

Captura de Tela 2022-07-19 às 22 42 49

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions