@lwrjs/lwc-ssr 0.13.4 → 0.13.6

package/build/cjs/utils.cjs

@@ -29,6 +29,7 @@ __export(exports, {
   addHeadMarkup: () => addHeadMarkup,
   createFetchEndowment: () => createFetchEndowment,
   createHeadMarkup: () => createHeadMarkup,
+  createSsrErrorMarkup: () => createSsrErrorMarkup,
   createSsrErrorMessage: () => createSsrErrorMessage,
   getLoaderConfig: () => getLoaderConfig,
   getLoaderId: () => getLoaderId,
@@ -49,8 +50,17 @@ function getRenderTimeout() {
   const override = process.env.SSR_TIMEOUT;
   return override ? Number.parseInt(override) : DEFAULT_SSR_TIMEOUT;
 }
-function createSsrErrorMessage(specifier, e) {
-  return `Server-side rendering for "${specifier}" failed. Falling back to client-side rendering. Reason: ${(0, import_diagnostics.stringifyError)(e)}`;
+function createSsrErrorMessage(specifier, e, fallback = true) {
+  const fallbackMsg = fallback ? " Falling back to client-side rendering." : "";
+  return `Server-side rendering for "${specifier}" failed.${fallbackMsg} Reason: ${(0, import_diagnostics.stringifyError)(e)}`;
+}
+function createSsrErrorMarkup(errors, basePath) {
+  let markup = '<div style="font-family:sans-serif;margin:50px;font-size:1.2em;"><h1>500: Server-side rendering failed</h1><p>Reasons:</p><ul>';
+  Object.entries(errors).forEach(([specifier, reason]) => {
+    markup += `<li><strong>${specifier}</strong>: ${(0, import_diagnostics.stringifyError)(reason)}</li>`;
+  });
+  markup += `</ul><p style="padding-top:1em;">See more information in the browser console. Contact your administrator for assistance.</p></div>`;
+  return markup;
 }
 async function getLoaderShim(resourceRegistry, runtimeEnvironment, bootstrapConfig) {
   const {debug} = runtimeEnvironment;

package/build/cjs/viewProvider/index.cjs

@@ -77,10 +77,10 @@ var LwcViewProvider = class extends import_base_view_provider.default {
             if (!debug && !(0, import_shared_utils.getFeatureFlags)().SSR_WITH_CSR_FALLBACK) {
               throw new Error(errorString);
             }
-            const message = (0, import_utils.createSsrErrorMessage)(specifier, errorString);
+            const message = (0, import_utils.createSsrErrorMessage)(specifier, errorString, false);
             import_diagnostics.logger.warn(message, errors[specifier]);
             return {
-              renderedView: `<${element} ${import_shared_utils.HYDRATE_DIRECTIVE}="${import_shared_utils.HYDRATE_CLIENT_VALUE}"></${element}>`,
+              renderedView: (0, import_utils.createSsrErrorMarkup)(errors, this.runtimeEnvironment.basePath),
               metadata: {
                 serverDebug: {message: debug ? message : void 0},
                 customElements: [],

package/build/es/utils.d.ts

@@ -6,7 +6,8 @@ interface ServerEnvironment extends EnvironmentContext {
 export declare const SSR_PROPS_ATTR = "data-lwr-props-id";
 export declare function getPropsId(): string;
 export declare function getRenderTimeout(): number;
-export declare function createSsrErrorMessage(specifier: string, e: any): string;
+export declare function createSsrErrorMessage(specifier: string, e: any, fallback?: boolean): string;
+export declare function createSsrErrorMarkup(errors: Record<string, string>, basePath: string): string;
 export declare function getLoaderShim(resourceRegistry: PublicResourceRegistry, runtimeEnvironment: RuntimeEnvironment, bootstrapConfig: NormalizedLwrAppBootstrapConfig): Promise<string>;
 export declare function getLoaderId(config: ClientBootstrapConfig, bootstrapConfig: NormalizedLwrAppBootstrapConfig): string;
 export declare function getLoaderConfig(bootstrapModule: string, config: ProviderAppConfig, runtimeParams: RuntimeParams, serverData: ServerData): ClientBootstrapConfig & {

package/build/es/utils.js

@@ -10,8 +10,17 @@ export function getRenderTimeout() {
     const override = process.env.SSR_TIMEOUT;
     return override ? Number.parseInt(override) : DEFAULT_SSR_TIMEOUT;
 }
-export function createSsrErrorMessage(specifier, e) {
-    return `Server-side rendering for "${specifier}" failed. Falling back to client-side rendering. Reason: ${stringifyError(e)}`;
+export function createSsrErrorMessage(specifier, e, fallback = true) {
+    const fallbackMsg = fallback ? ' Falling back to client-side rendering.' : '';
+    return `Server-side rendering for "${specifier}" failed.${fallbackMsg} Reason: ${stringifyError(e)}`;
+}
+export function createSsrErrorMarkup(errors, basePath) {
+    let markup = '<div style="font-family:sans-serif;margin:50px;font-size:1.2em;"><h1>500: Server-side rendering failed</h1><p>Reasons:</p><ul>';
+    Object.entries(errors).forEach(([specifier, reason]) => {
+        markup += `<li><strong>${specifier}</strong>: ${stringifyError(reason)}</li>`;
+    });
+    markup += `</ul><p style="padding-top:1em;">See more information in the browser console. Contact your administrator for assistance.</p></div>`;
+    return markup;
 }
 export async function getLoaderShim(resourceRegistry, runtimeEnvironment, bootstrapConfig) {
     const { debug } = runtimeEnvironment;

package/build/es/viewProvider/index.js

@@ -1,8 +1,8 @@
 import BaseViewProvider from '@lwrjs/base-view-provider';
 import { logger } from '@lwrjs/diagnostics';
 import { ViewSpan, getTracer } from '@lwrjs/instrumentation';
-import { HYDRATE_CLIENT_VALUE, HYDRATE_DIRECTIVE, getFeatureFlags, hashContent, isSpecifier, moduleSpecifierToKebabCase, slugify, } from '@lwrjs/shared-utils';
-import { createHeadMarkup, createSsrErrorMessage } from '../utils.js';
+import { getFeatureFlags, hashContent, isSpecifier, moduleSpecifierToKebabCase, slugify, } from '@lwrjs/shared-utils';
+import { createHeadMarkup, createSsrErrorMarkup, createSsrErrorMessage } from '../utils.js';
 import { getRenderer } from '../renderer.js';
 export default class LwcViewProvider extends BaseViewProvider {
     constructor(_pluginConfig, providerConfig) {
@@ -18,7 +18,7 @@ export default class LwcViewProvider extends BaseViewProvider {
         return;
     }
     async getView(viewId) {
-        // This view provider creates content templates from LWC component specifiers
+        // This view provider creates content templates with islands from LWC component specifiers
         const specifier = viewId.contentTemplate?.component;
         if (!specifier || !isSpecifier(specifier)) {
             return;
@@ -48,18 +48,19 @@ export default class LwcViewProvider extends BaseViewProvider {
                     const { results = {}, errors } = await getRenderer(config, moduleBundler, resourceRegistry).render({ [specifier]: { specifier, props: {} } }, route, runtimeEnvironment, Object(runtimeParams), undefined, 
                     // lets the renderer know this is the first of 2-pass SSR
                     true);
-                    // Handle errors: fallback to CSR or throw
+                    // Handle errors: throw or return an error page
                     if (errors) {
                         const errorString = Object.values(errors).join(', ');
                         if (!debug && !getFeatureFlags().SSR_WITH_CSR_FALLBACK) {
                             // 500 error for the page request
                             throw new Error(errorString);
                         }
-                        // fallback to CSR
-                        const message = createSsrErrorMessage(specifier, errorString);
+                        // error page
+                        const message = createSsrErrorMessage(specifier, errorString, false);
                         logger.warn(message, errors[specifier]); // TODO specific metadata for errors
                         return {
-                            renderedView: `<${element} ${HYDRATE_DIRECTIVE}="${HYDRATE_CLIENT_VALUE}"></${element}>`,
+                            // render the errors on the browser page; fallback to CSR is not possible on the 1st pass
+                            renderedView: createSsrErrorMarkup(errors, this.runtimeEnvironment.basePath),
                             // send an error message to the client if debug mode is on
                             metadata: {
                                 serverDebug: { message: debug ? message : undefined },

package/package.json

@@ -4,7 +4,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.13.4",
+    "version": "0.13.6",
     "homepage": "https://developer.salesforce.com/docs/platform/lwr/overview",
     "repository": {
         "type": "git",
@@ -42,16 +42,16 @@
         "build/**/*.d.ts"
     ],
     "dependencies": {
-        "@lwrjs/config": "0.13.4",
-        "@lwrjs/diagnostics": "0.13.4",
-        "@lwrjs/instrumentation": "0.13.4",
-        "@lwrjs/loader": "0.13.4",
-        "@lwrjs/shared-utils": "0.13.4",
+        "@lwrjs/config": "0.13.6",
+        "@lwrjs/diagnostics": "0.13.6",
+        "@lwrjs/instrumentation": "0.13.6",
+        "@lwrjs/loader": "0.13.6",
+        "@lwrjs/shared-utils": "0.13.6",
         "fs-extra": "^11.2.0",
         "lru-cache": "^10.4.3"
     },
     "devDependencies": {
-        "@lwrjs/types": "0.13.4",
+        "@lwrjs/types": "0.13.6",
         "jest": "^26.6.3",
         "memfs": "^4.9.3",
         "ts-jest": "^26.5.6"
@@ -62,5 +62,5 @@
     "volta": {
         "extends": "../../../package.json"
     },
-    "gitHead": "398664835cd2c6c6714e88c6f196e9963f7b6595"
+    "gitHead": "b6558d6ff644c035b3191eea00dfd6c625dc5efa"
 }