repack

repack copied to clipboard

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 - https://github.com/callstack/repack/issues/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