@tramvai/module-render 1.55.4 → 1.58.0

package/lib/browser.d.ts

@@ -1,4 +1,5 @@
 import type { RenderModuleConfig } from './shared/types';
+export * from './shared/pageErrorStore';
 export * from '@tramvai/tokens-render';
 export declare const DEFAULT_POLYFILL_CONDITION = "";
 export declare class RenderModule {

package/lib/browser.js

@@ -1,41 +1,70 @@
 import { __decorate } from 'tslib';
-import { Module, commandLineListTokens, DI_TOKEN } from '@tramvai/core';
-import { LOGGER_TOKEN, CONTEXT_TOKEN } from '@tramvai/module-common';
+import { Module, provide, commandLineListTokens, DI_TOKEN } from '@tramvai/core';
+import { STORE_TOKEN, LOGGER_TOKEN, CONTEXT_TOKEN } from '@tramvai/module-common';
 import { DEFAULT_LAYOUT_COMPONENT, LAYOUT_OPTIONS, DEFAULT_FOOTER_COMPONENT, DEFAULT_HEADER_COMPONENT, RESOURCES_REGISTRY, CUSTOM_RENDER, EXTEND_RENDER, RENDERER_CALLBACK, RENDER_MODE } from '@tramvai/tokens-render';
 export * from '@tramvai/tokens-render';
-import { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
+import { ROUTER_TOKEN, PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
 import each from '@tinkoff/utils/array/each';
-import React, { PureComponent, createElement, StrictMode, useEffect } from 'react';
-import { Provider } from '@tramvai/state';
-import { withError, DIContext } from '@tramvai/react';
-import memoOne from '@tinkoff/utils/function/memoize/one';
-import strictEqual from '@tinkoff/utils/is/strictEqual';
-import { useRoute } from '@tramvai/module-router';
+import React, { PureComponent, useMemo, createElement, StrictMode, useEffect } from 'react';
+import { createEvent, createReducer, useStore, Provider } from '@tramvai/state';
+import { useDi, ERROR_BOUNDARY_TOKEN, ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, UniversalErrorBoundary, DIContext } from '@tramvai/react';
+import { useRoute, useUrl } from '@tramvai/module-router';
 import ReactDOM, { hydrate } from 'react-dom';
 import { composeLayoutOptions, createLayout } from '@tinkoff/layout-factory';
+import { COMBINE_REDUCERS } from '@tramvai/tokens-common';
 
+function serializeError(error) {
+    return {
+        ...error,
+        message: error.message,
+        stack: error.stack,
+    };
+}
+function deserializeError(serializedError) {
+    const error = new Error(serializedError.message);
+    Object.assign(error, serializedError);
+    return error;
+}
+const setPageErrorEvent = createEvent('setPageError');
+const initialState = null;
+const PageErrorStore = createReducer('pageError', initialState).on(setPageErrorEvent, (state, error) => error && serializeError(error));
+
+const PageErrorBoundary = (props) => {
+    const { children, fallback } = props;
+    const url = useUrl();
+    const serializedError = useStore(PageErrorStore);
+    const error = useMemo(() => {
+        return serializedError && deserializeError(serializedError);
+    }, [serializedError]);
+    const errorHandlers = useDi({ token: ERROR_BOUNDARY_TOKEN, optional: true });
+    const fallbackFromDi = useDi({ token: ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, optional: true });
+    return (React.createElement(UniversalErrorBoundary, { url: url, error: error, errorHandlers: errorHandlers, fallback: fallback, fallbackFromDi: fallbackFromDi }, children));
+};
 class RootComponent extends PureComponent {
     render() {
-        const { LayoutComponent, PageComponent, HeaderComponent, FooterComponent } = this.props;
+        const { LayoutComponent, PageComponent, HeaderComponent, FooterComponent, ErrorBoundaryComponent, } = this.props;
         return (React.createElement(LayoutComponent, { Header: HeaderComponent, Footer: FooterComponent },
-            React.createElement(PageComponent, null)));
+            React.createElement(PageErrorBoundary, { fallback: ErrorBoundaryComponent },
+                React.createElement(PageComponent, null))));
     }
 }
-const layoutWrapper = memoOne(withError(), strictEqual);
-const pageWrapper = memoOne(withError(), strictEqual);
-const Root = withError()(({ pageService }) => {
+const Root = ({ pageService }) => {
     const { config } = useRoute();
     const { pageComponent } = config;
-    const PageComponent = pageService.getComponent(pageComponent);
+    let PageComponent = pageService.getComponent(pageComponent);
     if (!PageComponent) {
-        throw new Error(`Page component '${pageComponent}' not found`);
+        // eslint-disable-next-line react-perf/jsx-no-new-function-as-prop
+        PageComponent = () => {
+            throw new Error(`Page component '${pageComponent}' not found`);
+        };
     }
-    // Достаем компоненты для текущей страницы, либо берем default реализации
+    // Get components for current page, otherwise use a defaults
     const LayoutComponent = pageService.resolveComponentFromConfig('layout');
     const HeaderComponent = pageService.resolveComponentFromConfig('header');
     const FooterComponent = pageService.resolveComponentFromConfig('footer');
-    return (React.createElement(RootComponent, { HeaderComponent: HeaderComponent, FooterComponent: FooterComponent, LayoutComponent: layoutWrapper(LayoutComponent), PageComponent: pageWrapper(PageComponent) }));
-});
+    const ErrorBoundaryComponent = pageService.resolveComponentFromConfig('errorBoundary');
+    return (React.createElement(RootComponent, { HeaderComponent: HeaderComponent, FooterComponent: FooterComponent, LayoutComponent: LayoutComponent, PageComponent: PageComponent, ErrorBoundaryComponent: ErrorBoundaryComponent }));
+};
 
 function renderReact({ pageService, di }, context) {
     return (React.createElement(Provider, { context: context },
@@ -144,6 +173,14 @@ LayoutModule = __decorate([
     })
 ], LayoutModule);
 
+const providers = [
+    provide({
+        provide: COMBINE_REDUCERS,
+        multi: true,
+        useValue: PageErrorStore,
+    }),
+];
+
 var RenderModule_1;
 const DEFAULT_POLYFILL_CONDITION = '';
 const throwErrorInDev = (logger) => {
@@ -170,7 +207,25 @@ RenderModule = RenderModule_1 = __decorate([
     Module({
         imports: [LayoutModule],
         providers: [
-            {
+            ...providers,
+            provide({
+                provide: commandLineListTokens.customerStart,
+                multi: true,
+                useFactory: ({ router, store }) => {
+                    return function clearPageError() {
+                        router.registerHook('beforeResolve', async () => {
+                            if (store.getState(PageErrorStore)) {
+                                store.dispatch(setPageErrorEvent(null));
+                            }
+                        });
+                    };
+                },
+                deps: {
+                    router: ROUTER_TOKEN,
+                    store: STORE_TOKEN,
+                },
+            }),
+            provide({
                 provide: RESOURCES_REGISTRY,
                 useFactory: ({ logger }) => ({
                     getPageResources: () => {
@@ -182,8 +237,8 @@ RenderModule = RenderModule_1 = __decorate([
                 deps: {
                     logger: LOGGER_TOKEN,
                 },
-            },
-            {
+            }),
+            provide({
                 provide: commandLineListTokens.generatePage,
                 useFactory: (deps) => {
                     return function renderClientCommand() {
@@ -202,13 +257,13 @@ RenderModule = RenderModule_1 = __decorate([
                     mode: RENDER_MODE,
                 },
                 multi: true,
-            },
-            {
+            }),
+            provide({
                 provide: RENDER_MODE,
                 useValue: 'legacy',
-            },
+            }),
         ],
     })
 ], RenderModule);
 
-export { DEFAULT_POLYFILL_CONDITION, RenderModule };
+export { DEFAULT_POLYFILL_CONDITION, PageErrorStore, RenderModule, deserializeError, serializeError, setPageErrorEvent };

package/lib/react/root.d.ts

@@ -1,6 +1,4 @@
-import React from 'react';
 import type { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
 export declare const Root: ({ pageService }: {
     pageService: typeof PAGE_SERVICE_TOKEN;
-    children?: React.ReactNode;
 }) => JSX.Element;

package/lib/server.d.ts

@@ -1,4 +1,5 @@
 import type { RenderModuleConfig } from './shared/types';
+export * from './shared/pageErrorStore';
 export * from '@tramvai/tokens-render';
 export declare const DEFAULT_POLYFILL_CONDITION = "!window.Promise.prototype.finally || !window.URL || !window.URLSearchParams || !window.AbortController || !window.IntersectionObserver || !Object.fromEntries";
 export declare class RenderModule {

package/lib/server.es.js

@@ -1,14 +1,18 @@
 import { __decorate } from 'tslib';
-import { Module, commandLineListTokens, DI_TOKEN, provide } from '@tramvai/core';
-import { CREATE_CACHE_TOKEN, RESPONSE_MANAGER_TOKEN, CONTEXT_TOKEN } from '@tramvai/module-common';
+import React, { PureComponent, useMemo, createElement } from 'react';
+import { renderToString } from 'react-dom/server';
+import { Module, provide, commandLineListTokens, DI_TOKEN } from '@tramvai/core';
+import { CREATE_CACHE_TOKEN, LOGGER_TOKEN, REQUEST_MANAGER_TOKEN, RESPONSE_MANAGER_TOKEN, CONTEXT_TOKEN } from '@tramvai/module-common';
 import { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
 import { ClientHintsModule, USER_AGENT_TOKEN } from '@tramvai/module-client-hints';
 import { ResourceType, ResourceSlot, DEFAULT_LAYOUT_COMPONENT, LAYOUT_OPTIONS, DEFAULT_FOOTER_COMPONENT, DEFAULT_HEADER_COMPONENT, RESOURCES_REGISTRY, RESOURCE_INLINE_OPTIONS, RENDER_SLOTS, POLYFILL_CONDITION, HTML_ATTRS, CUSTOM_RENDER, EXTEND_RENDER } from '@tramvai/tokens-render';
 export * from '@tramvai/tokens-render';
 import { createToken, Scope } from '@tinkoff/dippy';
+import { WEB_APP_AFTER_INIT_TOKEN } from '@tramvai/tokens-server';
+import { useDi, ERROR_BOUNDARY_TOKEN, ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, UniversalErrorBoundary, DIContext, ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN } from '@tramvai/react';
+import { resolve, isAbsoluteUrl as isAbsoluteUrl$1, parse } from '@tinkoff/url';
 import isUndefined from '@tinkoff/utils/is/undefined';
 import isEmpty from '@tinkoff/utils/is/empty';
-import { resolve, isAbsoluteUrl as isAbsoluteUrl$1 } from '@tinkoff/url';
 import fetch from 'node-fetch';
 import startsWith from '@tinkoff/utils/string/startsWith';
 import toArray from '@tinkoff/utils/array/toArray';
@@ -25,14 +29,10 @@ import * as path from 'path';
 import each from '@tinkoff/utils/array/each';
 import path$1 from '@tinkoff/utils/object/path';
 import { o as onload } from './server_inline.inline.es.js';
-import { renderToString } from 'react-dom/server';
-import React, { PureComponent } from 'react';
-import { Provider } from '@tramvai/state';
-import { withError, DIContext } from '@tramvai/react';
-import memoOne from '@tinkoff/utils/function/memoize/one';
-import strictEqual from '@tinkoff/utils/is/strictEqual';
-import { useRoute } from '@tramvai/module-router';
+import { createEvent, createReducer, useStore, Provider } from '@tramvai/state';
+import { useRoute, useUrl } from '@tramvai/module-router';
 import { composeLayoutOptions, createLayout } from '@tinkoff/layout-factory';
+import { COMBINE_REDUCERS } from '@tramvai/tokens-common';
 
 const thirtySeconds = 1000 * 30;
 const getFileContentLength = async (url) => {
@@ -601,28 +601,58 @@ const htmlPageSchemaFactory = ({ htmlAttrs, }) => {
     ];
 };
 
+function serializeError(error) {
+    return {
+        ...error,
+        message: error.message,
+        stack: error.stack,
+    };
+}
+function deserializeError(serializedError) {
+    const error = new Error(serializedError.message);
+    Object.assign(error, serializedError);
+    return error;
+}
+const setPageErrorEvent = createEvent('setPageError');
+const initialState = null;
+const PageErrorStore = createReducer('pageError', initialState).on(setPageErrorEvent, (state, error) => error && serializeError(error));
+
+const PageErrorBoundary = (props) => {
+    const { children, fallback } = props;
+    const url = useUrl();
+    const serializedError = useStore(PageErrorStore);
+    const error = useMemo(() => {
+        return serializedError && deserializeError(serializedError);
+    }, [serializedError]);
+    const errorHandlers = useDi({ token: ERROR_BOUNDARY_TOKEN, optional: true });
+    const fallbackFromDi = useDi({ token: ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, optional: true });
+    return (React.createElement(UniversalErrorBoundary, { url: url, error: error, errorHandlers: errorHandlers, fallback: fallback, fallbackFromDi: fallbackFromDi }, children));
+};
 class RootComponent extends PureComponent {
     render() {
-        const { LayoutComponent, PageComponent, HeaderComponent, FooterComponent } = this.props;
+        const { LayoutComponent, PageComponent, HeaderComponent, FooterComponent, ErrorBoundaryComponent, } = this.props;
         return (React.createElement(LayoutComponent, { Header: HeaderComponent, Footer: FooterComponent },
-            React.createElement(PageComponent, null)));
+            React.createElement(PageErrorBoundary, { fallback: ErrorBoundaryComponent },
+                React.createElement(PageComponent, null))));
     }
 }
-const layoutWrapper = memoOne(withError(), strictEqual);
-const pageWrapper = memoOne(withError(), strictEqual);
-const Root = withError()(({ pageService }) => {
+const Root = ({ pageService }) => {
     const { config } = useRoute();
     const { pageComponent } = config;
-    const PageComponent = pageService.getComponent(pageComponent);
+    let PageComponent = pageService.getComponent(pageComponent);
     if (!PageComponent) {
-        throw new Error(`Page component '${pageComponent}' not found`);
+        // eslint-disable-next-line react-perf/jsx-no-new-function-as-prop
+        PageComponent = () => {
+            throw new Error(`Page component '${pageComponent}' not found`);
+        };
     }
-    // Достаем компоненты для текущей страницы, либо берем default реализации
+    // Get components for current page, otherwise use a defaults
     const LayoutComponent = pageService.resolveComponentFromConfig('layout');
     const HeaderComponent = pageService.resolveComponentFromConfig('header');
     const FooterComponent = pageService.resolveComponentFromConfig('footer');
-    return (React.createElement(RootComponent, { HeaderComponent: HeaderComponent, FooterComponent: FooterComponent, LayoutComponent: layoutWrapper(LayoutComponent), PageComponent: pageWrapper(PageComponent) }));
-});
+    const ErrorBoundaryComponent = pageService.resolveComponentFromConfig('errorBoundary');
+    return (React.createElement(RootComponent, { HeaderComponent: HeaderComponent, FooterComponent: FooterComponent, LayoutComponent: LayoutComponent, PageComponent: PageComponent, ErrorBoundaryComponent: ErrorBoundaryComponent }));
+};
 
 function renderReact({ pageService, di }, context) {
     return (React.createElement(Provider, { context: context },
@@ -681,6 +711,14 @@ LayoutModule = __decorate([
     })
 ], LayoutModule);
 
+const providers = [
+    provide({
+        provide: COMBINE_REDUCERS,
+        multi: true,
+        useValue: PageErrorStore,
+    }),
+];
+
 var RenderModule_1;
 const DEFAULT_POLYFILL_CONDITION = '!window.Promise.prototype.finally || !window.URL || !window.URLSearchParams || !window.AbortController || !window.IntersectionObserver || !Object.fromEntries';
 let RenderModule = RenderModule_1 = class RenderModule {
@@ -702,14 +740,15 @@ RenderModule = RenderModule_1 = __decorate([
     Module({
         imports: [ClientHintsModule, LayoutModule],
         providers: [
-            {
+            ...providers,
+            provide({
                 provide: RESOURCES_REGISTRY,
                 useClass: ResourcesRegistry,
                 deps: {
                     resourceInliner: RESOURCE_INLINER,
                 },
-            },
-            {
+            }),
+            provide({
                 provide: RESOURCES_REGISTRY_CACHE,
                 scope: Scope.SINGLETON,
                 useFactory: ({ createCache }) => {
@@ -724,20 +763,40 @@ RenderModule = RenderModule_1 = __decorate([
                 deps: {
                     createCache: CREATE_CACHE_TOKEN,
                 },
-            },
-            {
+            }),
+            provide({
                 provide: RESOURCE_INLINER,
                 useClass: ResourcesInliner,
                 deps: {
                     resourcesRegistryCache: RESOURCES_REGISTRY_CACHE,
                     resourceInlineThreshold: { token: RESOURCE_INLINE_OPTIONS, optional: true },
                 },
-            },
-            {
+            }),
+            provide({
                 provide: commandLineListTokens.generatePage,
-                useFactory: ({ htmlBuilder, responseManager, }) => {
+                useFactory: ({ htmlBuilder, logger, requestManager, responseManager, context }) => {
+                    const log = logger('module-render');
                     return async function render() {
-                        const html = await htmlBuilder.flow();
+                        let html;
+                        try {
+                            html = await htmlBuilder.flow();
+                        }
+                        catch (error) {
+                            const requestInfo = {
+                                ip: requestManager.getClientIp(),
+                                requestId: requestManager.getHeader('x-request-id'),
+                                url: requestManager.getUrl(),
+                            };
+                            log.error({ event: 'page-render-error', error, requestInfo });
+                            // Assuming that there was an error when rendering the page, try to render again with ErrorBoundary
+                            context.dispatch(setPageErrorEvent(error));
+                            html = await htmlBuilder.flow();
+                        }
+                        const pageRenderError = context.getState(PageErrorStore);
+                        if (pageRenderError) {
+                            const status = pageRenderError.status || pageRenderError.httpStatus || 500;
+                            responseManager.setStatus(status);
+                        }
                         // Проставляем не кэширующие заголовки
                         // TODO Заменить после выкатки на прод и прохода всех тестов на cache-control = no-cache,no-store,max-age=0,must-revalidate
                         responseManager.setHeader('expires', '0');
@@ -747,12 +806,15 @@ RenderModule = RenderModule_1 = __decorate([
                     };
                 },
                 deps: {
+                    logger: LOGGER_TOKEN,
+                    requestManager: REQUEST_MANAGER_TOKEN,
                     responseManager: RESPONSE_MANAGER_TOKEN,
                     htmlBuilder: 'htmlBuilder',
+                    context: CONTEXT_TOKEN,
                 },
                 multi: true,
-            },
-            {
+            }),
+            provide({
                 provide: 'htmlBuilder',
                 useClass: PageBuilder,
                 deps: {
@@ -766,8 +828,8 @@ RenderModule = RenderModule_1 = __decorate([
                     userAgent: USER_AGENT_TOKEN,
                     htmlAttrs: HTML_ATTRS,
                 },
-            },
-            {
+            }),
+            provide({
                 provide: 'reactRender',
                 useClass: ReactRenderServer,
                 deps: {
@@ -777,15 +839,15 @@ RenderModule = RenderModule_1 = __decorate([
                     extendRender: { token: EXTEND_RENDER, optional: true },
                     di: DI_TOKEN,
                 },
-            },
-            {
+            }),
+            provide({
                 provide: 'htmlPageSchema',
                 useFactory: htmlPageSchemaFactory,
                 deps: {
                     htmlAttrs: HTML_ATTRS,
                 },
-            },
-            {
+            }),
+            provide({
                 provide: HTML_ATTRS,
                 useValue: {
                     target: 'html',
@@ -795,8 +857,8 @@ RenderModule = RenderModule_1 = __decorate([
                     },
                 },
                 multi: true,
-            },
-            {
+            }),
+            provide({
                 provide: HTML_ATTRS,
                 useValue: {
                     target: 'app',
@@ -805,11 +867,11 @@ RenderModule = RenderModule_1 = __decorate([
                     },
                 },
                 multi: true,
-            },
-            {
+            }),
+            provide({
                 provide: POLYFILL_CONDITION,
                 useValue: DEFAULT_POLYFILL_CONDITION,
-            },
+            }),
             provide({
                 // Включаем инлайнинг CSS-файлов размером до 40кб (до gzip) по умолчанию.
                 provide: RESOURCE_INLINE_OPTIONS,
@@ -818,8 +880,40 @@ RenderModule = RenderModule_1 = __decorate([
                     types: [ResourceType.style],
                 },
             }),
+            provide({
+                provide: WEB_APP_AFTER_INIT_TOKEN,
+                multi: true,
+                useFactory: ({ RootErrorBoundary, logger }) => {
+                    const log = logger('module-render:error-handler');
+                    return (app) => {
+                        app.use((err, req, res, next) => {
+                            if (!RootErrorBoundary) {
+                                return next(err);
+                            }
+                            let body;
+                            try {
+                                log.info({ event: 'render-root-boundary' });
+                                body = renderToString(createElement(RootErrorBoundary, { error: err, url: parse(req.url) }));
+                                res.status(err.httpStatus || err.status || 500);
+                                res.setHeader('Content-Type', 'text/html; charset=utf-8');
+                                res.setHeader('Content-Length', Buffer.byteLength(body, 'utf8'));
+                                res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+                                return res.send(body);
+                            }
+                            catch (e) {
+                                log.warn({ event: 'render-root-boundary-error', error: e });
+                                return next(err);
+                            }
+                        });
+                    };
+                },
+                deps: {
+                    RootErrorBoundary: { token: ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN, optional: true },
+                    logger: LOGGER_TOKEN,
+                },
+            }),
         ],
     })
 ], RenderModule);
 
-export { DEFAULT_POLYFILL_CONDITION, RenderModule };
+export { DEFAULT_POLYFILL_CONDITION, PageErrorStore, RenderModule, deserializeError, serializeError, setPageErrorEvent };

package/lib/server.js

@@ -3,15 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var React = require('react');
+var server$1 = require('react-dom/server');
 var core = require('@tramvai/core');
 var moduleCommon = require('@tramvai/module-common');
 var tokensRouter = require('@tramvai/tokens-router');
 var moduleClientHints = require('@tramvai/module-client-hints');
 var tokensRender = require('@tramvai/tokens-render');
 var dippy = require('@tinkoff/dippy');
+var tokensServer = require('@tramvai/tokens-server');
+var react = require('@tramvai/react');
+var url = require('@tinkoff/url');
 var isUndefined = require('@tinkoff/utils/is/undefined');
 var isEmpty = require('@tinkoff/utils/is/empty');
-var url = require('@tinkoff/url');
 var fetch = require('node-fetch');
 var startsWith = require('@tinkoff/utils/string/startsWith');
 var toArray = require('@tinkoff/utils/array/toArray');
@@ -28,14 +32,10 @@ var path = require('path');
 var each = require('@tinkoff/utils/array/each');
 var path$1 = require('@tinkoff/utils/object/path');
 var inline_inline = require('./server_inline.inline.js');
-var server$1 = require('react-dom/server');
-var React = require('react');
 var state = require('@tramvai/state');
-var react = require('@tramvai/react');
-var memoOne = require('@tinkoff/utils/function/memoize/one');
-var strictEqual = require('@tinkoff/utils/is/strictEqual');
 var moduleRouter = require('@tramvai/module-router');
 var layoutFactory = require('@tinkoff/layout-factory');
+var tokensCommon = require('@tramvai/tokens-common');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -57,6 +57,7 @@ function _interopNamespace(e) {
     return n;
 }
 
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var isUndefined__default = /*#__PURE__*/_interopDefaultLegacy(isUndefined);
 var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var fetch__default = /*#__PURE__*/_interopDefaultLegacy(fetch);
@@ -69,9 +70,6 @@ var uniq__default = /*#__PURE__*/_interopDefaultLegacy(uniq);
 var path__namespace = /*#__PURE__*/_interopNamespace(path);
 var each__default = /*#__PURE__*/_interopDefaultLegacy(each);
 var path__default = /*#__PURE__*/_interopDefaultLegacy(path$1);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var memoOne__default = /*#__PURE__*/_interopDefaultLegacy(memoOne);
-var strictEqual__default = /*#__PURE__*/_interopDefaultLegacy(strictEqual);
 
 const thirtySeconds = 1000 * 30;
 const getFileContentLength = async (url) => {
@@ -640,28 +638,58 @@ const htmlPageSchemaFactory = ({ htmlAttrs, }) => {
     ];
 };
 
+function serializeError(error) {
+    return {
+        ...error,
+        message: error.message,
+        stack: error.stack,
+    };
+}
+function deserializeError(serializedError) {
+    const error = new Error(serializedError.message);
+    Object.assign(error, serializedError);
+    return error;
+}
+const setPageErrorEvent = state.createEvent('setPageError');
+const initialState = null;
+const PageErrorStore = state.createReducer('pageError', initialState).on(setPageErrorEvent, (state, error) => error && serializeError(error));
+
+const PageErrorBoundary = (props) => {
+    const { children, fallback } = props;
+    const url = moduleRouter.useUrl();
+    const serializedError = state.useStore(PageErrorStore);
+    const error = React.useMemo(() => {
+        return serializedError && deserializeError(serializedError);
+    }, [serializedError]);
+    const errorHandlers = react.useDi({ token: react.ERROR_BOUNDARY_TOKEN, optional: true });
+    const fallbackFromDi = react.useDi({ token: react.ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, optional: true });
+    return (React__default["default"].createElement(react.UniversalErrorBoundary, { url: url, error: error, errorHandlers: errorHandlers, fallback: fallback, fallbackFromDi: fallbackFromDi }, children));
+};
 class RootComponent extends React.PureComponent {
     render() {
-        const { LayoutComponent, PageComponent, HeaderComponent, FooterComponent } = this.props;
+        const { LayoutComponent, PageComponent, HeaderComponent, FooterComponent, ErrorBoundaryComponent, } = this.props;
         return (React__default["default"].createElement(LayoutComponent, { Header: HeaderComponent, Footer: FooterComponent },
-            React__default["default"].createElement(PageComponent, null)));
+            React__default["default"].createElement(PageErrorBoundary, { fallback: ErrorBoundaryComponent },
+                React__default["default"].createElement(PageComponent, null))));
     }
 }
-const layoutWrapper = memoOne__default["default"](react.withError(), strictEqual__default["default"]);
-const pageWrapper = memoOne__default["default"](react.withError(), strictEqual__default["default"]);
-const Root = react.withError()(({ pageService }) => {
+const Root = ({ pageService }) => {
     const { config } = moduleRouter.useRoute();
     const { pageComponent } = config;
-    const PageComponent = pageService.getComponent(pageComponent);
+    let PageComponent = pageService.getComponent(pageComponent);
     if (!PageComponent) {
-        throw new Error(`Page component '${pageComponent}' not found`);
+        // eslint-disable-next-line react-perf/jsx-no-new-function-as-prop
+        PageComponent = () => {
+            throw new Error(`Page component '${pageComponent}' not found`);
+        };
     }
-    // Достаем компоненты для текущей страницы, либо берем default реализации
+    // Get components for current page, otherwise use a defaults
     const LayoutComponent = pageService.resolveComponentFromConfig('layout');
     const HeaderComponent = pageService.resolveComponentFromConfig('header');
     const FooterComponent = pageService.resolveComponentFromConfig('footer');
-    return (React__default["default"].createElement(RootComponent, { HeaderComponent: HeaderComponent, FooterComponent: FooterComponent, LayoutComponent: layoutWrapper(LayoutComponent), PageComponent: pageWrapper(PageComponent) }));
-});
+    const ErrorBoundaryComponent = pageService.resolveComponentFromConfig('errorBoundary');
+    return (React__default["default"].createElement(RootComponent, { HeaderComponent: HeaderComponent, FooterComponent: FooterComponent, LayoutComponent: LayoutComponent, PageComponent: PageComponent, ErrorBoundaryComponent: ErrorBoundaryComponent }));
+};
 
 function renderReact({ pageService, di }, context) {
     return (React__default["default"].createElement(state.Provider, { context: context },
@@ -720,6 +748,14 @@ LayoutModule = tslib.__decorate([
     })
 ], LayoutModule);
 
+const providers = [
+    core.provide({
+        provide: tokensCommon.COMBINE_REDUCERS,
+        multi: true,
+        useValue: PageErrorStore,
+    }),
+];
+
 var RenderModule_1;
 const DEFAULT_POLYFILL_CONDITION = '!window.Promise.prototype.finally || !window.URL || !window.URLSearchParams || !window.AbortController || !window.IntersectionObserver || !Object.fromEntries';
 exports.RenderModule = RenderModule_1 = class RenderModule {
@@ -741,14 +777,15 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
     core.Module({
         imports: [moduleClientHints.ClientHintsModule, LayoutModule],
         providers: [
-            {
+            ...providers,
+            core.provide({
                 provide: tokensRender.RESOURCES_REGISTRY,
                 useClass: ResourcesRegistry,
                 deps: {
                     resourceInliner: RESOURCE_INLINER,
                 },
-            },
-            {
+            }),
+            core.provide({
                 provide: RESOURCES_REGISTRY_CACHE,
                 scope: dippy.Scope.SINGLETON,
                 useFactory: ({ createCache }) => {
@@ -763,20 +800,40 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                 deps: {
                     createCache: moduleCommon.CREATE_CACHE_TOKEN,
                 },
-            },
-            {
+            }),
+            core.provide({
                 provide: RESOURCE_INLINER,
                 useClass: ResourcesInliner,
                 deps: {
                     resourcesRegistryCache: RESOURCES_REGISTRY_CACHE,
                     resourceInlineThreshold: { token: tokensRender.RESOURCE_INLINE_OPTIONS, optional: true },
                 },
-            },
-            {
+            }),
+            core.provide({
                 provide: core.commandLineListTokens.generatePage,
-                useFactory: ({ htmlBuilder, responseManager, }) => {
+                useFactory: ({ htmlBuilder, logger, requestManager, responseManager, context }) => {
+                    const log = logger('module-render');
                     return async function render() {
-                        const html = await htmlBuilder.flow();
+                        let html;
+                        try {
+                            html = await htmlBuilder.flow();
+                        }
+                        catch (error) {
+                            const requestInfo = {
+                                ip: requestManager.getClientIp(),
+                                requestId: requestManager.getHeader('x-request-id'),
+                                url: requestManager.getUrl(),
+                            };
+                            log.error({ event: 'page-render-error', error, requestInfo });
+                            // Assuming that there was an error when rendering the page, try to render again with ErrorBoundary
+                            context.dispatch(setPageErrorEvent(error));
+                            html = await htmlBuilder.flow();
+                        }
+                        const pageRenderError = context.getState(PageErrorStore);
+                        if (pageRenderError) {
+                            const status = pageRenderError.status || pageRenderError.httpStatus || 500;
+                            responseManager.setStatus(status);
+                        }
                         // Проставляем не кэширующие заголовки
                         // TODO Заменить после выкатки на прод и прохода всех тестов на cache-control = no-cache,no-store,max-age=0,must-revalidate
                         responseManager.setHeader('expires', '0');
@@ -786,12 +843,15 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                     };
                 },
                 deps: {
+                    logger: moduleCommon.LOGGER_TOKEN,
+                    requestManager: moduleCommon.REQUEST_MANAGER_TOKEN,
                     responseManager: moduleCommon.RESPONSE_MANAGER_TOKEN,
                     htmlBuilder: 'htmlBuilder',
+                    context: moduleCommon.CONTEXT_TOKEN,
                 },
                 multi: true,
-            },
-            {
+            }),
+            core.provide({
                 provide: 'htmlBuilder',
                 useClass: PageBuilder,
                 deps: {
@@ -805,8 +865,8 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                     userAgent: moduleClientHints.USER_AGENT_TOKEN,
                     htmlAttrs: tokensRender.HTML_ATTRS,
                 },
-            },
-            {
+            }),
+            core.provide({
                 provide: 'reactRender',
                 useClass: ReactRenderServer,
                 deps: {
@@ -816,15 +876,15 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                     extendRender: { token: tokensRender.EXTEND_RENDER, optional: true },
                     di: core.DI_TOKEN,
                 },
-            },
-            {
+            }),
+            core.provide({
                 provide: 'htmlPageSchema',
                 useFactory: htmlPageSchemaFactory,
                 deps: {
                     htmlAttrs: tokensRender.HTML_ATTRS,
                 },
-            },
-            {
+            }),
+            core.provide({
                 provide: tokensRender.HTML_ATTRS,
                 useValue: {
                     target: 'html',
@@ -834,8 +894,8 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                     },
                 },
                 multi: true,
-            },
-            {
+            }),
+            core.provide({
                 provide: tokensRender.HTML_ATTRS,
                 useValue: {
                     target: 'app',
@@ -844,11 +904,11 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                     },
                 },
                 multi: true,
-            },
-            {
+            }),
+            core.provide({
                 provide: tokensRender.POLYFILL_CONDITION,
                 useValue: DEFAULT_POLYFILL_CONDITION,
-            },
+            }),
             core.provide({
                 // Включаем инлайнинг CSS-файлов размером до 40кб (до gzip) по умолчанию.
                 provide: tokensRender.RESOURCE_INLINE_OPTIONS,
@@ -857,11 +917,47 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                     types: [tokensRender.ResourceType.style],
                 },
             }),
+            core.provide({
+                provide: tokensServer.WEB_APP_AFTER_INIT_TOKEN,
+                multi: true,
+                useFactory: ({ RootErrorBoundary, logger }) => {
+                    const log = logger('module-render:error-handler');
+                    return (app) => {
+                        app.use((err, req, res, next) => {
+                            if (!RootErrorBoundary) {
+                                return next(err);
+                            }
+                            let body;
+                            try {
+                                log.info({ event: 'render-root-boundary' });
+                                body = server$1.renderToString(React.createElement(RootErrorBoundary, { error: err, url: url.parse(req.url) }));
+                                res.status(err.httpStatus || err.status || 500);
+                                res.setHeader('Content-Type', 'text/html; charset=utf-8');
+                                res.setHeader('Content-Length', Buffer.byteLength(body, 'utf8'));
+                                res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+                                return res.send(body);
+                            }
+                            catch (e) {
+                                log.warn({ event: 'render-root-boundary-error', error: e });
+                                return next(err);
+                            }
+                        });
+                    };
+                },
+                deps: {
+                    RootErrorBoundary: { token: react.ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN, optional: true },
+                    logger: moduleCommon.LOGGER_TOKEN,
+                },
+            }),
         ],
     })
 ], exports.RenderModule);
 
 exports.DEFAULT_POLYFILL_CONDITION = DEFAULT_POLYFILL_CONDITION;
+exports.PageErrorStore = PageErrorStore;
+exports.deserializeError = deserializeError;
+exports.serializeError = serializeError;
+exports.setPageErrorEvent = setPageErrorEvent;
 Object.keys(tokensRender).forEach(function (k) {
     if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
         enumerable: true,

package/lib/shared/pageErrorStore.d.ts

@@ -0,0 +1,14 @@
+declare type AnyError = Error & {
+    [key: string]: any;
+};
+export interface SerializedError {
+    message: string;
+    stack?: string;
+    [key: string]: any;
+}
+export declare function serializeError(error: AnyError): SerializedError;
+export declare function deserializeError(serializedError: SerializedError): AnyError;
+export declare type IPageErrorStore = SerializedError | null;
+export declare const setPageErrorEvent: import("@tramvai/types-actions-state-context").EventCreator1<AnyError, AnyError>;
+export declare const PageErrorStore: import("@tramvai/state").Reducer<SerializedError, "pageError">;
+export {};

package/lib/shared/providers.d.ts

@@ -0,0 +1 @@
+export declare const providers: import("@tramvai/core").Provider<unknown, any>[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-render",
-  "version": "1.55.4",
+  "version": "1.58.0",
   "description": "",
   "browser": "lib/browser.js",
   "main": "lib/server.js",
@@ -24,31 +24,36 @@
     "@tinkoff/htmlpagebuilder": "0.4.22",
     "@tinkoff/layout-factory": "0.2.28",
     "@tinkoff/url": "0.7.37",
-    "@tinkoff/user-agent": "0.3.232",
-    "@tramvai/module-client-hints": "1.55.4",
-    "@tramvai/module-router": "1.55.4",
-    "@tramvai/react": "1.55.4",
+    "@tinkoff/user-agent": "0.3.238",
+    "@tramvai/module-client-hints": "1.58.0",
+    "@tramvai/module-router": "1.58.0",
+    "@tramvai/react": "1.58.0",
     "@tramvai/safe-strings": "0.4.3",
-    "@tramvai/tokens-render": "1.55.4",
-    "@tramvai/experiments": "1.55.4",
+    "@tramvai/tokens-render": "1.58.0",
+    "@tramvai/experiments": "1.58.0",
     "@types/loadable__server": "^5.12.6",
     "node-fetch": "^2.6.1"
   },
   "peerDependencies": {
     "@tinkoff/dippy": "0.7.38",
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/cli": "1.55.4",
-    "@tramvai/core": "1.55.4",
-    "@tramvai/module-common": "1.55.4",
-    "@tramvai/state": "1.55.4",
-    "@tramvai/test-helpers": "1.55.4",
-    "@tramvai/tokens-common": "1.55.4",
-    "@tramvai/tokens-router": "1.55.4",
+    "@tramvai/cli": "1.58.0",
+    "@tramvai/core": "1.58.0",
+    "@tramvai/module-common": "1.58.0",
+    "@tramvai/state": "1.58.0",
+    "@tramvai/test-helpers": "1.58.0",
+    "@tramvai/tokens-common": "1.58.0",
+    "@tramvai/tokens-router": "1.58.0",
+    "@tramvai/tokens-server": "1.58.0",
+    "express": "^4.17.1",
     "prop-types": "^15.6.2",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "tslib": "^2.0.3"
   },
+  "devDependencies": {
+    "@types/express": "^4.17.9"
+  },
   "gitHead": "8e826a214c87b188fc4d254cdd8f2a2b2c55f3a8",
   "module": "lib/server.es.js",
   "license": "Apache-2.0"