@tramvai/module-render 2.10.2 → 2.20.1

package/lib/browser.js

@@ -83,7 +83,7 @@ const ExecuteRenderCallback = ({ children, callback, }) => {
     return children;
 };
 const renderer = ({ element, container, callback, log }) => {
-    if (process.env.__TRAMVAI_CONCURRENT_FEATURES !== 'false' && typeof hydrateRoot === 'function') {
+    if (process.env.__TRAMVAI_CONCURRENT_FEATURES && typeof hydrateRoot === 'function') {
         const wrappedElement = createElement(ExecuteRenderCallback, { callback }, element);
         return hydrateRoot(container, wrappedElement, {
             onRecoverableError: (error, errorInfo) => {

package/lib/server/PageBuilder.d.ts

@@ -9,7 +9,9 @@ export declare class PageBuilder {
     private htmlAttrs;
     private polyfillCondition;
     private modern;
-    constructor({ renderSlots, pageService, resourcesRegistry, context, reactRender, htmlPageSchema, polyfillCondition, htmlAttrs, modern, }: {
+    private renderFlowAfter;
+    private log;
+    constructor({ renderSlots, pageService, resourcesRegistry, context, reactRender, htmlPageSchema, polyfillCondition, htmlAttrs, modern, renderFlowAfter, logger, }: {
         renderSlots: any;
         pageService: any;
         resourcesRegistry: any;
@@ -19,6 +21,8 @@ export declare class PageBuilder {
         polyfillCondition: any;
         htmlAttrs: any;
         modern: any;
+        renderFlowAfter: any;
+        logger: any;
     });
     flow(): Promise<string>;
     dehydrateState(): void;

package/lib/server.es.js

@@ -5,7 +5,7 @@ import { Module, provide, commandLineListTokens, DI_TOKEN } from '@tramvai/core'
 import { COMBINE_REDUCERS, CREATE_CACHE_TOKEN, LOGGER_TOKEN, REQUEST_MANAGER_TOKEN, RESPONSE_MANAGER_TOKEN, CONTEXT_TOKEN } from '@tramvai/tokens-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, TRAMVAI_RENDER_MODE, RESOURCES_REGISTRY, RESOURCE_INLINE_OPTIONS, RENDER_SLOTS, POLYFILL_CONDITION, HTML_ATTRS, CUSTOM_RENDER, EXTEND_RENDER } from '@tramvai/tokens-render';
+import { ResourceType, ResourceSlot, DEFAULT_LAYOUT_COMPONENT, LAYOUT_OPTIONS, DEFAULT_FOOTER_COMPONENT, DEFAULT_HEADER_COMPONENT, TRAMVAI_RENDER_MODE, RESOURCES_REGISTRY, RESOURCE_INLINE_OPTIONS, RENDER_SLOTS, POLYFILL_CONDITION, HTML_ATTRS, RENDER_FLOW_AFTER_TOKEN, CUSTOM_RENDER, EXTEND_RENDER } from '@tramvai/tokens-render';
 export * from '@tramvai/tokens-render';
 import { createToken, Scope } from '@tinkoff/dippy';
 import { WEB_FASTIFY_APP_BEFORE_ERROR_TOKEN } from '@tramvai/tokens-server-private';
@@ -537,13 +537,14 @@ const formatAttributes = (htmlAttrs, target) => {
     return attrsString.trim();
 };
 
+/* eslint-disable sort-class-members/sort-class-members */
 const mapResourcesToSlots = (resources) => resources.reduce((acc, resource) => {
     const { slot } = resource;
     acc[slot] = Array.isArray(acc[slot]) ? [...acc[slot], resource] : [resource];
     return acc;
 }, {});
 class PageBuilder {
-    constructor({ renderSlots, pageService, resourcesRegistry, context, reactRender, htmlPageSchema, polyfillCondition, htmlAttrs, modern, }) {
+    constructor({ renderSlots, pageService, resourcesRegistry, context, reactRender, htmlPageSchema, polyfillCondition, htmlAttrs, modern, renderFlowAfter, logger, }) {
         this.htmlAttrs = htmlAttrs;
         this.renderSlots = flatten(renderSlots || []);
         this.pageService = pageService;
@@ -553,12 +554,17 @@ class PageBuilder {
         this.htmlPageSchema = htmlPageSchema;
         this.polyfillCondition = polyfillCondition;
         this.modern = modern;
+        this.renderFlowAfter = renderFlowAfter || [];
+        this.log = logger('page-builder');
     }
     async flow() {
         const stats = await fetchWebpackStats({ modern: this.modern });
         const extractor = new ChunkExtractor({ stats, entrypoints: [] });
         // самым первым рендерим приложение, так как нужно вытащить информацию о используемых данных компонентами
         await this.renderApp(extractor);
+        await Promise.all(this.renderFlowAfter.map((callback) => callback().catch((error) => {
+            this.log.warn({ event: 'render-flow-after-error', callback, error });
+        })));
         this.dehydrateState();
         // загружаем информацию и зависимость  для текущего бандла и странице
         await this.fetchChunksInfo(extractor);
@@ -604,6 +610,7 @@ class PageBuilder {
         });
     }
 }
+/* eslint-enable sort-class-members/sort-class-members */
 
 const { REACT_RENDER, HEAD_CORE_SCRIPTS, HEAD_DYNAMIC_SCRIPTS, HEAD_META, HEAD_POLYFILLS, HEAD_CORE_STYLES, HEAD_PERFORMANCE, HEAD_ANALYTICS, BODY_START, BODY_END, HEAD_ICONS, BODY_TAIL_ANALYTICS, BODY_TAIL, } = ResourceSlot;
 const htmlPageSchemaFactory = ({ htmlAttrs, }) => {
@@ -817,19 +824,38 @@ RenderModule = RenderModule_1 = __decorate([
                             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();
+                            // assuming that there was an error when rendering the page, try to render again with ErrorBoundary
+                            try {
+                                log.info({ event: 'render-page-boundary-start' });
+                                context.dispatch(setPageErrorEvent(error));
+                                html = await htmlBuilder.flow();
+                                log.info({ event: 'render-page-boundary-success' });
+                            }
+                            catch (e) {
+                                log.warn({ event: 'render-page-boundary-error', error: e });
+                                // pass page render error to default error handler,
+                                // send-server-error event will be logged with this error
+                                throw error;
+                            }
                         }
                         const pageRenderError = context.getState(PageErrorStore);
+                        // log send-server-error only after successful Page Boundary render,
+                        // otherwise this event will be logged in default error handler
                         if (pageRenderError) {
                             const status = pageRenderError.status || pageRenderError.httpStatus || 500;
+                            if (status >= 500) {
+                                const requestInfo = {
+                                    ip: requestManager.getClientIp(),
+                                    requestId: requestManager.getHeader('x-request-id'),
+                                    url: requestManager.getUrl(),
+                                };
+                                log.error({
+                                    event: 'send-server-error',
+                                    message: 'Page render error, switch to page boundary',
+                                    error: deserializeError(pageRenderError),
+                                    requestInfo,
+                                });
+                            }
                             responseManager.setStatus(status);
                         }
                         // Проставляем не кэширующие заголовки
@@ -862,6 +888,8 @@ RenderModule = RenderModule_1 = __decorate([
                     polyfillCondition: POLYFILL_CONDITION,
                     htmlAttrs: HTML_ATTRS,
                     modern: 'modernSatisfies',
+                    renderFlowAfter: { token: RENDER_FLOW_AFTER_TOKEN, optional: true },
+                    logger: LOGGER_TOKEN,
                 },
             }),
             provide({
@@ -926,9 +954,26 @@ RenderModule = RenderModule_1 = __decorate([
                         }
                         let body;
                         try {
-                            log.info({ event: 'render-root-boundary' });
+                            log.info({ event: 'render-root-boundary-start' });
                             body = renderToString(createElement(RootErrorBoundary, { error, url: parse(request.url) }));
-                            reply.status(error.httpStatus || error.status || 500);
+                            log.info({ event: 'render-root-boundary-success' });
+                            const status = error.status || error.httpStatus || 500;
+                            // log send-server-error only after successful Root Boundary render,
+                            // otherwise this event will be logged in default error handler
+                            if (status >= 500) {
+                                const requestInfo = {
+                                    ip: request.headers['x-real-ip'],
+                                    requestId: request.headers['x-request-id'],
+                                    url: request.url,
+                                };
+                                log.error({
+                                    event: 'send-server-error',
+                                    message: 'Page render error, switch to root boundary',
+                                    error,
+                                    requestInfo,
+                                });
+                            }
+                            reply.status(status);
                             reply.header('Content-Type', 'text/html; charset=utf-8');
                             reply.header('Content-Length', Buffer.byteLength(body, 'utf8'));
                             reply.header('Cache-Control', 'no-cache, no-store, must-revalidate');

package/lib/server.js

@@ -573,13 +573,14 @@ const formatAttributes = (htmlAttrs, target) => {
     return attrsString.trim();
 };
 
+/* eslint-disable sort-class-members/sort-class-members */
 const mapResourcesToSlots = (resources) => resources.reduce((acc, resource) => {
     const { slot } = resource;
     acc[slot] = Array.isArray(acc[slot]) ? [...acc[slot], resource] : [resource];
     return acc;
 }, {});
 class PageBuilder {
-    constructor({ renderSlots, pageService, resourcesRegistry, context, reactRender, htmlPageSchema, polyfillCondition, htmlAttrs, modern, }) {
+    constructor({ renderSlots, pageService, resourcesRegistry, context, reactRender, htmlPageSchema, polyfillCondition, htmlAttrs, modern, renderFlowAfter, logger, }) {
         this.htmlAttrs = htmlAttrs;
         this.renderSlots = flatten__default["default"](renderSlots || []);
         this.pageService = pageService;
@@ -589,12 +590,17 @@ class PageBuilder {
         this.htmlPageSchema = htmlPageSchema;
         this.polyfillCondition = polyfillCondition;
         this.modern = modern;
+        this.renderFlowAfter = renderFlowAfter || [];
+        this.log = logger('page-builder');
     }
     async flow() {
         const stats = await fetchWebpackStats({ modern: this.modern });
         const extractor = new server.ChunkExtractor({ stats, entrypoints: [] });
         // самым первым рендерим приложение, так как нужно вытащить информацию о используемых данных компонентами
         await this.renderApp(extractor);
+        await Promise.all(this.renderFlowAfter.map((callback) => callback().catch((error) => {
+            this.log.warn({ event: 'render-flow-after-error', callback, error });
+        })));
         this.dehydrateState();
         // загружаем информацию и зависимость  для текущего бандла и странице
         await this.fetchChunksInfo(extractor);
@@ -640,6 +646,7 @@ class PageBuilder {
         });
     }
 }
+/* eslint-enable sort-class-members/sort-class-members */
 
 const { REACT_RENDER, HEAD_CORE_SCRIPTS, HEAD_DYNAMIC_SCRIPTS, HEAD_META, HEAD_POLYFILLS, HEAD_CORE_STYLES, HEAD_PERFORMANCE, HEAD_ANALYTICS, BODY_START, BODY_END, HEAD_ICONS, BODY_TAIL_ANALYTICS, BODY_TAIL, } = tokensRender.ResourceSlot;
 const htmlPageSchemaFactory = ({ htmlAttrs, }) => {
@@ -853,19 +860,38 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                             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();
+                            // assuming that there was an error when rendering the page, try to render again with ErrorBoundary
+                            try {
+                                log.info({ event: 'render-page-boundary-start' });
+                                context.dispatch(setPageErrorEvent(error));
+                                html = await htmlBuilder.flow();
+                                log.info({ event: 'render-page-boundary-success' });
+                            }
+                            catch (e) {
+                                log.warn({ event: 'render-page-boundary-error', error: e });
+                                // pass page render error to default error handler,
+                                // send-server-error event will be logged with this error
+                                throw error;
+                            }
                         }
                         const pageRenderError = context.getState(PageErrorStore);
+                        // log send-server-error only after successful Page Boundary render,
+                        // otherwise this event will be logged in default error handler
                         if (pageRenderError) {
                             const status = pageRenderError.status || pageRenderError.httpStatus || 500;
+                            if (status >= 500) {
+                                const requestInfo = {
+                                    ip: requestManager.getClientIp(),
+                                    requestId: requestManager.getHeader('x-request-id'),
+                                    url: requestManager.getUrl(),
+                                };
+                                log.error({
+                                    event: 'send-server-error',
+                                    message: 'Page render error, switch to page boundary',
+                                    error: deserializeError(pageRenderError),
+                                    requestInfo,
+                                });
+                            }
                             responseManager.setStatus(status);
                         }
                         // Проставляем не кэширующие заголовки
@@ -898,6 +924,8 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                     polyfillCondition: tokensRender.POLYFILL_CONDITION,
                     htmlAttrs: tokensRender.HTML_ATTRS,
                     modern: 'modernSatisfies',
+                    renderFlowAfter: { token: tokensRender.RENDER_FLOW_AFTER_TOKEN, optional: true },
+                    logger: tokensCommon.LOGGER_TOKEN,
                 },
             }),
             core.provide({
@@ -962,9 +990,26 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                         }
                         let body;
                         try {
-                            log.info({ event: 'render-root-boundary' });
+                            log.info({ event: 'render-root-boundary-start' });
                             body = server$1.renderToString(react.createElement(RootErrorBoundary, { error, url: url.parse(request.url) }));
-                            reply.status(error.httpStatus || error.status || 500);
+                            log.info({ event: 'render-root-boundary-success' });
+                            const status = error.status || error.httpStatus || 500;
+                            // log send-server-error only after successful Root Boundary render,
+                            // otherwise this event will be logged in default error handler
+                            if (status >= 500) {
+                                const requestInfo = {
+                                    ip: request.headers['x-real-ip'],
+                                    requestId: request.headers['x-request-id'],
+                                    url: request.url,
+                                };
+                                log.error({
+                                    event: 'send-server-error',
+                                    message: 'Page render error, switch to root boundary',
+                                    error,
+                                    requestInfo,
+                                });
+                            }
+                            reply.status(status);
                             reply.header('Content-Type', 'text/html; charset=utf-8');
                             reply.header('Content-Length', Buffer.byteLength(body, 'utf8'));
                             reply.header('Cache-Control', 'no-cache, no-store, must-revalidate');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-render",
-  "version": "2.10.2",
+  "version": "2.20.1",
   "description": "",
   "browser": "lib/browser.js",
   "main": "lib/server.js",
@@ -21,31 +21,31 @@
   },
   "dependencies": {
     "@loadable/server": "^5.15.0",
-    "@tinkoff/htmlpagebuilder": "0.4.24",
-    "@tinkoff/layout-factory": "0.2.31",
-    "@tinkoff/url": "0.7.39",
-    "@tinkoff/user-agent": "0.4.33",
-    "@tramvai/module-client-hints": "2.10.2",
-    "@tramvai/module-router": "2.10.2",
-    "@tramvai/react": "2.10.2",
-    "@tramvai/safe-strings": "0.4.5",
-    "@tramvai/tokens-render": "2.10.2",
-    "@tramvai/experiments": "2.10.2",
+    "@tinkoff/htmlpagebuilder": "0.5.2",
+    "@tinkoff/layout-factory": "0.3.2",
+    "@tinkoff/url": "0.8.2",
+    "@tinkoff/user-agent": "0.4.52",
+    "@tramvai/module-client-hints": "2.20.1",
+    "@tramvai/module-router": "2.20.1",
+    "@tramvai/react": "2.20.1",
+    "@tramvai/safe-strings": "0.5.2",
+    "@tramvai/tokens-render": "2.20.1",
+    "@tramvai/experiments": "2.20.1",
     "@types/loadable__server": "^5.12.6",
     "node-fetch": "^2.6.1"
   },
   "peerDependencies": {
-    "@tinkoff/dippy": "0.7.45",
+    "@tinkoff/dippy": "0.8.2",
     "@tinkoff/utils": "^2.1.2",
-    "@tinkoff/react-hooks": "0.0.27",
-    "@tramvai/cli": "2.10.2",
-    "@tramvai/core": "2.10.2",
-    "@tramvai/module-common": "2.10.2",
-    "@tramvai/state": "2.10.2",
-    "@tramvai/test-helpers": "2.10.2",
-    "@tramvai/tokens-common": "2.10.2",
-    "@tramvai/tokens-router": "2.10.2",
-    "@tramvai/tokens-server-private": "2.10.2",
+    "@tinkoff/react-hooks": "0.1.2",
+    "@tramvai/cli": "2.20.1",
+    "@tramvai/core": "2.20.1",
+    "@tramvai/module-common": "2.20.1",
+    "@tramvai/state": "2.20.1",
+    "@tramvai/test-helpers": "2.20.1",
+    "@tramvai/tokens-common": "2.20.1",
+    "@tramvai/tokens-router": "2.20.1",
+    "@tramvai/tokens-server-private": "2.20.1",
     "express": "^4.17.1",
     "prop-types": "^15.6.2",
     "react": ">=16.14.0",