@tramvai/module-server 2.89.2 → 2.90.0

package/lib/server/error.d.ts

@@ -1,11 +1,11 @@
 import type { FastifyInstance } from 'fastify';
 import type { LOGGER_TOKEN } from '@tramvai/module-common';
+import type { FETCH_WEBPACK_STATS_TOKEN } from '@tramvai/tokens-render';
 import type { WEB_FASTIFY_APP_AFTER_ERROR_TOKEN, WEB_FASTIFY_APP_BEFORE_ERROR_TOKEN } from '@tramvai/tokens-server-private';
 import type { ExtractDependencyType } from '@tinkoff/dippy';
-import type { ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN } from '@tramvai/react';
-export declare const errorHandler: (app: FastifyInstance, { log, beforeError, afterError, RootErrorBoundary, }: {
+export declare const errorHandler: (app: FastifyInstance, { log, beforeError, afterError, fetchWebpackStats, }: {
     log: ReturnType<typeof LOGGER_TOKEN>;
     beforeError: ExtractDependencyType<typeof WEB_FASTIFY_APP_BEFORE_ERROR_TOKEN>;
     afterError: ExtractDependencyType<typeof WEB_FASTIFY_APP_AFTER_ERROR_TOKEN>;
-    RootErrorBoundary?: ExtractDependencyType<typeof ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN>;
+    fetchWebpackStats: ExtractDependencyType<typeof FETCH_WEBPACK_STATS_TOKEN>;
 }) => void;

package/lib/server/error.es.js

@@ -3,8 +3,9 @@ import { createElement } from 'react';
 import { renderToString } from 'react-dom/server';
 import { parse } from '@tinkoff/url';
 import { isRedirectFoundError, isNotFoundError, isHttpError } from '@tinkoff/errors';
+import { ChunkExtractor } from '@loadable/server';
 
-const errorHandler = (app, { log, beforeError, afterError, RootErrorBoundary, }) => {
+const errorHandler = (app, { log, beforeError, afterError, fetchWebpackStats, }) => {
     // eslint-disable-next-line max-statements
     app.setErrorHandler(async (error, request, reply) => {
         const runHandlers = async (handlers) => {
@@ -26,6 +27,17 @@ const errorHandler = (app, { log, beforeError, afterError, RootErrorBoundary, })
             requestId: request.headers['x-request-id'],
             url: request.url,
         };
+        let RootErrorBoundary = null;
+        try {
+            // In case of direct `require` by path, e.g.
+            // `require(path.resolve(process.cwd(), 'src', 'error.tsx'))` file
+            // doesn't include in the bundle, that is why we are using a
+            // path alias here along with webpack config option.
+            // See usage of `ROOT_ERROR_BOUNDARY_ALIAS`.
+            // eslint-disable-next-line import/no-unresolved, import/extensions
+            RootErrorBoundary = require('@/__private__/error').default;
+        }
+        catch { }
         if (isRedirectFoundError(error)) {
             log.info({
                 event: 'redirect-found-error',
@@ -90,7 +102,7 @@ Not Found page is common use-case with this error - https://tramvai.dev/docs/fea
             }
         }
         logMessage = `${logMessage}
-${RootErrorBoundary
+${RootErrorBoundary !== null
             ? 'Root Error Boundary will be rendered for the client'
             : 'You can add Error Boundary for better UX - https://tramvai.dev/docs/features/error-boundaries'}'`;
         log[logLevel]({
@@ -104,9 +116,28 @@ ${RootErrorBoundary
             return afterErrorResult;
         }
         reply.status(httpStatus);
-        if (RootErrorBoundary) {
+        if (RootErrorBoundary !== null) {
             try {
-                const body = renderToString(createElement(RootErrorBoundary, { error, url: parse(request.url) }));
+                const stats = await fetchWebpackStats();
+                const extractor = new ChunkExtractor({ stats, entrypoints: ['rootErrorBoundary'] });
+                const url = parse(requestInfo.url);
+                const serializedError = {
+                    status: httpStatus,
+                    message: error.message,
+                    stack: error.stack,
+                };
+                const body = renderToString(createElement(RootErrorBoundary, { error: serializedError, url })).replace('</head>', [
+                    '<script>' +
+                        `window.serverUrl = ${JSON.stringify(url)};` +
+                        `window.serverError = new Error("${serializedError.message}");` +
+                        `Object.assign(window.serverError, ${JSON.stringify(serializedError)});` +
+                        '</script>',
+                    extractor.getStyleTags(),
+                    extractor.getScriptTags(),
+                    '</head>',
+                ]
+                    .filter(Boolean)
+                    .join('\n'));
                 log.info({
                     event: 'render-root-error-boundary',
                     message: 'Render Root Error Boundary for the client',

package/lib/server/error.js

@@ -4,15 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var isNil = require('@tinkoff/utils/is/nil');
 var react = require('react');
-var server = require('react-dom/server');
+var server$1 = require('react-dom/server');
 var url = require('@tinkoff/url');
 var errors = require('@tinkoff/errors');
+var server = require('@loadable/server');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var isNil__default = /*#__PURE__*/_interopDefaultLegacy(isNil);
 
-const errorHandler = (app, { log, beforeError, afterError, RootErrorBoundary, }) => {
+const errorHandler = (app, { log, beforeError, afterError, fetchWebpackStats, }) => {
     // eslint-disable-next-line max-statements
     app.setErrorHandler(async (error, request, reply) => {
         const runHandlers = async (handlers) => {
@@ -34,6 +35,17 @@ const errorHandler = (app, { log, beforeError, afterError, RootErrorBoundary, })
             requestId: request.headers['x-request-id'],
             url: request.url,
         };
+        let RootErrorBoundary = null;
+        try {
+            // In case of direct `require` by path, e.g.
+            // `require(path.resolve(process.cwd(), 'src', 'error.tsx'))` file
+            // doesn't include in the bundle, that is why we are using a
+            // path alias here along with webpack config option.
+            // See usage of `ROOT_ERROR_BOUNDARY_ALIAS`.
+            // eslint-disable-next-line import/no-unresolved, import/extensions
+            RootErrorBoundary = require('@/__private__/error').default;
+        }
+        catch { }
         if (errors.isRedirectFoundError(error)) {
             log.info({
                 event: 'redirect-found-error',
@@ -98,7 +110,7 @@ Not Found page is common use-case with this error - https://tramvai.dev/docs/fea
             }
         }
         logMessage = `${logMessage}
-${RootErrorBoundary
+${RootErrorBoundary !== null
             ? 'Root Error Boundary will be rendered for the client'
             : 'You can add Error Boundary for better UX - https://tramvai.dev/docs/features/error-boundaries'}'`;
         log[logLevel]({
@@ -112,9 +124,28 @@ ${RootErrorBoundary
             return afterErrorResult;
         }
         reply.status(httpStatus);
-        if (RootErrorBoundary) {
+        if (RootErrorBoundary !== null) {
             try {
-                const body = server.renderToString(react.createElement(RootErrorBoundary, { error, url: url.parse(request.url) }));
+                const stats = await fetchWebpackStats();
+                const extractor = new server.ChunkExtractor({ stats, entrypoints: ['rootErrorBoundary'] });
+                const url$1 = url.parse(requestInfo.url);
+                const serializedError = {
+                    status: httpStatus,
+                    message: error.message,
+                    stack: error.stack,
+                };
+                const body = server$1.renderToString(react.createElement(RootErrorBoundary, { error: serializedError, url: url$1 })).replace('</head>', [
+                    '<script>' +
+                        `window.serverUrl = ${JSON.stringify(url$1)};` +
+                        `window.serverError = new Error("${serializedError.message}");` +
+                        `Object.assign(window.serverError, ${JSON.stringify(serializedError)});` +
+                        '</script>',
+                    extractor.getStyleTags(),
+                    extractor.getScriptTags(),
+                    '</head>',
+                ]
+                    .filter(Boolean)
+                    .join('\n'));
                 log.info({
                     event: 'render-root-error-boundary',
                     message: 'Render Root Error Boundary for the client',

package/lib/server/webApp.d.ts

@@ -2,12 +2,12 @@ import type { EXECUTION_CONTEXT_MANAGER_TOKEN, LOGGER_TOKEN } from '@tramvai/tok
 import type { COMMAND_LINE_RUNNER_TOKEN } from '@tramvai/core';
 import type { SERVER_TOKEN } from '@tramvai/tokens-server';
 import type { WEB_FASTIFY_APP_TOKEN, WEB_FASTIFY_APP_AFTER_INIT_TOKEN, WEB_FASTIFY_APP_BEFORE_INIT_TOKEN, WEB_FASTIFY_APP_INIT_TOKEN, WEB_FASTIFY_APP_LIMITER_TOKEN, WEB_FASTIFY_APP_BEFORE_ERROR_TOKEN, WEB_FASTIFY_APP_AFTER_ERROR_TOKEN, WEB_FASTIFY_APP_METRICS_TOKEN } from '@tramvai/tokens-server-private';
+import type { FETCH_WEBPACK_STATS_TOKEN } from '@tramvai/tokens-render';
 import type { ExtractDependencyType } from '@tinkoff/dippy';
-import type { ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN } from '@tramvai/react';
 export declare const webAppFactory: ({ server }: {
     server: typeof SERVER_TOKEN;
 }) => import("fastify").FastifyInstance<import("http").Server<typeof import("http").IncomingMessage, typeof import("http").ServerResponse>, import("http").IncomingMessage, import("http").ServerResponse<import("http").IncomingMessage>, import("fastify").FastifyBaseLogger, import("fastify").FastifyTypeProviderDefault> & PromiseLike<import("fastify").FastifyInstance<import("http").Server<typeof import("http").IncomingMessage, typeof import("http").ServerResponse>, import("http").IncomingMessage, import("http").ServerResponse<import("http").IncomingMessage>, import("fastify").FastifyBaseLogger, import("fastify").FastifyTypeProviderDefault>>;
-export declare const webAppInitCommand: ({ app, logger, commandLineRunner, executionContextManager, beforeInit, requestMetrics, limiterRequest, init, afterInit, beforeError, afterError, RootErrorBoundary, }: {
+export declare const webAppInitCommand: ({ app, logger, commandLineRunner, executionContextManager, beforeInit, requestMetrics, limiterRequest, init, afterInit, beforeError, afterError, fetchWebpackStats, }: {
     app: ExtractDependencyType<typeof WEB_FASTIFY_APP_TOKEN>;
     logger: ExtractDependencyType<typeof LOGGER_TOKEN>;
     commandLineRunner: ExtractDependencyType<typeof COMMAND_LINE_RUNNER_TOKEN>;
@@ -19,5 +19,5 @@ export declare const webAppInitCommand: ({ app, logger, commandLineRunner, execu
     afterInit: ExtractDependencyType<typeof WEB_FASTIFY_APP_AFTER_INIT_TOKEN>;
     beforeError: ExtractDependencyType<typeof WEB_FASTIFY_APP_BEFORE_ERROR_TOKEN>;
     afterError: ExtractDependencyType<typeof WEB_FASTIFY_APP_AFTER_ERROR_TOKEN>;
-    RootErrorBoundary?: ExtractDependencyType<typeof ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN>;
+    fetchWebpackStats: ExtractDependencyType<typeof FETCH_WEBPACK_STATS_TOKEN>;
 }) => () => Promise<void>;

package/lib/server/webApp.es.js

@@ -18,13 +18,13 @@ const webAppFactory = ({ server }) => {
     });
     return app;
 };
-const webAppInitCommand = ({ app, logger, commandLineRunner, executionContextManager, beforeInit, requestMetrics, limiterRequest, init, afterInit, beforeError, afterError, RootErrorBoundary, }) => {
+const webAppInitCommand = ({ app, logger, commandLineRunner, executionContextManager, beforeInit, requestMetrics, limiterRequest, init, afterInit, beforeError, afterError, fetchWebpackStats, }) => {
     const log = logger('server:webapp');
     const runHandlers = (instance, handlers) => {
         return Promise.all([handlers && Promise.all(handlers.map((handler) => handler(instance)))]);
     };
     return async function webAppInit() {
-        errorHandler(app, { log, beforeError, afterError, RootErrorBoundary });
+        errorHandler(app, { log, beforeError, afterError, fetchWebpackStats });
         await app.register(async (instance) => {
             await runHandlers(instance, beforeInit);
         });

package/lib/server/webApp.js

@@ -27,13 +27,13 @@ const webAppFactory = ({ server }) => {
     });
     return app;
 };
-const webAppInitCommand = ({ app, logger, commandLineRunner, executionContextManager, beforeInit, requestMetrics, limiterRequest, init, afterInit, beforeError, afterError, RootErrorBoundary, }) => {
+const webAppInitCommand = ({ app, logger, commandLineRunner, executionContextManager, beforeInit, requestMetrics, limiterRequest, init, afterInit, beforeError, afterError, fetchWebpackStats, }) => {
     const log = logger('server:webapp');
     const runHandlers = (instance, handlers) => {
         return Promise.all([handlers && Promise.all(handlers.map((handler) => handler(instance)))]);
     };
     return async function webAppInit() {
-        error.errorHandler(app, { log, beforeError, afterError, RootErrorBoundary });
+        error.errorHandler(app, { log, beforeError, afterError, fetchWebpackStats });
         await app.register(async (instance) => {
             await runHandlers(instance, beforeInit);
         });

package/lib/server.es.js

@@ -4,6 +4,7 @@ import EventEmitter from 'events';
 import { Module, provide, Scope, commandLineListTokens, COMMAND_LINE_RUNNER_TOKEN, APP_INFO_TOKEN } from '@tramvai/core';
 import { SERVER_TOKEN } from '@tramvai/tokens-server';
 export * from '@tramvai/tokens-server';
+import { FETCH_WEBPACK_STATS_TOKEN } from '@tramvai/tokens-render';
 import { SERVER_FACTORY_TOKEN, WEB_FASTIFY_APP_FACTORY_TOKEN, WEB_FASTIFY_APP_TOKEN, WEB_FASTIFY_APP_BEFORE_INIT_TOKEN, WEB_FASTIFY_APP_INIT_TOKEN, WEB_FASTIFY_APP_AFTER_INIT_TOKEN, WEB_FASTIFY_APP_METRICS_TOKEN, WEB_FASTIFY_APP_LIMITER_TOKEN, WEB_FASTIFY_APP_BEFORE_ERROR_TOKEN, WEB_FASTIFY_APP_AFTER_ERROR_TOKEN } from '@tramvai/tokens-server-private';
 import { LOGGER_TOKEN, EXECUTION_CONTEXT_MANAGER_TOKEN, ENV_MANAGER_TOKEN, ENV_USED_TOKEN } from '@tramvai/tokens-common';
 import { MetricsModule } from '@tramvai/module-metrics';
@@ -93,9 +94,27 @@ ServerModule = __decorate([
                     limiterRequest: { token: WEB_FASTIFY_APP_LIMITER_TOKEN, optional: true },
                     beforeError: { token: WEB_FASTIFY_APP_BEFORE_ERROR_TOKEN, optional: true },
                     afterError: { token: WEB_FASTIFY_APP_AFTER_ERROR_TOKEN, optional: true },
-                    RootErrorBoundary: { token: ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN, optional: true },
+                    fetchWebpackStats: FETCH_WEBPACK_STATS_TOKEN,
                 },
             },
+            provide({
+                provide: commandLineListTokens.init,
+                multi: true,
+                useFactory: ({ rootErrorBoundary, logger }) => () => {
+                    if (process.env.NODE_ENV === 'development' && rootErrorBoundary) {
+                        logger.error({
+                            event: 'tramvai-app-init',
+                            message: 'You are using `ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN`, which was deprecated. Your boundary will not work.' +
+                                'Use an `error.tsx` component instead. See more: ' +
+                                'https://tramvai.dev/docs/features/error-boundaries/#root-error-boundary',
+                        });
+                    }
+                },
+                deps: {
+                    logger: LOGGER_TOKEN,
+                    rootErrorBoundary: { token: ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN, optional: true },
+                },
+            }),
             {
                 provide: commandLineListTokens.listen,
                 multi: true,

package/lib/server.js

@@ -7,6 +7,7 @@ var dns = require('dns');
 var EventEmitter = require('events');
 var core = require('@tramvai/core');
 var tokensServer = require('@tramvai/tokens-server');
+var tokensRender = require('@tramvai/tokens-render');
 var tokensServerPrivate = require('@tramvai/tokens-server-private');
 var tokensCommon = require('@tramvai/tokens-common');
 var moduleMetrics = require('@tramvai/module-metrics');
@@ -100,9 +101,27 @@ exports.ServerModule = tslib.__decorate([
                     limiterRequest: { token: tokensServerPrivate.WEB_FASTIFY_APP_LIMITER_TOKEN, optional: true },
                     beforeError: { token: tokensServerPrivate.WEB_FASTIFY_APP_BEFORE_ERROR_TOKEN, optional: true },
                     afterError: { token: tokensServerPrivate.WEB_FASTIFY_APP_AFTER_ERROR_TOKEN, optional: true },
-                    RootErrorBoundary: { token: react.ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN, optional: true },
+                    fetchWebpackStats: tokensRender.FETCH_WEBPACK_STATS_TOKEN,
                 },
             },
+            core.provide({
+                provide: core.commandLineListTokens.init,
+                multi: true,
+                useFactory: ({ rootErrorBoundary, logger }) => () => {
+                    if (process.env.NODE_ENV === 'development' && rootErrorBoundary) {
+                        logger.error({
+                            event: 'tramvai-app-init',
+                            message: 'You are using `ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN`, which was deprecated. Your boundary will not work.' +
+                                'Use an `error.tsx` component instead. See more: ' +
+                                'https://tramvai.dev/docs/features/error-boundaries/#root-error-boundary',
+                        });
+                    }
+                },
+                deps: {
+                    logger: tokensCommon.LOGGER_TOKEN,
+                    rootErrorBoundary: { token: react.ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN, optional: true },
+                },
+            }),
             {
                 provide: core.commandLineListTokens.listen,
                 multi: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-server",
-  "version": "2.89.2",
+  "version": "2.90.0",
   "description": "",
   "browser": "lib/browser.js",
   "main": "lib/server.js",
@@ -25,29 +25,30 @@
     "@tinkoff/monkeypatch": "2.0.5",
     "@tinkoff/terminus": "0.1.8",
     "@tinkoff/url": "0.8.6",
-    "@tramvai/module-cache-warmup": "2.89.2",
-    "@tramvai/module-metrics": "2.89.2",
-    "@tramvai/papi": "2.89.2",
-    "@tramvai/tokens-server": "2.89.2",
-    "@tramvai/tokens-server-private": "2.89.2",
+    "@tramvai/module-cache-warmup": "2.90.0",
+    "@tramvai/module-metrics": "2.90.0",
+    "@tramvai/papi": "2.90.0",
+    "@tramvai/tokens-server": "2.90.0",
+    "@tramvai/tokens-server-private": "2.90.0",
     "fastify": "^4.14.1",
     "@fastify/cookie": "^8.3.0",
     "@fastify/compress": "^6.2.0",
     "@fastify/formbody": "^7.4.0",
     "@fastify/static": "^6.9.0",
+    "@loadable/server": "^5.15.0",
     "http-proxy-middleware": "^2.0.2"
   },
   "peerDependencies": {
     "@tinkoff/dippy": "0.8.15",
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/cli": "2.89.2",
-    "@tramvai/core": "2.89.2",
-    "@tramvai/react": "2.89.2",
-    "@tramvai/module-common": "2.89.2",
-    "@tramvai/module-environment": "2.89.2",
-    "@tramvai/tokens-common": "2.89.2",
-    "@tramvai/tokens-core-private": "2.89.2",
-    "@tramvai/tokens-render": "2.89.2",
+    "@tramvai/cli": "2.90.0",
+    "@tramvai/core": "2.90.0",
+    "@tramvai/react": "2.90.0",
+    "@tramvai/module-common": "2.90.0",
+    "@tramvai/module-environment": "2.90.0",
+    "@tramvai/tokens-common": "2.90.0",
+    "@tramvai/tokens-core-private": "2.90.0",
+    "@tramvai/tokens-render": "2.90.0",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",
     "tslib": "^2.4.0"