how to handle unavailability of modules in the host application

[jefmoraes]

I have a question related to the error handling process when consuming modules. I have an app that is consuming a module from my CDN. When the CDN is not available I want to show something on the screen as an unavailable function, I didn't find anything about handling this type of thing with repack. When trying to consume the module in this situation my app crashes and I don't know how to deal with it, could you help me by giving me an example?

When trying to access the module my application gets stuck in the application index, so I want to know how to deal with this and show the user a message on the screen for example and make the app continue working without closing.

/**
 * @format
 */

import {AppRegistry, Platform} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import {Federated, ScriptManager} from '@callstack/repack/client';

ScriptManager.shared.addResolver(async (scriptId, caller) => {
  const resolveURL = Federated.createURLResolver({
    containers: {
      RepackModule: `http://myCDN.com/[name][ext]`,
    },
  });

  const url = resolveURL(scriptId, caller);
  if (url) {
    return {
      url,
      query: {
        platform: Platform.OS,
      },
    };
  }
});
AppRegistry.registerComponent(appName, () => App);

import React from 'react';
import {Federated} from '@callstack/repack/client';
import {ActivityIndicator, StyleSheet, View} from 'react-native';

const MiniApp = React.lazy(() =>
  Federated.importModule('RepackModule', './MiniApp'),
);

const FallbackComponent = () => (
  <View style={styles.container}>
    <ActivityIndicator color="rgba(56, 30, 114, 1)" size="large" />
  </View>
);

const MiniAppScreen = () => {
  return (
    <React.Suspense fallback={<FallbackComponent />}>
      <MiniApp />
    </React.Suspense>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default MiniAppScreen;

[jefmoraes]

@jbroma ???

[jbroma]

@jefmoraes sorry for the late reply, I think what you're looking for are error boundaries. If the CDN fails then you could catch that with an error boundary and display a fallback component to handle this kind of situation gracefully.

Some resources:

1. Take a look at the PR in the super-app-showcase
2. You could also use a package like this: react-native-error-boundary

[jbroma]

this looks like something that is a good candidate for the docs

[vlack-coder]

Is it possible to reload mini app from error boundary @jbroma

[jbroma]

@vlack-coder that's a very good question! I'm not 100% sure about this, but you could call invalidateScript and try loading it again (for example by navigating back and forth so that the component gets unmounted). I would need to investigate this in more detail and include some kind of example in the docs or examples repo.

[mlakmal]

you can also include local bundle with the host app and load that bundle when remote bundle fails...

[github-actions[bot]]

This issue has been marked as stale because it has been inactive for 30 days. Please update this issue or it will be automatically closed in 14 days.

[github-actions[bot]]

This issue has been automatically closed because it has been inactive for more than 14 days. Please reopen if you want to add more context.

[vlak-koder]

Hi @jbroma , navigating back and forth so that the component gets unmounted doesn't work... It only invalidates the cache when app relaunches

[vlack-coder]

Hi @jbroma how do we invalidate the script to reload the app incase the app bundle download fails due to bad network...

Currently, the only way to go about this is to reopen the app but thid is not a good user experience. Thank you

[vlak-koder]

Hi @jbroma I would check if calling invalidateScript method will work in the ErrorBoundary. For now it doesn't work by unmounting the page