Advice on handling dependencies and crashes

[ElielC]

Hello,

We are rolling out re.pack and slowly turning our micro apps into federated modules on our production project, one problem we often come across is handling compatibility between our MFs and our dependencies.

We have tried different approaches with shared dependencies on all deps vs only a few, all MFs having eager deps vs not eager, and even passing import as false to reduce the amount of files generated on the bundling step.

What we have found extremely complex is making sure the app does not crash when for example a user is using a MF that still has react 18 vs react 19 from the current super app version.
Or let`s say a UI library has changed the API of a button component and now only because of that our micro app and super app are now incompatible and may crash when loading.

Overall what we have found the most trouble with is stopping the app from crashing when these compatibility issues happen. It is important the ErrorBoundary catches the issue and the app does not crash.

Even with a plugin to hopefully handle errors outside the ErrorBoundary there are still crashes in the app

const FallbackComponent = await import("./src/components/FallbackComponent")

return () => ({
		__esModule: true,
		default: FallbackComponent
})

Are there better ways of handling these compatibility issues, or maybe a way to ensure the app does not crash?

[ElielC]

To add more context in the type of errors and incompatibilities we are facing, sometimes when we publish a new module and are still using the old version of the super app, we often find errors like: Undefined is not a function in whatever component we may be using, something that will not happen during development.

When we make a new build of the super app and load the micro app there, it works fine. There seems to be some issue loading the bundle that causes some values to be undefined for a "initial load" when they should never be actually undefined

There should not be any difference in the versions of dependencies between all of these releases but, there is some problem that is making releasing versions of micro app that can be used across multiple versions of the host very hard.

[ElielC]

We often first get an error like this that is caught by the ErrorBoundary:

 E  Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.
                                                                                                    
                                                                                                    This error is located at:
                                                                                                        at Lazy (<anonymous>)
                                                                                                        at Suspense (<anonymous>)
                                                                                                        at ErrorBoundary (address at index.android.bundle:1:4311679)
                                                                                                        ......

and then a crash:

 E  FATAL EXCEPTION: mqt_native_modules
                                                                                                    Process: com.test.app, PID: 10920
                                                                                                    com.facebook.react.common.JavascriptException: TypeError: undefined is not a function, js engine: hermes, stack:
                                                                                                    anonymous@1:108156
                                                                                                    anonymous@1:1739067
                                                                                                    _callTimer@1:1738038
                                                                                                    _callReactNativeMicrotasksPass@1:1738187
                                                                                                    callReactNativeMicrotasks@1:1740146
                                                                                                    __callReactNativeMicrotasks@1:1660367
                                                                                                    anonymous@1:1659487
                                                                                                    __guard@1:1660241
                                                                                                    flushedQueue@1:1659398
                                                                                                    invokeCallbackAndReturnFlushedQueue@1:1659341
                                                                                                    
                                                                                                    	at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.kt:52)
                                                                                                    	at java.lang.reflect.Method.invoke(Native Method)
                                                                                                    	at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
                                                                                                    	at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:146)
                                                                                                    	at com.facebook.jni.NativeRunnable.run(Native Method)
                                                                                                    	at android.os.Handler.handleCallback(Handler.java:995)
                                                                                                    	at android.os.Handler.dispatchMessage(Handler.java:103)
                                                                                                    	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.kt:20)
                                                                                                    	at android.os.Looper.loopOnce(Looper.java:273)
                                                                                                    	at android.os.Looper.loop(Looper.java:363)
                                                                                                    	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$Companion.startNewBackgroundThread$lambda$1(MessageQueueThreadImpl.kt:175)
                                                                                                    	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$Companion.$r8$lambda$ldnZnqelhYFctGaUKkOKYj5rxo4(Unknown Source:0)
                                                                                                    	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$Companion$$ExternalSyntheticLambda0.run(D8$$SyntheticClass:0)
                                                                                                    	at java.lang.Thread.run(Thread.java:1119)

[ElielC]

This is how our runtime plugin is set up

export default function (): FederationRuntimePlugin {
	return {
		name: "fetch-manifest-with-credentials-plugin",
		async fetch(manifestUrl, requestInit) {
			const AsyncStorage = (
				await import("@react-native-async-storage/async-storage")
			).default
			const Config = (await import("react-native-config")).default

			const manifestName = extractNameFromUrl(manifestUrl)
			const manifestVersion = extractVersionFromUrl(manifestUrl)

			try {
				const cachedVersion = await AsyncStorage.getItem(
					`${manifestName}-version`
				)
				if (cachedVersion === manifestVersion) {
					throw new Error("No need to fetch. Using cached manifest")
				}

				const policyString = ""

				const resJSON = await fetch(manifestUrl + policyString, {
					...requestInit
				})
				if (!resJSON.ok) {
					throw new Error(
						`Failed to fetch manifest from ${manifestUrl}: ${
							resJSON.status
						} ${JSON.stringify(resJSON.headers)}`
					)
				}
				monitorFunction()
				const res = await resJSON.json()
				await AsyncStorage.setItem(manifestName, JSON.stringify(res))
				await AsyncStorage.setItem(`${manifestName}-version`, manifestVersion)

				return fetch(manifestUrl + policyString, {
					...requestInit
				})
			} catch (e) {
				console.error("Error fetching manifest:", e)
				throw e
			}
		},
		async errorLoadRemote(args) {
			const ErrorBoundary = await import("./src/components/ErrorBoundary")
			const Config = (await import("react-native-config")).default

			try {
				const AsyncStorage = (
					await import("@react-native-async-storage/async-storage")
				).default

				if (args.lifecycle == "afterResolve") {
					const manifestName = extractNameFromUrl(args.id)

					const cachedManifest = await AsyncStorage.getItem(manifestName)
					return JSON.parse(cachedManifest ?? "{}")
				}

				monitorFunction()

				return () => ({
					__esModule: true,
					default: ErrorBoundary
				})
			} catch (error) {
				monitorFunction()
				return () => ({
					__esModule: true,
					default: ErrorBoundary
				})
			}
		}
	}
}

[ElielC]

When running the app on debug and we see a error related to an undefined value, but it crashes on release mode, it seems the bundle and loaded fine, but when running it, it crashes the app and the error boundary does not work

[ElielC]

Right now we are working on a more rigorous management and versioning system on our backend to ensure compatibility between host and modules.

But i`m still looking for advise into ensure the error boundary works as expected and the app never crashes because of module federation.