Skip to content

Commit

Permalink
[Nextjs] Better error handling for component-level data fetching (#1586)
Browse files Browse the repository at this point in the history
* [Nextjs] Page getStatic/ServerSideProps should fail if component level data fetching fails

* Updated CHANGELOG
illiakovalenko authored Aug 15, 2023
1 parent 72a0853 commit 9050b95
Showing 6 changed files with 32 additions and 8 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -25,6 +25,7 @@ Check the BYOC documentation for more info. ([#1568](https://github.com/Sitecore
* `[templates/nextjs]` `[templates/react]` `[templates/vue]` `[templates/angular]` Introduce layout service REST configuration name environment variable ([#1543](https://github.com/Sitecore/jss/pull/1543))
* `[templates/nextjs]` `[sitecore-jss-nextjs]` Support for out-of-process editing data caches was added. Vercel KV or a custom Redis cache can be used to improve editing in Pages and Experience Editor when using Vercel deployment as editing/rendering host ([#1530](https://github.com/Sitecore/jss/pull/1530))
* `[sitecore-jss-react]` Built-in MissingComponent component can now accept "errorOverride" text in props - to be displayed in the yellow frame as a custom error message. ([#1568](https://github.com/Sitecore/jss/pull/1568))
* `[templates/nextjs]` `[sitecore-jss-nextjs]` Better error handling for component-level data fetching ([#1586](https://github.com/Sitecore/jss/pull/1586))

### 🧹 Chores

Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ComponentPropsService } from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentPropsService, ComponentPropsError } from '@sitecore-jss/sitecore-jss-nextjs';
import { SitecorePageProps } from 'lib/page-props';
import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
import { moduleFactory } from 'temp/componentBuilder';
@@ -31,6 +31,20 @@ class ComponentPropsPlugin implements Plugin {
});
}

const errors = Object.keys(props.componentProps)
.map(id => {
const component = props.componentProps[id] as ComponentPropsError;

return component.error
? `\nUnable to get component props for ${component.componentName} (${id}): ${component.error}`
: '';
})
.join('');

if (errors.length) {
throw new Error(errors);
}

return props;
}
}
1 change: 1 addition & 0 deletions packages/sitecore-jss-nextjs/src/index.ts
Original file line number Diff line number Diff line change
@@ -99,6 +99,7 @@ export { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss';

export {
ComponentPropsCollection,
ComponentPropsError,
GetStaticComponentProps,
GetServerSideComponentProps,
} from './sharedTypes/component-props';
Original file line number Diff line number Diff line change
@@ -105,7 +105,8 @@ describe('ComponentPropsService', () => {
expect(result).to.deep.equal({
x11: 'x11SSRData',
x14: {
error: 'Error during preload data for component x14: whoops',
error: 'Error during preload data for component namex14 (x14): whoops',
componentName: 'namex14',
},
x16: 'myCustomComponentSSRData',
x161: 'myCustomComponentSSRData',
@@ -156,7 +157,8 @@ describe('ComponentPropsService', () => {
expect(result).to.deep.equal({
x11: 'x11SSRData',
x14: {
error: 'Error during preload data for component x14: whoops',
error: 'Error during preload data for component namex14 (x14): whoops',
componentName: 'namex14',
},
x16: 'myCustomComponentSSRData',
x161: 'myCustomComponentSSRData',
@@ -198,7 +200,8 @@ describe('ComponentPropsService', () => {
expect(result).to.deep.equal({
x11: 'x11StaticData',
x14: {
error: 'Error during preload data for component x14: whoops',
error: 'Error during preload data for component namex14 (x14): whoops',
componentName: 'namex14',
},
x16: 'myCustomComponentStaticData',
x161: 'myCustomComponentStaticData',
@@ -234,7 +237,8 @@ describe('ComponentPropsService', () => {
expect(result).to.deep.equal({
x11: 'x11StaticData',
x14: {
error: 'Error during preload data for component x14: whoops',
error: 'Error during preload data for component namex14 (x14): whoops',
componentName: 'namex14',
},
x16: 'myCustomComponentStaticData',
x161: 'myCustomComponentStaticData',
Original file line number Diff line number Diff line change
@@ -182,13 +182,15 @@ export class ComponentPropsService {
componentProps[uid] = result;
})
.catch((error) => {
const errLog = `Error during preload data for component ${uid}: ${error.message ||
error}`;
const errLog = `Error during preload data for component ${
req.rendering.componentName
} (${uid}): ${error.message || error}`;

console.error(chalk.red(errLog));

componentProps[uid] = {
error: error.message || errLog,
componentName: req.rendering.componentName,
};
});
});
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
import { ComponentRendering, LayoutServiceData } from '@sitecore-jss/sitecore-jss/layout';

export type ComponentPropsError = { error: string; componentName: string };

/**
* Shape of component props storage
*/
export type ComponentPropsCollection = {
[componentUid: string]: unknown;
[componentUid: string]: unknown | ComponentPropsError;
};

/**

0 comments on commit 9050b95

Please sign in to comment.