@tramvai/module-render 2.63.0 → 2.65.9

package/lib/browser.js

@@ -9,11 +9,41 @@ import { useMemo, createElement, StrictMode } from 'react';
 import { jsx } from 'react/jsx-runtime';
 import { createEvent, createReducer, useStore, Provider } from '@tramvai/state';
 import { useDi, ERROR_BOUNDARY_TOKEN, ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, UniversalErrorBoundary, DIContext } from '@tramvai/react';
-import { usePageService, useUrl } from '@tramvai/module-router';
+import { useUrl, usePageService } from '@tramvai/module-router';
 import debounce from '@tinkoff/utils/function/debounce';
 import { useIsomorphicLayoutEffect } from '@tinkoff/react-hooks';
 import { composeLayoutOptions, createLayout } from '@tinkoff/layout-factory';
 
+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 } = props;
+    const pageService = useDi(PAGE_SERVICE_TOKEN);
+    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 });
+    const fallback = pageService.resolveComponentFromConfig('errorBoundary');
+    return (jsx(UniversalErrorBoundary, { url: url, error: error, errorHandlers: errorHandlers, fallback: fallback, fallbackFromDi: fallbackFromDi, children: children }));
+};
+
 /**
  * Result component structure:
  *
@@ -21,7 +51,9 @@ import { composeLayoutOptions, createLayout } from '@tinkoff/layout-factory';
  *   <RootComponent>
  *    <LayoutComponent>
  *      <NestedLayoutComponent>
- *        <PageComponent />
+ *        <ErrorBoundaryComponent>
+ *          <PageComponent />
+ *        </ErrorBoundaryComponent>
  *      </NestedLayoutComponent>
  *    </LayoutComponent>
  *  </RootComponent>
@@ -55,7 +87,7 @@ const PageRenderComponent = () => {
             throw new Error(`Page component '${pageComponent}' not found`);
         };
     }
-    const page = useMemo(() => jsx(PageComponent, {}), [PageComponent]);
+    const page = useMemo(() => (jsx(PageErrorBoundary, { children: jsx(PageComponent, {}) })), [PageComponent]);
     return page;
 };
 const Root = () => {
@@ -64,39 +96,9 @@ const Root = () => {
     return jsx(LayoutRenderComponent, { children: nestedLayoutRenderComponent });
 };
 
-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 } = props;
-    const pageService = useDi(PAGE_SERVICE_TOKEN);
-    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 });
-    const fallback = pageService.resolveComponentFromConfig('errorBoundary');
-    return (jsx(UniversalErrorBoundary, { url: url, error: error, errorHandlers: errorHandlers, fallback: fallback, fallbackFromDi: fallbackFromDi, children: children }));
-};
-
 function renderReact({ di }, context) {
     const serverState = typeof window !== 'undefined' ? context.getState() : undefined;
-    return (jsx(Provider, { context: context, serverState: serverState, children: jsx(DIContext.Provider, { value: di, children: jsx(PageErrorBoundary, { children: jsx(Root, {}) }) }) }));
+    return (jsx(Provider, { context: context, serverState: serverState, children: jsx(DIContext.Provider, { value: di, children: jsx(Root, {}) }) }));
 }
 
 let hydrateRoot;

package/lib/server.es.js

@@ -32,7 +32,7 @@ import { o as onload } from './server_inline.inline.es.js';
 import { Writable } from 'stream';
 import { jsx } from 'react/jsx-runtime';
 import { createEvent, createReducer, useStore, Provider } from '@tramvai/state';
-import { usePageService, useUrl } from '@tramvai/module-router';
+import { useUrl, usePageService } from '@tramvai/module-router';
 import { composeLayoutOptions, createLayout } from '@tinkoff/layout-factory';
 
 const thirtySeconds = 1000 * 30;
@@ -353,8 +353,8 @@ let fetchStats = async () => {
 };
 if (process.env.NODE_ENV === 'development') {
     fetchStats = async () => {
-        const { modern: configModern, staticHost, staticPort, build: { options: { outputClient }, }, } = appConfig;
-        const getUrl = (filename) => `http://${staticHost}:${staticPort}/${outputClient}/${filename}`;
+        const { modern: configModern, staticHost, staticPort, output } = appConfig;
+        const getUrl = (filename) => `http://${staticHost}:${staticPort}/${output.client}/${filename}`;
         const request = await fetch(getUrl(configModern ? 'stats.modern.json' : 'stats.json'));
         const stats = await request.json();
         // static - популярная заглушка в env.development.js файлах, надо игнорировать, как было раньше
@@ -647,6 +647,36 @@ 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 } = props;
+    const pageService = useDi(PAGE_SERVICE_TOKEN);
+    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 });
+    const fallback = pageService.resolveComponentFromConfig('errorBoundary');
+    return (jsx(UniversalErrorBoundary, { url: url, error: error, errorHandlers: errorHandlers, fallback: fallback, fallbackFromDi: fallbackFromDi, children: children }));
+};
+
 /**
  * Result component structure:
  *
@@ -654,7 +684,9 @@ const htmlPageSchemaFactory = ({ htmlAttrs, }) => {
  *   <RootComponent>
  *    <LayoutComponent>
  *      <NestedLayoutComponent>
- *        <PageComponent />
+ *        <ErrorBoundaryComponent>
+ *          <PageComponent />
+ *        </ErrorBoundaryComponent>
  *      </NestedLayoutComponent>
  *    </LayoutComponent>
  *  </RootComponent>
@@ -688,7 +720,7 @@ const PageRenderComponent = () => {
             throw new Error(`Page component '${pageComponent}' not found`);
         };
     }
-    const page = useMemo(() => jsx(PageComponent, {}), [PageComponent]);
+    const page = useMemo(() => (jsx(PageErrorBoundary, { children: jsx(PageComponent, {}) })), [PageComponent]);
     return page;
 };
 const Root = () => {
@@ -697,39 +729,9 @@ const Root = () => {
     return jsx(LayoutRenderComponent, { children: nestedLayoutRenderComponent });
 };
 
-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 } = props;
-    const pageService = useDi(PAGE_SERVICE_TOKEN);
-    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 });
-    const fallback = pageService.resolveComponentFromConfig('errorBoundary');
-    return (jsx(UniversalErrorBoundary, { url: url, error: error, errorHandlers: errorHandlers, fallback: fallback, fallbackFromDi: fallbackFromDi, children: children }));
-};
-
 function renderReact({ di }, context) {
     const serverState = typeof window !== 'undefined' ? context.getState() : undefined;
-    return (jsx(Provider, { context: context, serverState: serverState, children: jsx(DIContext.Provider, { value: di, children: jsx(PageErrorBoundary, { children: jsx(Root, {}) }) }) }));
+    return (jsx(Provider, { context: context, serverState: serverState, children: jsx(DIContext.Provider, { value: di, children: jsx(Root, {}) }) }));
 }
 
 const RENDER_TIMEOUT = 500;
@@ -793,7 +795,9 @@ class ReactRenderServer {
                         pipe(htmlWritable);
                     },
                     onError(error) {
-                        // error can be inside Suspense boundaries, this is not critical, continue rendering
+                        // error can be inside Suspense boundaries, this is not critical, continue rendering.
+                        // for criticall errors, this callback will be called with `onShellError`,
+                        // so this is a best place to error logging
                         log.error({
                             event: 'streaming-render:error',
                             error,

package/lib/server.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var react = require('react');
+var react$1 = require('react');
 var server$1 = require('react-dom/server');
 var core = require('@tramvai/core');
 var tokensCommon = require('@tramvai/tokens-common');
@@ -12,7 +12,7 @@ var moduleClientHints = require('@tramvai/module-client-hints');
 var tokensRender = require('@tramvai/tokens-render');
 var dippy = require('@tinkoff/dippy');
 var tokensServerPrivate = require('@tramvai/tokens-server-private');
-var react$1 = require('@tramvai/react');
+var react = require('@tramvai/react');
 var url = require('@tinkoff/url');
 var userAgent = require('@tinkoff/user-agent');
 var isUndefined = require('@tinkoff/utils/is/undefined');
@@ -389,8 +389,8 @@ let fetchStats = async () => {
 };
 if (process.env.NODE_ENV === 'development') {
     fetchStats = async () => {
-        const { modern: configModern, staticHost, staticPort, build: { options: { outputClient }, }, } = appConfig;
-        const getUrl = (filename) => `http://${staticHost}:${staticPort}/${outputClient}/${filename}`;
+        const { modern: configModern, staticHost, staticPort, output } = appConfig;
+        const getUrl = (filename) => `http://${staticHost}:${staticPort}/${output.client}/${filename}`;
         const request = await fetch__default["default"](getUrl(configModern ? 'stats.modern.json' : 'stats.json'));
         const stats = await request.json();
         // static - популярная заглушка в env.development.js файлах, надо игнорировать, как было раньше
@@ -683,6 +683,36 @@ 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 } = props;
+    const pageService = react.useDi(tokensRouter.PAGE_SERVICE_TOKEN);
+    const url = moduleRouter.useUrl();
+    const serializedError = state.useStore(PageErrorStore);
+    const error = react$1.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 });
+    const fallback = pageService.resolveComponentFromConfig('errorBoundary');
+    return (jsxRuntime.jsx(react.UniversalErrorBoundary, { url: url, error: error, errorHandlers: errorHandlers, fallback: fallback, fallbackFromDi: fallbackFromDi, children: children }));
+};
+
 /**
  * Result component structure:
  *
@@ -690,7 +720,9 @@ const htmlPageSchemaFactory = ({ htmlAttrs, }) => {
  *   <RootComponent>
  *    <LayoutComponent>
  *      <NestedLayoutComponent>
- *        <PageComponent />
+ *        <ErrorBoundaryComponent>
+ *          <PageComponent />
+ *        </ErrorBoundaryComponent>
  *      </NestedLayoutComponent>
  *    </LayoutComponent>
  *  </RootComponent>
@@ -706,13 +738,13 @@ const LayoutRenderComponent = ({ children }) => {
     const LayoutComponent = pageService.resolveComponentFromConfig('layout');
     const HeaderComponent = pageService.resolveComponentFromConfig('header');
     const FooterComponent = pageService.resolveComponentFromConfig('footer');
-    const layout = react.useMemo(() => (jsxRuntime.jsx(LayoutComponent, { Header: HeaderComponent, Footer: FooterComponent, children: children })), [LayoutComponent, HeaderComponent, FooterComponent, children]);
+    const layout = react$1.useMemo(() => (jsxRuntime.jsx(LayoutComponent, { Header: HeaderComponent, Footer: FooterComponent, children: children })), [LayoutComponent, HeaderComponent, FooterComponent, children]);
     return layout;
 };
 const NestedLayoutRenderComponent = ({ children }) => {
     const pageService = moduleRouter.usePageService();
     const NestedLayoutComponent = pageService.resolveComponentFromConfig('nestedLayout');
-    const nestedLayout = react.useMemo(() => jsxRuntime.jsx(NestedLayoutComponent, { children: children }), [NestedLayoutComponent, children]);
+    const nestedLayout = react$1.useMemo(() => jsxRuntime.jsx(NestedLayoutComponent, { children: children }), [NestedLayoutComponent, children]);
     return nestedLayout;
 };
 const PageRenderComponent = () => {
@@ -724,48 +756,18 @@ const PageRenderComponent = () => {
             throw new Error(`Page component '${pageComponent}' not found`);
         };
     }
-    const page = react.useMemo(() => jsxRuntime.jsx(PageComponent, {}), [PageComponent]);
+    const page = react$1.useMemo(() => (jsxRuntime.jsx(PageErrorBoundary, { children: jsxRuntime.jsx(PageComponent, {}) })), [PageComponent]);
     return page;
 };
 const Root = () => {
-    const pageRenderComponent = react.useMemo(() => jsxRuntime.jsx(PageRenderComponent, {}), []);
-    const nestedLayoutRenderComponent = react.useMemo(() => jsxRuntime.jsx(NestedLayoutRenderComponent, { children: pageRenderComponent }), [pageRenderComponent]);
+    const pageRenderComponent = react$1.useMemo(() => jsxRuntime.jsx(PageRenderComponent, {}), []);
+    const nestedLayoutRenderComponent = react$1.useMemo(() => jsxRuntime.jsx(NestedLayoutRenderComponent, { children: pageRenderComponent }), [pageRenderComponent]);
     return jsxRuntime.jsx(LayoutRenderComponent, { children: nestedLayoutRenderComponent });
 };
 
-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 } = props;
-    const pageService = react$1.useDi(tokensRouter.PAGE_SERVICE_TOKEN);
-    const url = moduleRouter.useUrl();
-    const serializedError = state.useStore(PageErrorStore);
-    const error = react.useMemo(() => {
-        return serializedError && deserializeError(serializedError);
-    }, [serializedError]);
-    const errorHandlers = react$1.useDi({ token: react$1.ERROR_BOUNDARY_TOKEN, optional: true });
-    const fallbackFromDi = react$1.useDi({ token: react$1.ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, optional: true });
-    const fallback = pageService.resolveComponentFromConfig('errorBoundary');
-    return (jsxRuntime.jsx(react$1.UniversalErrorBoundary, { url: url, error: error, errorHandlers: errorHandlers, fallback: fallback, fallbackFromDi: fallbackFromDi, children: children }));
-};
-
 function renderReact({ di }, context) {
     const serverState = typeof window !== 'undefined' ? context.getState() : undefined;
-    return (jsxRuntime.jsx(state.Provider, { context: context, serverState: serverState, children: jsxRuntime.jsx(react$1.DIContext.Provider, { value: di, children: jsxRuntime.jsx(PageErrorBoundary, { children: jsxRuntime.jsx(Root, {}) }) }) }));
+    return (jsxRuntime.jsx(state.Provider, { context: context, serverState: serverState, children: jsxRuntime.jsx(react.DIContext.Provider, { value: di, children: jsxRuntime.jsx(Root, {}) }) }));
 }
 
 const RENDER_TIMEOUT = 500;
@@ -829,7 +831,9 @@ class ReactRenderServer {
                         pipe(htmlWritable);
                     },
                     onError(error) {
-                        // error can be inside Suspense boundaries, this is not critical, continue rendering
+                        // error can be inside Suspense boundaries, this is not critical, continue rendering.
+                        // for criticall errors, this callback will be called with `onShellError`,
+                        // so this is a best place to error logging
                         log.error({
                             event: 'streaming-render:error',
                             error,
@@ -1093,7 +1097,7 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                         let body;
                         try {
                             log.info({ event: 'render-root-boundary-start' });
-                            body = server$1.renderToString(react.createElement(RootErrorBoundary, { error, url: url.parse(request.url) }));
+                            body = server$1.renderToString(react$1.createElement(RootErrorBoundary, { error, url: url.parse(request.url) }));
                             log.info({ event: 'render-root-boundary-success' });
                             const status = error.status || error.httpStatus || 500;
                             // log send-server-error only after successful Root Boundary render,
@@ -1123,7 +1127,7 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                     };
                 },
                 deps: {
-                    RootErrorBoundary: { token: react$1.ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN, optional: true },
+                    RootErrorBoundary: { token: react.ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN, optional: true },
                     logger: tokensCommon.LOGGER_TOKEN,
                 },
             }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-render",
-  "version": "2.63.0",
+  "version": "2.65.9",
   "description": "",
   "browser": "lib/browser.js",
   "main": "lib/server.js",
@@ -26,28 +26,28 @@
     "@tinkoff/htmlpagebuilder": "0.5.5",
     "@tinkoff/layout-factory": "0.3.6",
     "@tinkoff/url": "0.8.4",
-    "@tinkoff/user-agent": "0.4.151",
-    "@tramvai/module-client-hints": "2.63.0",
-    "@tramvai/module-router": "2.63.0",
-    "@tramvai/react": "2.63.0",
+    "@tinkoff/user-agent": "0.4.166",
+    "@tramvai/module-client-hints": "2.65.9",
+    "@tramvai/module-router": "2.65.9",
+    "@tramvai/react": "2.65.9",
     "@tramvai/safe-strings": "0.5.6",
-    "@tramvai/tokens-render": "2.63.0",
-    "@tramvai/experiments": "2.63.0",
+    "@tramvai/tokens-render": "2.65.9",
+    "@tramvai/experiments": "2.65.9",
     "@types/loadable__server": "^5.12.6",
     "node-fetch": "^2.6.1"
   },
   "peerDependencies": {
-    "@tinkoff/dippy": "0.8.11",
+    "@tinkoff/dippy": "0.8.12",
     "@tinkoff/utils": "^2.1.2",
     "@tinkoff/react-hooks": "0.1.4",
-    "@tramvai/cli": "2.63.0",
-    "@tramvai/core": "2.63.0",
-    "@tramvai/module-common": "2.63.0",
-    "@tramvai/state": "2.63.0",
-    "@tramvai/test-helpers": "2.63.0",
-    "@tramvai/tokens-common": "2.63.0",
-    "@tramvai/tokens-router": "2.63.0",
-    "@tramvai/tokens-server-private": "2.63.0",
+    "@tramvai/cli": "2.65.9",
+    "@tramvai/core": "2.65.9",
+    "@tramvai/module-common": "2.65.9",
+    "@tramvai/state": "2.65.9",
+    "@tramvai/test-helpers": "2.65.9",
+    "@tramvai/tokens-common": "2.65.9",
+    "@tramvai/tokens-router": "2.65.9",
+    "@tramvai/tokens-server-private": "2.65.9",
     "express": "^4.17.1",
     "prop-types": "^15.6.2",
     "react": ">=16.14.0",