hel-micro with preFetchLib catch on 404 or other status

[MrV-777]

First want to thank for nice micro framework.

I tried to use in vue3 with hel-micro, but didn't find how to catch if remote service down or any reason page response 404 and display other warning message for other component versus display on browser alert message.

here is part of vue3 sample I used:

<template>
  <RemoteComp msg="Welcome to Your Vue.js + TypeScript + hel-micro App" />
</template>

<script lang="js">
import { preFetchLib } from 'hel-micro';
import { defineAsyncComponent } from 'vue';

export default {
  name: 'HelloWorld',
  components: {
     RemoteComp: defineAsyncComponent({
      loader: async () => {

        // component name + remote url
        const mod = await preFetchLib('hel-tpl-remote-vue3-comps-ts', {
          custom: {
            host: 'https://unpkg.com/hel-tpl-remote-vue3-comps-ts/hel_dist/'
          },
          enableDiskCache: true
        });

        //const mod = await preFetchLib("hel-tpl-remote-vue3-comps-ts");
        return mod.HelloWorld;
      },
    }),
  },
}
</script>

if url was down I want to display another inside component versus exceptions, does that preFetchLib function support catch?

Thanks

[OnlyYu1996]

https://github.com/Tencent/hel/issues/86#issue-2005852695 Here is the author's solution

[fantasticsoul]

you can read the doc of defineAsyncComponent，use errorComponent , loadingComponent to resolve your problem.

you can check this online demo

[MrV-777]

you can read the doc of defineAsyncComponent，use errorComponent , loadingComponent to resolve your problem.

you can check this online demo

Finally I found a reason why it not worked, it was totally different problem, because I tested all existed options in preFetchLib and didn't think that may break something. I used custom option called enable and set to false:

const mod = await preFetchLib('hel-tpl-remote-vue3-comps-ts', {
      custom: {
        host: uri,
        enable: false
      }
    });

and then returned back to true, then removed from code. Finally I specified incorrect host Uri to test is catch errors working and on the end appeared alert message:

and defineAsyncComponent fully stopped to work till not removed manually DB HelIndexedDB from browser cache:

That caused to stuck in simple place :) Why that JavaScript popup alert message was added to library maybe authors can answer.

Anyway thanks for help.

[fantasticsoul]

at hel-micro <=4.8.11 version lib，you can write like this to skip reusing cached app meta json.

await preFetchLib('hel-tpl-remote-vue3-comps-ts', {
      hook: {
          onFetchMetaFailed(){
              // here allow user return a prepared static meta json to let app works well.
              // but if user want to keep throwing error, just return null
               return null;
          }
      }
    });

and I also bump hel-micro to 4.8.12 to make throwing error easier. ( commit )

at hel-micro >4.8.12 version lib，you can set enableDiskCacheForErr=false to skip reusing cached app meta json.

await preFetchLib('hel-tpl-remote-vue3-comps-ts', {
      enableDiskCacheForErr: false,
    });

By the way: this alert only appeared at dev mode now, I just optimized it at this commit

[fantasticsoul]

close issue