how to handle unavailability of micro App in the host application

[vlak-koder]

Description

Currently there's no way to reload the mini app if fetching fails due to network failure or any other type of failure

My Mini App

const TvNav = React.lazy(() =>
  Federated.importModule('Tv', './Tv'),
);

const Tv = ({ route }: any) => {

  return (
    <ErrorBoundary name="Tv">
      <React.Suspense fallback={<FallbackComponent />}>
        <TvNav params={route?.params} />
      </React.Suspense>
    </ErrorBoundary>
  );
};

export default Tv;

My Error Boundary

import { globalRed100 } from '@/style-dictionary-dist/momoStyle';
import { gpsh } from '@/utils/parseTokenStyle';
import { Box, Button, Icon, SafeAreaContainer, Text } from '@atom';
import { ScriptManager } from '@callstack/repack/client';
import { BackHeadingX } from '@molecule';
import React from 'react';
import { StyleSheet } from 'react-native';

type Props = {
  children: React.ReactNode;
  name: string;
};

type State = {
  hasError: boolean;
};

class ErrorBoundary extends React.Component<Props, State> {
  name: string;

  constructor(props: Props) {
    super(props);
    this.name = props.name;
    this.state = {hasError: false};
  }

  static getDerivedStateFromError() {
    return {hasError: true};
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <SafeAreaContainer>
          <BackHeadingX title="" noCancel />
          <Box style={styles.container}>
            <Icon size={96} color={globalRed100} name="WarningIcon" />
            <Text
              color={'red100'}
              variant={'bold18'}>{`Failed to load ${this.name}`}</Text>
            <Text color={'red100'} variant={'medium16'}>
              try again later
            </Text>
            <Button
              label="go back"
              // variant='secondary'
              bStyle={{
                marginTop: gpsh(10),
              }}
              onPress={async () => {
                try {
                  const ass = await ScriptManager.shared.invalidateScripts([
                    'Startimes',
                  ]);
                  console.log('ass', ass)
                } catch (err) {
                  console.log('err', err);
                }
              }}
            />
          </Box>
        </SafeAreaContainer>
      );
    }

    return this.props.children;
  }
}

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

export default ErrorBoundary;

In my error boundary, There's a button that calls ScriptManager.shared.invalidateScripts(['Startimes',])

onPress = async () => {
  try {
    const scriptId = await ScriptManager.shared.invalidateScripts([
      "Startimes",
    ]);
    console.log("scriptId", scriptId);
  } catch (error) {}
};

But it does not do anything....
Have tried unmounting and remounting, it's the same thing.
Currently the only way to reload the micro app is to reopen the application and it gets invalidated but if I enable caching, and I reopen the app, I'd be stuck on the Error Boundary screen. So this is the only blocker for enabling caching for me.

There's also a closed issue on this - #526

Also when I logged the ScriptId, I got values like
node_modules_babel_runtime_helpers_asyncToGenerator_js-node_modules_babel_runtime_helpers_sli-1b78c7
vendors-node_modules_react-native_Libraries_TurboModule_TurboModuleRegistry_js
also I get the scriptId for the mini app - "Startimes"

Suggested solution

No response

Additional context

No response

[vlack-coder]

Hi, this is the final step in enabling caching with Repack. If this issue persists, the user will remain stuck on the error screen as it also gets cached too

[jbroma]

Hey @vlack-coder,

this is a very valid case, I currently have no capacity to handle this but we will look into this in the future for sure. Do you care do some tinkering on your own? I'm happy to help and answer some questions along the way to unblock you if needed

[vlack-coder]

@jbroma thanks for your response. I'd also like to contribute to this discourse and more issues but can you recommend resources that'd give me more insights on RePack and Webpack in relation to module federation and react native, Thanks.

[jbroma]

For Re.Pack, we got our docs at re-pack.dev, but they might be slightly outdated in some places.

For the Module Federation stuff, there is the official docs but thats mostly for MF 2 - but it will be the only supported version from V5 forward anyways. There are also multiple articles from Zack Jackson (the creator of MF) available here.

All in all, it's always down to reading the codebase itself I'm afraid 😅

[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.

[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.