feat(packages/sui-react-initial-props): add error handling and logging to getInitialProps

packages/sui-react-initial-props/src/loadPage.tsx

@@ -2,18 +2,17 @@
 import {useContext} from 'react'
 
 import InitialPropsContext from './initialPropsContext'
-import {
-  type ClientPageComponent,
-  type DoneImportingPageCallback,
-  type ReactRouterTypes,
-  type WithInitialPropsComponent
-} from './types'
+import {type ClientPageComponent, type ReactRouterTypes, type WithInitialPropsComponent} from './types'
 import withInitialProps from './withInitialProps'
 
 const EMPTY_GET_INITIAL_PROPS = async (): Promise<object> => ({})
 
+interface Logger {
+  error: (message: string, error: Error) => void
+}
+
 const createUniversalPage =
-  (routeInfo: ReactRouterTypes.RouteInfo) =>
+  (routeInfo: ReactRouterTypes.RouteInfo, logger?: Logger) =>
   async ({default: Page}: {default: ClientPageComponent}) => {
     // check if the Page page has a getInitialProps, if not put a resolve with an empty object
     Page.getInitialProps = typeof Page.getInitialProps === 'function' ? Page.getInitialProps : EMPTY_GET_INITIAL_PROPS
@@ -23,13 +22,15 @@ const createUniversalPage =
       // let withInitialProps HOC handle client getInitialProps logic
       return Promise.resolve(withInitialProps(Page))
     }
+
     // SERVER
     // Create a component that gets the initialProps from context
     // this context has been created on the `ssrWithComponentWithInitialProps`
     const ServerPage: WithInitialPropsComponent = (props: object) => {
       const {initialProps} = useContext(InitialPropsContext)
       return <Page {...props} {...initialProps} />
     }
+
     // recover the displayName from the original page
     ServerPage.displayName = Page.displayName
     // detect if the page has getInitialProps and wrap it with the routeInfo
@@ -38,18 +39,24 @@ const createUniversalPage =
       context: object,
       req: IncomingMessage.ServerRequest,
       res: IncomingMessage.ClientResponse
-    ) => await Page.getInitialProps({context, routeInfo, req, res})
+    ) => {
+      try {
+        return await Page.getInitialProps({context, routeInfo, req, res})
+      } catch (error) {
+        const message = 'Error executing getInitialProps on server'
+
+        logger?.error?.(message, error as Error)
+
+        return {error: error instanceof Error ? error.message : message}
+      }
+    }
+
     // return the component to be used on the server
     return ServerPage
   }
 
-// TODO: Remove this method on next major as it's using unnecessary contextFactory param
-// and unnecesary calling done method instead relying on promises
-export default (_: any, importPage: () => Promise<any>) =>
-  async (routeInfo: ReactRouterTypes.RouteInfo, done: DoneImportingPageCallback) => {
-    importPage()
-      .then(createUniversalPage(routeInfo))
-      .then(Page => {
-        done(null, Page)
-      })
-  }
+export default (importPage: () => Promise<any>, logger?: Logger) => async (routeInfo: ReactRouterTypes.RouteInfo) => {
+  await importPage()
+
+  return createUniversalPage(routeInfo, logger)
+}