@tramvai/module-render 2.20.0 → 2.21.1

package/lib/server.es.js

@@ -824,24 +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: 'send-server-error',
-                                message: 'Page render error, switch to fallback',
-                                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);
                         }
                         // Проставляем не кэширующие заголовки
@@ -940,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

@@ -860,24 +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: 'send-server-error',
-                                message: 'Page render error, switch to fallback',
-                                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);
                         }
                         // Проставляем не кэширующие заголовки
@@ -976,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,13 +1,15 @@
 {
   "name": "@tramvai/module-render",
-  "version": "2.20.0",
+  "version": "2.21.1",
   "description": "",
   "browser": "lib/browser.js",
   "main": "lib/server.js",
   "typings": "lib/server.d.ts",
   "files": [
     "lib",
-    "__migrations__"
+    "__migrations__",
+    "tests.js",
+    "tests.d.ts"
   ],
   "sideEffects": false,
   "repository": {
@@ -24,13 +26,13 @@
     "@tinkoff/htmlpagebuilder": "0.5.2",
     "@tinkoff/layout-factory": "0.3.2",
     "@tinkoff/url": "0.8.2",
-    "@tinkoff/user-agent": "0.4.51",
-    "@tramvai/module-client-hints": "2.20.0",
-    "@tramvai/module-router": "2.20.0",
-    "@tramvai/react": "2.20.0",
+    "@tinkoff/user-agent": "0.4.54",
+    "@tramvai/module-client-hints": "2.21.1",
+    "@tramvai/module-router": "2.21.1",
+    "@tramvai/react": "2.21.1",
     "@tramvai/safe-strings": "0.5.2",
-    "@tramvai/tokens-render": "2.20.0",
-    "@tramvai/experiments": "2.20.0",
+    "@tramvai/tokens-render": "2.21.1",
+    "@tramvai/experiments": "2.21.1",
     "@types/loadable__server": "^5.12.6",
     "node-fetch": "^2.6.1"
   },
@@ -38,14 +40,14 @@
     "@tinkoff/dippy": "0.8.2",
     "@tinkoff/utils": "^2.1.2",
     "@tinkoff/react-hooks": "0.1.2",
-    "@tramvai/cli": "2.20.0",
-    "@tramvai/core": "2.20.0",
-    "@tramvai/module-common": "2.20.0",
-    "@tramvai/state": "2.20.0",
-    "@tramvai/test-helpers": "2.20.0",
-    "@tramvai/tokens-common": "2.20.0",
-    "@tramvai/tokens-router": "2.20.0",
-    "@tramvai/tokens-server-private": "2.20.0",
+    "@tramvai/cli": "2.21.1",
+    "@tramvai/core": "2.21.1",
+    "@tramvai/module-common": "2.21.1",
+    "@tramvai/state": "2.21.1",
+    "@tramvai/test-helpers": "2.21.1",
+    "@tramvai/tokens-common": "2.21.1",
+    "@tramvai/tokens-router": "2.21.1",
+    "@tramvai/tokens-server-private": "2.21.1",
     "express": "^4.17.1",
     "prop-types": "^15.6.2",
     "react": ">=16.14.0",

package/tests.d.ts

@@ -0,0 +1,13 @@
+import { getDiWrapper } from "@tramvai/test-helpers";
+type Options = Parameters<typeof getDiWrapper>[0];
+declare const testPageResources: (options: Options) => {
+    render: () => {
+        parsed: import("node-html-parser").HTMLElement;
+        body: string;
+        head: string;
+        application: string;
+    };
+    di: import("@tinkoff/dippy").Container;
+    runLine: (line: import("@tinkoff/dippy").MultiTokenInterface<import("@tramvai/core").Command>) => Promise<any[]>;
+};
+export { testPageResources };

package/tests.js

@@ -0,0 +1,267 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var flatten = require('@tinkoff/utils/array/flatten');
+var testHelpers = require('@tramvai/test-helpers');
+var core = require('@tramvai/core');
+var tokensRender = require('@tramvai/tokens-render');
+var htmlpagebuilder = require('@tinkoff/htmlpagebuilder');
+var toArray = require('@tinkoff/utils/array/toArray');
+require('@tinkoff/utils/is/undefined');
+require('@tinkoff/utils/is/empty');
+require('@tinkoff/url');
+require('node-fetch');
+require('@tinkoff/utils/string/startsWith');
+var dippy = require('@tinkoff/dippy');
+require('@tramvai/safe-strings');
+require('@loadable/server');
+require('@tinkoff/utils/object/has');
+require('@tinkoff/utils/array/last');
+require('@tramvai/experiments');
+require('@tinkoff/utils/array/uniq');
+var path = require('path');
+require('@tinkoff/utils/array/each');
+require('@tinkoff/utils/object/path');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return n;
+}
+
+var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
+var toArray__default = /*#__PURE__*/_interopDefaultLegacy(toArray);
+var path__namespace = /*#__PURE__*/_interopNamespace(path);
+
+class ResourcesRegistry {
+    constructor({ resourceInliner }) {
+        this.resources = new Set();
+        this.resourceInliner = resourceInliner;
+    }
+    register(resourceOrResources) {
+        toArray__default["default"](resourceOrResources).forEach((resource) => {
+            this.resources.add(resource);
+        });
+    }
+    getPageResources() {
+        return Array.from(this.resources.values())
+            .reduce((acc, resource) => {
+            if (this.resourceInliner.shouldInline(resource)) {
+                Array.prototype.push.apply(acc, this.resourceInliner.inlineResource(resource));
+            }
+            else {
+                acc.push(resource);
+            }
+            return acc;
+        }, [])
+            .filter((resource) => this.resourceInliner.shouldAddResource(resource));
+    }
+}
+
+process.env.NODE_ENV === 'development' &&
+    (process.env.ASSETS_PREFIX === 'static' || !process.env.ASSETS_PREFIX)
+    ? `http://localhost:${process.env.PORT_STATIC}/dist/`
+    : process.env.ASSETS_PREFIX;
+
+/**
+ * @description
+ * Инлайнер ресурсов - используется на сервере для регистрации файлов, которые должны быть вставлены
+ * в итоговую html-страницу в виде ссылки на файл или заинлайнеными полностью
+ */
+const RESOURCE_INLINER = dippy.createToken('resourceInliner');
+/**
+ * @description
+ * Кэш загруженных ресурсов.
+ */
+dippy.createToken('resourcesRegistryCache');
+
+const requireFunc = 
+// @ts-ignore
+typeof __webpack_require__ === 'function' ? __non_webpack_require__ : require;
+
+let appConfig;
+try {
+    appConfig = require('@tramvai/cli/lib/external/config').appConfig;
+}
+catch (e) { }
+if (process.env.NODE_ENV === 'development') ;
+if (process.env.NODE_ENV === 'test') ;
+if (process.env.NODE_ENV === 'production') {
+    const SEARCH_PATHS = [process.cwd(), __dirname];
+    const webpackStats = (fileName) => {
+        let stats;
+        for (const dir of SEARCH_PATHS) {
+            try {
+                const statsPath = path__namespace.resolve(dir, fileName);
+                stats = requireFunc(statsPath);
+                break;
+            }
+            catch (e) {
+                // ignore errors as this function is used to load stats for several optional destinations
+                // and these destinations may not have stats file
+            }
+        }
+        if (!stats) {
+            return;
+        }
+        if (!process.env.ASSETS_PREFIX) {
+            if (process.env.STATIC_PREFIX) {
+                throw new Error('Required env variable "ASSETS_PREFIX" is not set. Instead of using "STATIC_PREFIX" env please define "ASSETS_PREFIX: STATIC_PREFIX + /compiled"');
+            }
+            throw new Error('Required env variable "ASSETS_PREFIX" is not set');
+        }
+        return {
+            ...stats,
+            publicPath: process.env.ASSETS_PREFIX,
+        };
+    };
+    const statsLegacy = webpackStats('stats.json');
+    webpackStats('stats.modern.json') || statsLegacy;
+    if (!statsLegacy) {
+        throw new Error(`Cannot find stats.json.
+  It should be placed in one of the next places:
+    ${SEARCH_PATHS.join('\n\t')}
+  In case it happens on deployment:
+    - In case you are using two independent jobs for building app
+      - Either do not split build command by two independent jobs and use one common job with "tramvai build" command without --buildType
+      - Or copy stats.json (and stats.modern.json if present) file from client build output to server output by yourself in your CI
+    - Otherwise report issue to tramvai team
+  In case it happens locally:
+    - prefer to use command "tramvai start-prod" to test prod-build locally
+    - copy stats.json next to built server.js file
+`);
+    }
+}
+
+const formatAttributes = (htmlAttrs, target) => {
+    if (!htmlAttrs) {
+        return '';
+    }
+    const targetAttrs = htmlAttrs.filter((item) => item.target === target);
+    const collectedAttrs = targetAttrs.reduce((acc, item) => ({ ...acc, ...item.attrs }), {});
+    const attrsString = Object.keys(collectedAttrs).reduce((acc, name) => {
+        if (collectedAttrs[name] === true) {
+            return `${acc} ${name}`;
+        }
+        return `${acc} ${name}="${collectedAttrs[name]}"`;
+    }, '');
+    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;
+}, {});
+/* 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, }) => {
+    return [
+        htmlpagebuilder.staticRender('<!DOCTYPE html>'),
+        htmlpagebuilder.staticRender(`<html ${formatAttributes(htmlAttrs, 'html')}>`),
+        htmlpagebuilder.staticRender('<head>'),
+        htmlpagebuilder.staticRender('<meta charset="UTF-8">'),
+        htmlpagebuilder.dynamicRender(HEAD_META),
+        htmlpagebuilder.dynamicRender(HEAD_PERFORMANCE),
+        htmlpagebuilder.dynamicRender(HEAD_CORE_STYLES),
+        htmlpagebuilder.dynamicRender(HEAD_POLYFILLS),
+        htmlpagebuilder.dynamicRender(HEAD_DYNAMIC_SCRIPTS),
+        htmlpagebuilder.dynamicRender(HEAD_CORE_SCRIPTS),
+        htmlpagebuilder.dynamicRender(HEAD_ANALYTICS),
+        htmlpagebuilder.dynamicRender(HEAD_ICONS),
+        htmlpagebuilder.staticRender('</head>'),
+        htmlpagebuilder.staticRender(`<body ${formatAttributes(htmlAttrs, 'body')}>`),
+        htmlpagebuilder.dynamicRender(BODY_START),
+        // react app
+        htmlpagebuilder.dynamicRender(REACT_RENDER),
+        htmlpagebuilder.dynamicRender(BODY_END),
+        htmlpagebuilder.dynamicRender(BODY_TAIL_ANALYTICS),
+        htmlpagebuilder.dynamicRender(BODY_TAIL),
+        htmlpagebuilder.staticRender('</body>'),
+        htmlpagebuilder.staticRender('</html>'),
+    ];
+};
+
+const testPageResources = (options) => {
+    var _a;
+    const { modules, providers = [] } = options;
+    const { di, runLine } = testHelpers.getDiWrapper({
+        di: options.di,
+        modules,
+        providers: [
+            {
+                provide: 'htmlPageSchema',
+                useFactory: htmlPageSchemaFactory,
+                deps: {
+                    htmlAttrs: tokensRender.HTML_ATTRS,
+                },
+            },
+            {
+                provide: tokensRender.HTML_ATTRS,
+                useValue: {
+                    target: 'html',
+                    attrs: {
+                        class: 'no-js',
+                        lang: 'ru',
+                    },
+                },
+                multi: true,
+            },
+            ...providers,
+            core.provide({
+                provide: tokensRender.RESOURCES_REGISTRY,
+                useClass: ResourcesRegistry,
+                deps: {
+                    resourceInliner: RESOURCE_INLINER,
+                },
+            }),
+            core.provide({
+                provide: RESOURCE_INLINER,
+                useValue: {
+                    shouldInline() {
+                        return false;
+                    },
+                    shouldAddResource() {
+                        return true;
+                    },
+                    inlineResource() {
+                        return [];
+                    },
+                },
+            }),
+        ],
+    });
+    const renderSlots = flatten__default["default"]((_a = di.get({ token: tokensRender.RENDER_SLOTS, optional: true })) !== null && _a !== void 0 ? _a : []);
+    const resourcesRegistry = di.get(tokensRender.RESOURCES_REGISTRY);
+    const render = () => {
+        const rawHtml = htmlpagebuilder.buildPage({
+            slotHandlers: mapResourcesToSlots([...renderSlots, ...resourcesRegistry.getPageResources()]),
+            description: di.get('htmlPageSchema'),
+        });
+        return testHelpers.parseHtml(rawHtml, {});
+    };
+    return {
+        render,
+        di,
+        runLine,
+    };
+};
+
+exports.testPageResources = testPageResources;