@tramvai/module-child-app 2.61.2 → 2.63.0

package/README.md

@@ -32,6 +32,34 @@ createApp({
 - `RequestDI` - DI-Container which is created for every request and represents specific data for single client. RequestDI inherits providers from SingletonDI and it is independent from other RequestDIs
 - `CommandLineRunner` - instance of [CommandModule](references/modules/common.md#commandmodule)
 
+### Workflow
+
+This section will explain how the child-app are loaded and executed.
+
+#### Both SSR + Client hydration
+
+1. Provider `CHILD_APP_RESOLUTION_CONFIG_MANAGER_TOKEN` will assemble all of the configs for child-apps that were provided through token `CHILD_APP_RESOLUTION_CONFIGS_TOKEN` and resolve the configs on `resolvePageDeps` command line
+2. Provider `CHILD_APP_RESOLVE_CONFIG_TOKEN` is used to generate config that are later consumable by child-app loader
+3. Child-apps that will be rendered on the page should be preloaded with `CHILD_APP_PRELOAD_MANAGER_TOKEN` - see [preload child-app](#preload-child-app)
+
+#### SSR
+
+1. For every child-app that was preloaded server loads its code and executes all of the initialization - see [loading child-app](#loading-child-app)
+2. Any child-app that were preloaded during request are added as script tag to client code to the output html
+3. During render for child-apps their render code is executed to provide proper HTML
+4. State is dehydrated for child-app the same time as root-app's state
+
+#### Client hydration
+
+1. For every child-app that was preloaded on server tramvai executes all of the initialization - see [loading child-app](#loading-child-app). In other cases initialization happens during first usage
+2. If child-app was preloaded on server than client code should be loaded on page loaded. Otherwise tramvai will try to load client code on preload call on client side or during attempt to render child-app
+3. During page render react will attempt to rehydrate render for child-apps that came from server. In case of errors it will rerender it from scratch
+
+#### SPA navigations
+
+1. During loading for next route child-app might be preloaded - it will be initialized during loading in that case otherwise child-app will be loaded as soon as it will be used.
+2. While loading child-app it will render null. After loading child-app's render function will be used
+
 ### DI
 
 Every child-app has its own DI-hierarchy which is isolated from other child app and partially from root-app. The only way communicate fpr DIs it's getting providers from root-app di inside child-app.
@@ -136,8 +164,70 @@ This token is considered undesirable to use as it leads to high coupling with st
 
 :::
 
+### Error handling
+
+#### Error while loading child-app configs
+
+Child-app configs might be loaded with providers for multi token `CHILD_APP_RESOLUTION_CONFIGS_TOKEN` that are implemented in custom modules or in the app code.
+
+Error that were raised in custom providers will be logged as errors under `child-app:resolution-config` key. After that there errors will be ignored and won't affect other resolutions, but the configs that could be loaded with that provider will be lost.
+
+#### Child-app with specified name was not found
+
+There is 2 causes that may lead to missing child-app in config:
+
+- configs defined through `CHILD_APP_RESOLUTION_CONFIGS_TOKEN` was failed and therefore there is no info about used child-app
+- wrong naming of child-app
+
+In any of that causes the error about missing child-app will be logged and the render for it will just return null.
+
+If you are facing that problem first check the logs about errors for loading child-app configs than check that naming is right and such child-app exists in your configs.
+
+#### Failed to load child-app code
+
+Request to child-app code can fail by various causes.
+
+If request has failed on server side the script tag with link to child-app client code will still be added to the html in order to try to load the child-app on client side. It will render fallback if provided or null on SSR (wrapped in Suspense for react@18) in that case and will try to resolve and render the child-app on the client.
+
+If request has failed on client side it will render [fallback](#fallback) passing error or the default errorBoundary component.
+
+#### Error during child-app render
+
+Errors that happens inside child-app's render function
+
+If render has failed on server side it will render fallback if provided or null otherwise. It may then proper rehydrated on client side.
+
+If render has failed on client side it will render fallback with error if provided or default errorBoundary component
+
+#### Error in commandLine handler
+
+Any errors inside child-app commandLine execution will be logged and won't affect the execution of the root-app.
+
 ## API
 
+### ChildApp
+
+React component to render child-app with specified config in the react tree
+
+```ts
+import React from 'react';
+import { ChildApp } from '@tramvai/module-child-app';
+
+export const Page = () => {
+  return (
+    <div>
+      ...
+      <ChildApp name="[name]" />
+      ...
+    </div>
+  );
+};
+```
+
+#### fallback
+
+React.ComponentType that will be rendered while child-app is loading (by default is null) or there was an error inside child-app (by default is a standard errorBoundary component)
+
 ### CHILD_APP_INTERNAL_ROOT_STATE_ALLOWED_STORE_TOKEN
 
 Defines the list of allowed root-app store names that might be used inside child-app.
@@ -269,7 +359,14 @@ const PageCmp: PageComponent = () => {
 PageCmp.childApps = [{ name: '[name]' }];
 ```
 
-### Debug child-app
+### Debug child-app problems
+
+If your are facing any problems while developing or using child-app use next instructions first.
+
+1. Check the logs with key `child-app` that may lead to source of problems
+2. If there is not enough logs enable all `child-app` logs - [how to display logs](references/modules/log.md#display-logs)
+
+### Run debug version of child-app
 
 #### Single child-app
 
@@ -328,13 +425,11 @@ You may specify a full config to debug to a specific child-app:
 
 ### This Suspense boundary received an update before it finished hydrating
 
-When `React` >= `18` version is used, child-app will be wrapped in `Suspense` boundary for [Selective Hydration](https://github.com/reactwg/react-18/discussions/130).
-This optimization can significantly decrease Total Blocking Time metric of the page.
+When `React` >= `18` version is used, child-app will be wrapped in `Suspense` boundary for [Selective Hydration](https://github.com/reactwg/react-18/discussions/130). This optimization can significantly decrease Total Blocking Time metric of the page.
 
-There is one drawback of this optimization - if you will try rerender child-app during selective hydration, `React` will switch to deopt mode and made full client-rendering of the child-app component.
-Potential ways to fix this problem [described here](https://github.com/facebook/react/issues/24476#issuecomment-1127800350).
-`ChildApp` component already wrapped in `React.memo`.
+There is one drawback of this optimization - if you will try rerender child-app during selective hydration, `React` will switch to deopt mode and made full client-rendering of the child-app component. Potential ways to fix this problem [described here](https://github.com/facebook/react/issues/24476#issuecomment-1127800350). `ChildApp` component already wrapped in `React.memo`.
 
 Few advices to avoid this problem:
+
 - Memoize object, passed to child-app `props` property
-- Prevent pass to child-app properties, which can be changed during hydration, for example at cliend-side in page actions
+- Prevent pass to child-app properties, which can be changed during hydration, for example at client-side in page actions

package/lib/browser/preload.d.ts

@@ -11,6 +11,7 @@ export declare class PreloadManager implements ChildAppPreloadManager {
     private currentlyPreloaded;
     private hasPreloadBefore;
     private hasInitialized;
+    private map;
     constructor({ loader, runner, resolutionConfigManager, resolveExternalConfig, store, }: {
         loader: ChildAppLoader;
         runner: ChildAppCommandLineRunner;

package/lib/browser/render.d.ts

@@ -12,7 +12,6 @@ export declare class RenderManager implements ChildAppRenderManager {
         diManager: ChildAppDiManager;
         resolveExternalConfig: typeof CHILD_APP_RESOLVE_CONFIG_TOKEN;
     });
-    getChildDi(request: ChildAppRequestConfig): [Container | null, null | Promise<Container | null>];
-    flush(): Promise<boolean>;
+    getChildDi(request: ChildAppRequestConfig): [Container | undefined, undefined | Promise<Container | undefined>];
     clear(): void;
 }

package/lib/server/render.d.ts

@@ -7,14 +7,12 @@ export declare class RenderManager implements ChildAppRenderManager {
     private readonly resolveFullConfig;
     private readonly log;
     private readonly hasRenderedSet;
-    private readonly loadingInProgress;
     constructor({ logger, preloadManager, diManager, resolveFullConfig, }: {
         logger: typeof LOGGER_TOKEN;
         preloadManager: ChildAppPreloadManager;
         diManager: ChildAppDiManager;
         resolveFullConfig: typeof CHILD_APP_RESOLVE_CONFIG_TOKEN;
     });
-    getChildDi(request: ChildAppRequestConfig): [Container | null, null | Promise<Container | null>];
-    flush(): Promise<boolean>;
+    getChildDi(request: ChildAppRequestConfig): [Container | undefined, undefined | Promise<Container | undefined>];
     clear(): void;
 }

package/lib/server.browser.js

@@ -6,22 +6,23 @@ export * from '@tramvai/tokens-child-app';
 import { CONTEXT_TOKEN, ACTION_PAGE_RUNNER_TOKEN, LOGGER_TOKEN, DISPATCHER_TOKEN, STORE_TOKEN, DISPATCHER_CONTEXT_TOKEN, STORE_MIDDLEWARE, INITIAL_APP_STATE_TOKEN, COMBINE_REDUCERS, ENV_MANAGER_TOKEN, REGISTER_CLEAR_CACHE_TOKEN, CLEAR_CACHE_TOKEN, ENV_USED_TOKEN } from '@tramvai/tokens-common';
 import { RENDER_SLOTS, EXTEND_RENDER } from '@tramvai/tokens-render';
 import { ROUTER_SPA_ACTIONS_RUN_MODE_TOKEN, PAGE_SERVICE_TOKEN, ROUTER_TOKEN } from '@tramvai/tokens-router';
-import { resolveLazyComponent, useDi } from '@tramvai/react';
+import { resolveLazyComponent, UniversalErrorBoundary, useDi } from '@tramvai/react';
 import flatten from '@tinkoff/utils/array/flatten';
 import noop from '@tinkoff/utils/function/noop';
 import { Subscription, ChildDispatcherContext, createEvent, createReducer } from '@tramvai/state';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, memo, useContext, useMemo, useState, useEffect, createElement, Suspense } from 'react';
+import { createContext, memo, Suspense, useContext, useMemo, useState, useEffect } from 'react';
 import applyOrReturn from '@tinkoff/utils/function/applyOrReturn';
 import { loadModule } from '@tinkoff/module-loader-client';
+import { useUrl } from '@tramvai/module-router';
 
 const getChildProviders$2 = (appDi) => {
     const context = appDi.get(CONTEXT_TOKEN);
     return [
-        {
+        provide({
             provide: commandLineListTokens.customerStart,
             multi: true,
-            useFactory: ({ subscriptions, }) => {
+            useFactory: ({ subscriptions }) => {
                 return async function resolveRootStateForChild() {
                     if (!subscriptions) {
                         return;
@@ -40,7 +41,7 @@ const getChildProviders$2 = (appDi) => {
             deps: {
                 subscriptions: { token: CHILD_APP_INTERNAL_ROOT_STATE_SUBSCRIPTION_TOKEN, optional: true },
             },
-        },
+        }),
         provide({
             provide: commandLineListTokens.clear,
             multi: true,
@@ -154,7 +155,6 @@ class SingletonDiManager {
                 error,
                 config,
             });
-            return null;
         }
     }
     forEachChildDi(cb) {
@@ -223,7 +223,7 @@ const getChildProviders = (appDi) => {
                     dispatcher,
                     // context will be set later by the CONTEXT_TOKEN
                     context: {},
-                    initialState,
+                    initialState: initialState !== null && initialState !== void 0 ? initialState : { stores: [] },
                     middlewares: flatten(middlewares || []),
                     parentDispatcherContext,
                     parentAllowedStores: flatten(parentAllowedStores || []),
@@ -284,7 +284,7 @@ class DiManager {
 
 class CommandLineRunner {
     constructor({ logger, rootCommandLineRunner, diManager, }) {
-        this.log = logger('child-app:commandlinerunner');
+        this.log = logger('child-app:command-line-runner');
         this.rootCommandLineRunner = rootCommandLineRunner;
         this.diManager = diManager;
     }
@@ -384,10 +384,11 @@ const getModuleFederation = async (container, name = 'entry') => {
 };
 
 class ChildAppResolutionConfigManager {
-    constructor({ configs, }) {
+    constructor({ configs, logger, }) {
         this.hasInitialized = false;
         this.rawConfigs = configs !== null && configs !== void 0 ? configs : [];
         this.mapping = new Map();
+        this.log = logger('child-app:resolution-config');
     }
     async init() {
         if (this.hasInitialized) {
@@ -398,10 +399,18 @@ class ChildAppResolutionConfigManager {
         }
         this.initPromise = (async () => {
             const configs = await Promise.all(this.rawConfigs.map((rawConfig) => {
-                return applyOrReturn([], rawConfig);
+                return Promise.resolve()
+                    .then(() => {
+                    return applyOrReturn([], rawConfig);
+                })
+                    .catch((error) => {
+                    this.log.error(error, 'Failed while resolving resolution config');
+                });
             }));
             flatten(configs).forEach((config) => {
-                this.mapping.set(config.name, config);
+                if (config) {
+                    this.mapping.set(config.name, config);
+                }
             });
             this.hasInitialized = true;
         })();
@@ -411,7 +420,7 @@ class ChildAppResolutionConfigManager {
         var _a;
         const fromMapping = this.mapping.get(name);
         if (!fromMapping) {
-            return null;
+            return;
         }
         const cfg = fromMapping.byTag[tag];
         if (process.env.NODE_ENV === 'development' && tag === 'debug' && !cfg) {
@@ -444,6 +453,7 @@ const sharedProviders = [
         useClass: ChildAppResolutionConfigManager,
         deps: {
             configs: { token: CHILD_APP_RESOLUTION_CONFIGS_TOKEN, optional: true },
+            logger: LOGGER_TOKEN,
         },
     }),
     provide({
@@ -460,8 +470,9 @@ const sharedProviders = [
     }),
     provide({
         provide: CHILD_APP_RESOLVE_CONFIG_TOKEN,
-        useFactory: ({ envManager, rootBaseUrl, resolutionConfigManager }) => {
+        useFactory: ({ envManager, logger, rootBaseUrl, resolutionConfigManager }) => {
             const rawEnv = envManager.get('CHILD_APP_DEBUG');
+            const log = logger('child-app:resolve-config');
             const debug = new Map();
             rawEnv === null || rawEnv === void 0 ? void 0 : rawEnv.split(';').reduce((acc, entry) => {
                 const [name, url] = entry.split('=');
@@ -473,7 +484,8 @@ const sharedProviders = [
                 const req = { name, tag, version: request.version };
                 const config = resolutionConfigManager.resolve(req);
                 if (!config) {
-                    throw new Error(`Child-app "${name}" with tag "${tag}" has not found`);
+                    log.error(`Child-app "${name}" with tag "${tag}" has not found`);
+                    return;
                 }
                 const { version, baseUrl: configBaseUrl, client, server, css, withoutCss } = config;
                 const baseUrl = (_b = (_a = debug.get(name)) !== null && _a !== void 0 ? _a : configBaseUrl) !== null && _b !== void 0 ? _b : rootBaseUrl;
@@ -505,6 +517,7 @@ const sharedProviders = [
         },
         deps: {
             envManager: ENV_MANAGER_TOKEN,
+            logger: LOGGER_TOKEN,
             rootBaseUrl: CHILD_APP_RESOLVE_BASE_URL_TOKEN,
             resolutionConfigManager: CHILD_APP_RESOLUTION_CONFIG_MANAGER_TOKEN,
         },
@@ -711,6 +724,7 @@ class PreloadManager {
         this.currentlyPreloaded = new Map();
         this.hasPreloadBefore = new Set();
         this.hasInitialized = false;
+        this.map = new Map();
         this.loader = loader;
         this.runner = runner;
         this.store = store;
@@ -720,29 +734,39 @@ class PreloadManager {
     async preload(request) {
         await this.init();
         const config = this.resolveExternalConfig(request);
+        if (!config) {
+            return;
+        }
         const { key } = config;
+        if (this.pageHasRendered) {
+            this.currentlyPreloaded.set(key, config);
+        }
         if (!this.isPreloaded(config)) {
+            if (this.map.has(key)) {
+                return this.map.get(key);
+            }
+            // TODO: remove after dropping support for react@<18 as it can handle hydration errors with Suspense
             // in case React render yet has not been executed do not load any external child-app app as
             // as it will lead to markup mismatch on markup hydration
             if (this.pageHasRendered) {
                 // but in case render has happened load child-app as soon as possible
-                try {
-                    await this.loader.load(config);
-                    await this.run('customer', config);
-                    await this.run('clear', config);
+                const promise = (async () => {
+                    try {
+                        await this.loader.load(config);
+                        await this.run('customer', config);
+                        await this.run('clear', config);
+                    }
+                    catch (error) { }
                     this.hasPreloadBefore.add(key);
-                }
-                catch (error) { }
+                })();
+                this.map.set(key, promise);
+                return promise;
             }
         }
-        if (this.pageHasRendered) {
-            this.currentlyPreloaded.set(key, config);
-        }
     }
     isPreloaded(request) {
         const config = this.resolveExternalConfig(request);
-        const { key } = config;
-        return this.hasPreloadBefore.has(key);
+        return !!config && this.hasPreloadBefore.has(config.key);
     }
     async runPreloaded() {
         await this.init();
@@ -764,6 +788,7 @@ class PreloadManager {
     async clearPreloaded() {
         if (this.pageHasLoaded) {
             this.currentlyPreloaded.clear();
+            this.map.clear();
             return;
         }
         this.pageHasLoaded = true;
@@ -772,6 +797,7 @@ class PreloadManager {
             promises.push(this.run('clear', config));
         });
         this.currentlyPreloaded.clear();
+        this.map.clear();
         await Promise.all(promises);
     }
     getPreloadedList() {
@@ -782,8 +808,10 @@ class PreloadManager {
             const { preloaded } = this.store.getState(ChildAppStore);
             preloaded.forEach((request) => {
                 const config = this.resolveExternalConfig(request);
-                this.currentlyPreloaded.set(config.key, config);
-                this.hasPreloadBefore.add(config.key);
+                if (config) {
+                    this.currentlyPreloaded.set(config.key, config);
+                    this.hasPreloadBefore.add(config.key);
+                }
             });
             this.hasInitialized = true;
         }
@@ -810,8 +838,11 @@ class RenderManager {
     }
     getChildDi(request) {
         const config = this.resolveExternalConfig(request);
+        if (!config) {
+            throw new Error(`Child app "${request.name}" not found`);
+        }
         if (this.preloadManager.isPreloaded(request)) {
-            return [this.diManager.getChildDi(config), null];
+            return [this.diManager.getChildDi(config), undefined];
         }
         this.log.warn({
             message: 'Child-app has been used but not preloaded before React render',
@@ -820,10 +851,7 @@ class RenderManager {
         const promiseDi = this.preloadManager.preload(request).then(() => {
             return this.diManager.getChildDi(config);
         });
-        return [null, promiseDi];
-    }
-    async flush() {
-        return false;
+        return [undefined, promiseDi];
     }
     clear() { }
 }
@@ -938,7 +966,9 @@ const browserProviders = [
     }),
 ];
 
-const FailedChildAppFallback = ({ name, version, tag, logger, fallback: Fallback, }) => {
+const FailedChildAppFallback = ({ name, version, tag, fallback: Fallback, }) => {
+    const logger = useDi(LOGGER_TOKEN);
+    const log = logger('child-app:render');
     // On client-side hydration errors will be handled in `hydrateRoot` `onRecoverableError` property,
     // and update errors will be handled in Error Boundaries.
     //
@@ -948,7 +978,7 @@ const FailedChildAppFallback = ({ name, version, tag, logger, fallback: Fallback
     // On server-side, we still use `renderToString`,
     // and need to manually log render errors for components, wrapped in Suspense Boundaries.
     if (typeof window === 'undefined') {
-        logger.error({
+        log.error({
             event: 'failed-render',
             message: 'child-app failed to render, will try to recover during hydration',
             name,
@@ -958,21 +988,29 @@ const FailedChildAppFallback = ({ name, version, tag, logger, fallback: Fallback
     }
     return Fallback ? jsx(Fallback, {}) : null;
 };
-const ChildApp = memo(({ name, version, tag, props, fallback }) => {
+const ChildAppWrapper = ({ name, version, tag, props, fallback: Fallback, }) => {
     const renderManager = useContext(RenderContext);
-    const resolveExternalConfig = useDi(CHILD_APP_RESOLVE_CONFIG_TOKEN);
     const logger = useDi(LOGGER_TOKEN);
     const log = logger('child-app:render');
-    const [maybeDi, promiseDi] = useMemo(() => {
-        return renderManager.getChildDi(resolveExternalConfig({ name, version, tag }));
-    }, [name, version, tag, renderManager, resolveExternalConfig]);
+    const [maybeDi, maybePromiseDi] = useMemo(() => {
+        return renderManager.getChildDi({ name, version, tag });
+    }, [name, version, tag, renderManager]);
     const [di, setDi] = useState(maybeDi);
+    const [promiseDi, setPromiseDi] = useState(maybePromiseDi);
     useEffect(() => {
         if (!di && promiseDi) {
             // any errors with loading child-app should be handled in some other place
-            promiseDi.then(setDi).catch(noop);
+            promiseDi
+                .then(setDi)
+                .finally(() => setPromiseDi(undefined))
+                .catch(noop);
         }
     }, [di, promiseDi]);
+    if (!di && promiseDi) {
+        // in case child-app was not rendered on ssr
+        // and we have to wait before it's loading
+        return Fallback ? jsx(Fallback, {}) : null;
+    }
     if (!di) {
         log.error({
             event: 'not-found',
@@ -981,7 +1019,10 @@ const ChildApp = memo(({ name, version, tag, props, fallback }) => {
             tag,
             message: 'child-app was not initialized',
         });
-        return null;
+        if (process.env.__TRAMVAI_CONCURRENT_FEATURES || typeof window !== 'undefined') {
+            throw new Error(`Child-app was not initialized, check the loading error for child-app "${name}"`);
+        }
+        return Fallback ? jsx(Fallback, {}) : null;
     }
     try {
         const Cmp = di.get({ token: CHILD_APP_INTERNAL_RENDER_TOKEN, optional: true });
@@ -995,14 +1036,7 @@ const ChildApp = memo(({ name, version, tag, props, fallback }) => {
             });
             return null;
         }
-        const result = createElement(Cmp, {
-            di,
-            props,
-        });
-        if (process.env.__TRAMVAI_CONCURRENT_FEATURES) {
-            return (jsx(Suspense, { fallback: jsx(FailedChildAppFallback, { name: name, version: version, tag: tag, logger: log, fallback: fallback }), children: result }));
-        }
-        return result;
+        return jsx(Cmp, { di: di, props: props });
     }
     catch (error) {
         log.error({
@@ -1015,6 +1049,16 @@ const ChildApp = memo(({ name, version, tag, props, fallback }) => {
         });
         return null;
     }
+};
+const ChildApp = memo((config) => {
+    const { fallback } = config;
+    const url = useUrl();
+    const result = (jsx(UniversalErrorBoundary, { url: url, fallback: fallback, children: jsx(ChildAppWrapper, { ...config }) }));
+    if (process.env.__TRAMVAI_CONCURRENT_FEATURES) {
+        const fallbackRender = FailedChildAppFallback(config);
+        return jsx(Suspense, { fallback: fallbackRender, children: result });
+    }
+    return result;
 });
 
 let ChildAppModule = class ChildAppModule {

package/lib/server.es.js

@@ -6,16 +6,17 @@ export * from '@tramvai/tokens-child-app';
 import { ACTION_PAGE_RUNNER_TOKEN, LOGGER_TOKEN, DISPATCHER_TOKEN, STORE_TOKEN, CONTEXT_TOKEN, DISPATCHER_CONTEXT_TOKEN, STORE_MIDDLEWARE, INITIAL_APP_STATE_TOKEN, COMBINE_REDUCERS, ENV_MANAGER_TOKEN, REGISTER_CLEAR_CACHE_TOKEN, CLEAR_CACHE_TOKEN, ENV_USED_TOKEN, CREATE_CACHE_TOKEN } from '@tramvai/tokens-common';
 import { RENDER_SLOTS, EXTEND_RENDER, ResourceType, ResourceSlot, RESOURCES_REGISTRY } from '@tramvai/tokens-render';
 import { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
-import { resolveLazyComponent, useDi } from '@tramvai/react';
+import { resolveLazyComponent, UniversalErrorBoundary, useDi } from '@tramvai/react';
 import flatten from '@tinkoff/utils/array/flatten';
 import { ChildDispatcherContext, createEvent, createReducer } from '@tramvai/state';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, memo, useContext, useMemo, useState, useEffect, createElement, Suspense } from 'react';
+import { createContext, memo, Suspense, useContext, useMemo, useState, useEffect } from 'react';
 import applyOrReturn from '@tinkoff/utils/function/applyOrReturn';
 import { combineValidators, isUrl, endsWith } from '@tinkoff/env-validators';
 import { safeStringify } from '@tramvai/safe-strings';
 import { ServerLoader as ServerLoader$1 } from '@tinkoff/module-loader-server';
 import noop from '@tinkoff/utils/function/noop';
+import { useUrl } from '@tramvai/module-router';
 
 const getChildProviders$2 = (appDi) => {
     return [
@@ -92,7 +93,6 @@ class SingletonDiManager {
                 error,
                 config,
             });
-            return null;
         }
     }
     forEachChildDi(cb) {
@@ -161,7 +161,7 @@ const getChildProviders = (appDi) => {
                     dispatcher,
                     // context will be set later by the CONTEXT_TOKEN
                     context: {},
-                    initialState,
+                    initialState: initialState !== null && initialState !== void 0 ? initialState : { stores: [] },
                     middlewares: flatten(middlewares || []),
                     parentDispatcherContext,
                     parentAllowedStores: flatten(parentAllowedStores || []),
@@ -222,7 +222,7 @@ class DiManager {
 
 class CommandLineRunner {
     constructor({ logger, rootCommandLineRunner, diManager, }) {
-        this.log = logger('child-app:commandlinerunner');
+        this.log = logger('child-app:command-line-runner');
         this.rootCommandLineRunner = rootCommandLineRunner;
         this.diManager = diManager;
     }
@@ -322,10 +322,11 @@ const getModuleFederation = async (container, name = 'entry') => {
 };
 
 class ChildAppResolutionConfigManager {
-    constructor({ configs, }) {
+    constructor({ configs, logger, }) {
         this.hasInitialized = false;
         this.rawConfigs = configs !== null && configs !== void 0 ? configs : [];
         this.mapping = new Map();
+        this.log = logger('child-app:resolution-config');
     }
     async init() {
         if (this.hasInitialized) {
@@ -336,10 +337,18 @@ class ChildAppResolutionConfigManager {
         }
         this.initPromise = (async () => {
             const configs = await Promise.all(this.rawConfigs.map((rawConfig) => {
-                return applyOrReturn([], rawConfig);
+                return Promise.resolve()
+                    .then(() => {
+                    return applyOrReturn([], rawConfig);
+                })
+                    .catch((error) => {
+                    this.log.error(error, 'Failed while resolving resolution config');
+                });
             }));
             flatten(configs).forEach((config) => {
-                this.mapping.set(config.name, config);
+                if (config) {
+                    this.mapping.set(config.name, config);
+                }
             });
             this.hasInitialized = true;
         })();
@@ -349,7 +358,7 @@ class ChildAppResolutionConfigManager {
         var _a;
         const fromMapping = this.mapping.get(name);
         if (!fromMapping) {
-            return null;
+            return;
         }
         const cfg = fromMapping.byTag[tag];
         if (process.env.NODE_ENV === 'development' && tag === 'debug' && !cfg) {
@@ -382,6 +391,7 @@ const sharedProviders = [
         useClass: ChildAppResolutionConfigManager,
         deps: {
             configs: { token: CHILD_APP_RESOLUTION_CONFIGS_TOKEN, optional: true },
+            logger: LOGGER_TOKEN,
         },
     }),
     provide({
@@ -398,8 +408,9 @@ const sharedProviders = [
     }),
     provide({
         provide: CHILD_APP_RESOLVE_CONFIG_TOKEN,
-        useFactory: ({ envManager, rootBaseUrl, resolutionConfigManager }) => {
+        useFactory: ({ envManager, logger, rootBaseUrl, resolutionConfigManager }) => {
             const rawEnv = envManager.get('CHILD_APP_DEBUG');
+            const log = logger('child-app:resolve-config');
             const debug = new Map();
             rawEnv === null || rawEnv === void 0 ? void 0 : rawEnv.split(';').reduce((acc, entry) => {
                 const [name, url] = entry.split('=');
@@ -411,7 +422,8 @@ const sharedProviders = [
                 const req = { name, tag, version: request.version };
                 const config = resolutionConfigManager.resolve(req);
                 if (!config) {
-                    throw new Error(`Child-app "${name}" with tag "${tag}" has not found`);
+                    log.error(`Child-app "${name}" with tag "${tag}" has not found`);
+                    return;
                 }
                 const { version, baseUrl: configBaseUrl, client, server, css, withoutCss } = config;
                 const baseUrl = (_b = (_a = debug.get(name)) !== null && _a !== void 0 ? _a : configBaseUrl) !== null && _b !== void 0 ? _b : rootBaseUrl;
@@ -443,6 +455,7 @@ const sharedProviders = [
         },
         deps: {
             envManager: ENV_MANAGER_TOKEN,
+            logger: LOGGER_TOKEN,
             rootBaseUrl: CHILD_APP_RESOLVE_BASE_URL_TOKEN,
             resolutionConfigManager: CHILD_APP_RESOLUTION_CONFIG_MANAGER_TOKEN,
         },
@@ -640,6 +653,9 @@ class PreloadManager {
     async preload(request) {
         await this.resolutionConfigManager.init();
         const config = this.resolveFullConfig(request);
+        if (!config) {
+            return;
+        }
         const { key } = config;
         if (this.map.has(key)) {
             await this.map.get(key);
@@ -664,8 +680,7 @@ class PreloadManager {
     }
     isPreloaded(request) {
         const config = this.resolveFullConfig(request);
-        const { key } = config;
-        return this.map.has(key);
+        return !!config && this.map.has(config.key);
     }
     async runPreloaded() {
         this.shouldRunImmediately = true;
@@ -748,7 +763,6 @@ class StateManager {
 class RenderManager {
     constructor({ logger, preloadManager, diManager, resolveFullConfig, }) {
         this.hasRenderedSet = new Set();
-        this.loadingInProgress = new Map();
         this.log = logger('child-app:render');
         this.preloadManager = preloadManager;
         this.diManager = diManager;
@@ -756,37 +770,24 @@ class RenderManager {
     }
     getChildDi(request) {
         const config = this.resolveFullConfig(request);
+        if (!config) {
+            throw new Error(`Child app "${request.name}" not found`);
+        }
         this.hasRenderedSet.add(config.key);
         if (this.preloadManager.isPreloaded(request)) {
-            return [this.diManager.getChildDi(config), null];
+            return [this.diManager.getChildDi(config), undefined];
         }
         this.log.warn({
             message: 'Child-app has been used but not preloaded before React render',
             request,
         });
-        this.loadingInProgress.set(config.key, config);
-        const promiseDi = this.preloadManager.preload(request).then(() => {
-            return this.diManager.getChildDi(config);
-        });
-        return [null, promiseDi];
-    }
-    async flush() {
-        const promises = [];
-        for (const [_, request] of this.loadingInProgress.entries()) {
-            promises.push(this.preloadManager.preload(request));
-        }
-        this.loadingInProgress.clear();
-        if (promises.length) {
-            await Promise.all(promises);
-            return true;
-        }
-        return false;
+        return [undefined, undefined];
     }
     clear() {
         const preloadedList = this.preloadManager.getPreloadedList();
         for (const request of preloadedList) {
             const config = this.resolveFullConfig(request);
-            if (!this.hasRenderedSet.has(config.key)) {
+            if (!config || !this.hasRenderedSet.has(config.key)) {
                 this.log.warn({
                     message: 'Child-app has been preloaded but not used in React render',
                     request,
@@ -801,7 +802,11 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
     const log = logger('child-app:render:slots');
     const result = [];
     preloadManager.getPreloadedList().forEach((requestConfig) => {
+        var _a;
         const config = resolveFullConfig(requestConfig);
+        if (!config) {
+            return;
+        }
         const di = diManager.getChildDi(config);
         result.push({
             type: ResourceType.script,
@@ -815,7 +820,7 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
             result.push({
                 type: ResourceType.style,
                 slot: ResourceSlot.HEAD_CORE_STYLES,
-                payload: config.css.entry,
+                payload: (_a = config.css.entry) !== null && _a !== void 0 ? _a : null,
                 attrs: {
                     'data-critical': 'true',
                 },
@@ -957,7 +962,9 @@ const serverProviders = [
     }),
 ];
 
-const FailedChildAppFallback = ({ name, version, tag, logger, fallback: Fallback, }) => {
+const FailedChildAppFallback = ({ name, version, tag, fallback: Fallback, }) => {
+    const logger = useDi(LOGGER_TOKEN);
+    const log = logger('child-app:render');
     // On client-side hydration errors will be handled in `hydrateRoot` `onRecoverableError` property,
     // and update errors will be handled in Error Boundaries.
     //
@@ -967,7 +974,7 @@ const FailedChildAppFallback = ({ name, version, tag, logger, fallback: Fallback
     // On server-side, we still use `renderToString`,
     // and need to manually log render errors for components, wrapped in Suspense Boundaries.
     if (typeof window === 'undefined') {
-        logger.error({
+        log.error({
             event: 'failed-render',
             message: 'child-app failed to render, will try to recover during hydration',
             name,
@@ -977,21 +984,29 @@ const FailedChildAppFallback = ({ name, version, tag, logger, fallback: Fallback
     }
     return Fallback ? jsx(Fallback, {}) : null;
 };
-const ChildApp = memo(({ name, version, tag, props, fallback }) => {
+const ChildAppWrapper = ({ name, version, tag, props, fallback: Fallback, }) => {
     const renderManager = useContext(RenderContext);
-    const resolveExternalConfig = useDi(CHILD_APP_RESOLVE_CONFIG_TOKEN);
     const logger = useDi(LOGGER_TOKEN);
     const log = logger('child-app:render');
-    const [maybeDi, promiseDi] = useMemo(() => {
-        return renderManager.getChildDi(resolveExternalConfig({ name, version, tag }));
-    }, [name, version, tag, renderManager, resolveExternalConfig]);
+    const [maybeDi, maybePromiseDi] = useMemo(() => {
+        return renderManager.getChildDi({ name, version, tag });
+    }, [name, version, tag, renderManager]);
     const [di, setDi] = useState(maybeDi);
+    const [promiseDi, setPromiseDi] = useState(maybePromiseDi);
     useEffect(() => {
         if (!di && promiseDi) {
             // any errors with loading child-app should be handled in some other place
-            promiseDi.then(setDi).catch(noop);
+            promiseDi
+                .then(setDi)
+                .finally(() => setPromiseDi(undefined))
+                .catch(noop);
         }
     }, [di, promiseDi]);
+    if (!di && promiseDi) {
+        // in case child-app was not rendered on ssr
+        // and we have to wait before it's loading
+        return Fallback ? jsx(Fallback, {}) : null;
+    }
     if (!di) {
         log.error({
             event: 'not-found',
@@ -1000,7 +1015,10 @@ const ChildApp = memo(({ name, version, tag, props, fallback }) => {
             tag,
             message: 'child-app was not initialized',
         });
-        return null;
+        if (process.env.__TRAMVAI_CONCURRENT_FEATURES || typeof window !== 'undefined') {
+            throw new Error(`Child-app was not initialized, check the loading error for child-app "${name}"`);
+        }
+        return Fallback ? jsx(Fallback, {}) : null;
     }
     try {
         const Cmp = di.get({ token: CHILD_APP_INTERNAL_RENDER_TOKEN, optional: true });
@@ -1014,14 +1032,7 @@ const ChildApp = memo(({ name, version, tag, props, fallback }) => {
             });
             return null;
         }
-        const result = createElement(Cmp, {
-            di,
-            props,
-        });
-        if (process.env.__TRAMVAI_CONCURRENT_FEATURES) {
-            return (jsx(Suspense, { fallback: jsx(FailedChildAppFallback, { name: name, version: version, tag: tag, logger: log, fallback: fallback }), children: result }));
-        }
-        return result;
+        return jsx(Cmp, { di: di, props: props });
     }
     catch (error) {
         log.error({
@@ -1034,6 +1045,16 @@ const ChildApp = memo(({ name, version, tag, props, fallback }) => {
         });
         return null;
     }
+};
+const ChildApp = memo((config) => {
+    const { fallback } = config;
+    const url = useUrl();
+    const result = (jsx(UniversalErrorBoundary, { url: url, fallback: fallback, children: jsx(ChildAppWrapper, { ...config }) }));
+    if (process.env.__TRAMVAI_CONCURRENT_FEATURES) {
+        const fallbackRender = FailedChildAppFallback(config);
+        return jsx(Suspense, { fallback: fallbackRender, children: result });
+    }
+    return result;
 });
 
 let ChildAppModule = class ChildAppModule {

package/lib/server.js

@@ -19,6 +19,7 @@ var envValidators = require('@tinkoff/env-validators');
 var safeStrings = require('@tramvai/safe-strings');
 var moduleLoaderServer = require('@tinkoff/module-loader-server');
 var noop = require('@tinkoff/utils/function/noop');
+var moduleRouter = require('@tramvai/module-router');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -101,7 +102,6 @@ class SingletonDiManager {
                 error,
                 config,
             });
-            return null;
         }
     }
     forEachChildDi(cb) {
@@ -170,7 +170,7 @@ const getChildProviders = (appDi) => {
                     dispatcher,
                     // context will be set later by the CONTEXT_TOKEN
                     context: {},
-                    initialState,
+                    initialState: initialState !== null && initialState !== void 0 ? initialState : { stores: [] },
                     middlewares: flatten__default["default"](middlewares || []),
                     parentDispatcherContext,
                     parentAllowedStores: flatten__default["default"](parentAllowedStores || []),
@@ -231,7 +231,7 @@ class DiManager {
 
 class CommandLineRunner {
     constructor({ logger, rootCommandLineRunner, diManager, }) {
-        this.log = logger('child-app:commandlinerunner');
+        this.log = logger('child-app:command-line-runner');
         this.rootCommandLineRunner = rootCommandLineRunner;
         this.diManager = diManager;
     }
@@ -331,10 +331,11 @@ const getModuleFederation = async (container, name = 'entry') => {
 };
 
 class ChildAppResolutionConfigManager {
-    constructor({ configs, }) {
+    constructor({ configs, logger, }) {
         this.hasInitialized = false;
         this.rawConfigs = configs !== null && configs !== void 0 ? configs : [];
         this.mapping = new Map();
+        this.log = logger('child-app:resolution-config');
     }
     async init() {
         if (this.hasInitialized) {
@@ -345,10 +346,18 @@ class ChildAppResolutionConfigManager {
         }
         this.initPromise = (async () => {
             const configs = await Promise.all(this.rawConfigs.map((rawConfig) => {
-                return applyOrReturn__default["default"]([], rawConfig);
+                return Promise.resolve()
+                    .then(() => {
+                    return applyOrReturn__default["default"]([], rawConfig);
+                })
+                    .catch((error) => {
+                    this.log.error(error, 'Failed while resolving resolution config');
+                });
             }));
             flatten__default["default"](configs).forEach((config) => {
-                this.mapping.set(config.name, config);
+                if (config) {
+                    this.mapping.set(config.name, config);
+                }
             });
             this.hasInitialized = true;
         })();
@@ -358,7 +367,7 @@ class ChildAppResolutionConfigManager {
         var _a;
         const fromMapping = this.mapping.get(name);
         if (!fromMapping) {
-            return null;
+            return;
         }
         const cfg = fromMapping.byTag[tag];
         if (process.env.NODE_ENV === 'development' && tag === 'debug' && !cfg) {
@@ -391,6 +400,7 @@ const sharedProviders = [
         useClass: ChildAppResolutionConfigManager,
         deps: {
             configs: { token: tokensChildApp.CHILD_APP_RESOLUTION_CONFIGS_TOKEN, optional: true },
+            logger: tokensCommon.LOGGER_TOKEN,
         },
     }),
     core.provide({
@@ -407,8 +417,9 @@ const sharedProviders = [
     }),
     core.provide({
         provide: tokensChildApp.CHILD_APP_RESOLVE_CONFIG_TOKEN,
-        useFactory: ({ envManager, rootBaseUrl, resolutionConfigManager }) => {
+        useFactory: ({ envManager, logger, rootBaseUrl, resolutionConfigManager }) => {
             const rawEnv = envManager.get('CHILD_APP_DEBUG');
+            const log = logger('child-app:resolve-config');
             const debug = new Map();
             rawEnv === null || rawEnv === void 0 ? void 0 : rawEnv.split(';').reduce((acc, entry) => {
                 const [name, url] = entry.split('=');
@@ -420,7 +431,8 @@ const sharedProviders = [
                 const req = { name, tag, version: request.version };
                 const config = resolutionConfigManager.resolve(req);
                 if (!config) {
-                    throw new Error(`Child-app "${name}" with tag "${tag}" has not found`);
+                    log.error(`Child-app "${name}" with tag "${tag}" has not found`);
+                    return;
                 }
                 const { version, baseUrl: configBaseUrl, client, server, css, withoutCss } = config;
                 const baseUrl = (_b = (_a = debug.get(name)) !== null && _a !== void 0 ? _a : configBaseUrl) !== null && _b !== void 0 ? _b : rootBaseUrl;
@@ -452,6 +464,7 @@ const sharedProviders = [
         },
         deps: {
             envManager: tokensCommon.ENV_MANAGER_TOKEN,
+            logger: tokensCommon.LOGGER_TOKEN,
             rootBaseUrl: tokensChildApp.CHILD_APP_RESOLVE_BASE_URL_TOKEN,
             resolutionConfigManager: tokensChildApp.CHILD_APP_RESOLUTION_CONFIG_MANAGER_TOKEN,
         },
@@ -649,6 +662,9 @@ class PreloadManager {
     async preload(request) {
         await this.resolutionConfigManager.init();
         const config = this.resolveFullConfig(request);
+        if (!config) {
+            return;
+        }
         const { key } = config;
         if (this.map.has(key)) {
             await this.map.get(key);
@@ -673,8 +689,7 @@ class PreloadManager {
     }
     isPreloaded(request) {
         const config = this.resolveFullConfig(request);
-        const { key } = config;
-        return this.map.has(key);
+        return !!config && this.map.has(config.key);
     }
     async runPreloaded() {
         this.shouldRunImmediately = true;
@@ -757,7 +772,6 @@ class StateManager {
 class RenderManager {
     constructor({ logger, preloadManager, diManager, resolveFullConfig, }) {
         this.hasRenderedSet = new Set();
-        this.loadingInProgress = new Map();
         this.log = logger('child-app:render');
         this.preloadManager = preloadManager;
         this.diManager = diManager;
@@ -765,37 +779,24 @@ class RenderManager {
     }
     getChildDi(request) {
         const config = this.resolveFullConfig(request);
+        if (!config) {
+            throw new Error(`Child app "${request.name}" not found`);
+        }
         this.hasRenderedSet.add(config.key);
         if (this.preloadManager.isPreloaded(request)) {
-            return [this.diManager.getChildDi(config), null];
+            return [this.diManager.getChildDi(config), undefined];
         }
         this.log.warn({
             message: 'Child-app has been used but not preloaded before React render',
             request,
         });
-        this.loadingInProgress.set(config.key, config);
-        const promiseDi = this.preloadManager.preload(request).then(() => {
-            return this.diManager.getChildDi(config);
-        });
-        return [null, promiseDi];
-    }
-    async flush() {
-        const promises = [];
-        for (const [_, request] of this.loadingInProgress.entries()) {
-            promises.push(this.preloadManager.preload(request));
-        }
-        this.loadingInProgress.clear();
-        if (promises.length) {
-            await Promise.all(promises);
-            return true;
-        }
-        return false;
+        return [undefined, undefined];
     }
     clear() {
         const preloadedList = this.preloadManager.getPreloadedList();
         for (const request of preloadedList) {
             const config = this.resolveFullConfig(request);
-            if (!this.hasRenderedSet.has(config.key)) {
+            if (!config || !this.hasRenderedSet.has(config.key)) {
                 this.log.warn({
                     message: 'Child-app has been preloaded but not used in React render',
                     request,
@@ -810,7 +811,11 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
     const log = logger('child-app:render:slots');
     const result = [];
     preloadManager.getPreloadedList().forEach((requestConfig) => {
+        var _a;
         const config = resolveFullConfig(requestConfig);
+        if (!config) {
+            return;
+        }
         const di = diManager.getChildDi(config);
         result.push({
             type: tokensRender.ResourceType.script,
@@ -824,7 +829,7 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
             result.push({
                 type: tokensRender.ResourceType.style,
                 slot: tokensRender.ResourceSlot.HEAD_CORE_STYLES,
-                payload: config.css.entry,
+                payload: (_a = config.css.entry) !== null && _a !== void 0 ? _a : null,
                 attrs: {
                     'data-critical': 'true',
                 },
@@ -966,7 +971,9 @@ const serverProviders = [
     }),
 ];
 
-const FailedChildAppFallback = ({ name, version, tag, logger, fallback: Fallback, }) => {
+const FailedChildAppFallback = ({ name, version, tag, fallback: Fallback, }) => {
+    const logger = react$1.useDi(tokensCommon.LOGGER_TOKEN);
+    const log = logger('child-app:render');
     // On client-side hydration errors will be handled in `hydrateRoot` `onRecoverableError` property,
     // and update errors will be handled in Error Boundaries.
     //
@@ -976,7 +983,7 @@ const FailedChildAppFallback = ({ name, version, tag, logger, fallback: Fallback
     // On server-side, we still use `renderToString`,
     // and need to manually log render errors for components, wrapped in Suspense Boundaries.
     if (typeof window === 'undefined') {
-        logger.error({
+        log.error({
             event: 'failed-render',
             message: 'child-app failed to render, will try to recover during hydration',
             name,
@@ -986,21 +993,29 @@ const FailedChildAppFallback = ({ name, version, tag, logger, fallback: Fallback
     }
     return Fallback ? jsxRuntime.jsx(Fallback, {}) : null;
 };
-const ChildApp = react.memo(({ name, version, tag, props, fallback }) => {
+const ChildAppWrapper = ({ name, version, tag, props, fallback: Fallback, }) => {
     const renderManager = react.useContext(RenderContext);
-    const resolveExternalConfig = react$1.useDi(tokensChildApp.CHILD_APP_RESOLVE_CONFIG_TOKEN);
     const logger = react$1.useDi(tokensCommon.LOGGER_TOKEN);
     const log = logger('child-app:render');
-    const [maybeDi, promiseDi] = react.useMemo(() => {
-        return renderManager.getChildDi(resolveExternalConfig({ name, version, tag }));
-    }, [name, version, tag, renderManager, resolveExternalConfig]);
+    const [maybeDi, maybePromiseDi] = react.useMemo(() => {
+        return renderManager.getChildDi({ name, version, tag });
+    }, [name, version, tag, renderManager]);
     const [di, setDi] = react.useState(maybeDi);
+    const [promiseDi, setPromiseDi] = react.useState(maybePromiseDi);
     react.useEffect(() => {
         if (!di && promiseDi) {
             // any errors with loading child-app should be handled in some other place
-            promiseDi.then(setDi).catch(noop__default["default"]);
+            promiseDi
+                .then(setDi)
+                .finally(() => setPromiseDi(undefined))
+                .catch(noop__default["default"]);
         }
     }, [di, promiseDi]);
+    if (!di && promiseDi) {
+        // in case child-app was not rendered on ssr
+        // and we have to wait before it's loading
+        return Fallback ? jsxRuntime.jsx(Fallback, {}) : null;
+    }
     if (!di) {
         log.error({
             event: 'not-found',
@@ -1009,7 +1024,10 @@ const ChildApp = react.memo(({ name, version, tag, props, fallback }) => {
             tag,
             message: 'child-app was not initialized',
         });
-        return null;
+        if (process.env.__TRAMVAI_CONCURRENT_FEATURES || typeof window !== 'undefined') {
+            throw new Error(`Child-app was not initialized, check the loading error for child-app "${name}"`);
+        }
+        return Fallback ? jsxRuntime.jsx(Fallback, {}) : null;
     }
     try {
         const Cmp = di.get({ token: tokensChildApp.CHILD_APP_INTERNAL_RENDER_TOKEN, optional: true });
@@ -1023,14 +1041,7 @@ const ChildApp = react.memo(({ name, version, tag, props, fallback }) => {
             });
             return null;
         }
-        const result = react.createElement(Cmp, {
-            di,
-            props,
-        });
-        if (process.env.__TRAMVAI_CONCURRENT_FEATURES) {
-            return (jsxRuntime.jsx(react.Suspense, { fallback: jsxRuntime.jsx(FailedChildAppFallback, { name: name, version: version, tag: tag, logger: log, fallback: fallback }), children: result }));
-        }
-        return result;
+        return jsxRuntime.jsx(Cmp, { di: di, props: props });
     }
     catch (error) {
         log.error({
@@ -1043,6 +1054,16 @@ const ChildApp = react.memo(({ name, version, tag, props, fallback }) => {
         });
         return null;
     }
+};
+const ChildApp = react.memo((config) => {
+    const { fallback } = config;
+    const url = moduleRouter.useUrl();
+    const result = (jsxRuntime.jsx(react$1.UniversalErrorBoundary, { url: url, fallback: fallback, children: jsxRuntime.jsx(ChildAppWrapper, { ...config }) }));
+    if (process.env.__TRAMVAI_CONCURRENT_FEATURES) {
+        const fallbackRender = FailedChildAppFallback(config);
+        return jsxRuntime.jsx(react.Suspense, { fallback: fallbackRender, children: result });
+    }
+    return result;
 });
 
 exports.ChildAppModule = class ChildAppModule {

package/lib/shared/di.d.ts

@@ -11,7 +11,7 @@ export declare class DiManager implements ChildAppDiManager {
         loader: ChildAppLoader;
         singletonDiManager: ChildAppDiManager;
     });
-    getChildDi(config: ChildAppFinalConfig): Container | ChildContainer;
+    getChildDi(config: ChildAppFinalConfig): Container | ChildContainer | undefined;
     forEachChildDi(cb: (di: Container) => void): void;
     private resolveDi;
 }

package/lib/shared/react/component.d.ts

@@ -1,2 +1,2 @@
 import type { ChildAppReactConfig } from '@tramvai/tokens-child-app';
-export declare const ChildApp: import("react").MemoExoticComponent<({ name, version, tag, props, fallback }: ChildAppReactConfig) => JSX.Element>;
+export declare const ChildApp: import("react").MemoExoticComponent<(config: ChildAppReactConfig) => JSX.Element>;

package/lib/shared/react/render-context.d.ts

@@ -1,2 +1,2 @@
 import type { ChildAppRenderManager } from '@tramvai/tokens-child-app';
-export declare const RenderContext: import("react").Context<ChildAppRenderManager>;
+export declare const RenderContext: import("react").Context<ChildAppRenderManager | null>;

package/lib/shared/resolutionConfigManager.d.ts

@@ -1,15 +1,18 @@
 import type { ChildAppRequestConfig, CHILD_APP_RESOLUTION_CONFIGS_TOKEN, CHILD_APP_RESOLUTION_CONFIG_MANAGER_TOKEN, ResolutionConfig } from '@tramvai/tokens-child-app';
 import type { ExtractDependencyType, ExtractTokenType } from '@tinkoff/dippy';
+import type { LOGGER_TOKEN } from '@tramvai/tokens-common';
 type Interface = ExtractTokenType<typeof CHILD_APP_RESOLUTION_CONFIG_MANAGER_TOKEN>;
 export declare class ChildAppResolutionConfigManager implements Interface {
     private rawConfigs;
     private mapping;
+    private log;
     private hasInitialized;
-    private initPromise;
-    constructor({ configs, }: {
+    private initPromise?;
+    constructor({ configs, logger, }: {
         configs: ExtractDependencyType<typeof CHILD_APP_RESOLUTION_CONFIGS_TOKEN> | null;
+        logger: typeof LOGGER_TOKEN;
     });
     init(): Promise<void>;
-    resolve({ name, version, tag }: ChildAppRequestConfig): ResolutionConfig;
+    resolve({ name, version, tag }: ChildAppRequestConfig): ResolutionConfig | undefined;
 }
 export {};

package/lib/shared/singletonDi.d.ts

@@ -11,7 +11,7 @@ export declare class SingletonDiManager implements ChildAppDiManager {
         appDi: Container;
         loader: ChildAppLoader;
     });
-    getChildDi(config: ChildAppFinalConfig): Container;
+    getChildDi(config: ChildAppFinalConfig): Container | undefined;
     forEachChildDi(cb: (di: Container) => void): void;
     private resolveDi;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-child-app",
-  "version": "2.61.2",
+  "version": "2.63.0",
   "description": "Module for child apps",
   "browser": {
     "./lib/server.js": "./lib/browser.js",
@@ -30,21 +30,22 @@
   "dependencies": {
     "@tinkoff/env-validators": "0.1.4",
     "@tinkoff/module-loader-client": "0.4.4",
-    "@tinkoff/module-loader-server": "0.5.5",
-    "@tramvai/child-app-core": "2.61.2",
+    "@tinkoff/module-loader-server": "0.5.6",
+    "@tramvai/child-app-core": "2.63.0",
+    "@tramvai/module-router": "2.63.0",
     "@tramvai/safe-strings": "0.5.6",
-    "@tramvai/tokens-child-app": "2.61.2"
+    "@tramvai/tokens-child-app": "2.63.0"
   },
   "devDependencies": {},
   "peerDependencies": {
     "@tinkoff/dippy": "0.8.11",
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/core": "2.61.2",
-    "@tramvai/state": "2.61.2",
-    "@tramvai/react": "2.61.2",
-    "@tramvai/tokens-common": "2.61.2",
-    "@tramvai/tokens-render": "2.61.2",
-    "@tramvai/tokens-router": "2.61.2",
+    "@tramvai/core": "2.63.0",
+    "@tramvai/state": "2.63.0",
+    "@tramvai/react": "2.63.0",
+    "@tramvai/tokens-common": "2.63.0",
+    "@tramvai/tokens-render": "2.63.0",
+    "@tramvai/tokens-router": "2.63.0",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",
     "object-assign": "^4.1.1",