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]

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.