module-federation / enhanced

Enhanced API for Module Federation
46 stars 2 forks source link

Middleware - on error for async load #6

Open schirrel opened 2 years ago

schirrel commented 2 years ago

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

ScriptedAlchemy commented 2 years ago

So I think we can use this. Also if you use an array of remote values. You can have one be promise new promise and if you reject the promise. Webpack tries the next remote in the array.

ScriptedAlchemy commented 2 years ago

Or we might be able to create new module factories for failures. But let me propose new code losing tools then let's see what we can do about it