fix: static page generation issues with language

LIIKUNTA-372. Currently, the Sports app did not fail, but the Hobbies and the Events did. This was because there was a different kind of locale handling: The locale which was destructed from the context was set to null. Now there is a fallback language set when the context locale is null. The issue was easier to find and understand, when I understood where the error was printed. The error was our own message from the Apollo-Client's ErrorLink. If the operation-variable from the onError-handler was printed in the console, the actual error place was shown!
City-of-Helsinki · Feb 28, 2023 · a4433c5 · a4433c5
1 parent 28ac411
commit a4433c5
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 27 deletions.
diff --git a/apps/events-helsinki/src/domain/app/getEventsStaticProps.ts b/apps/events-helsinki/src/domain/app/getEventsStaticProps.ts
@@ -1,11 +1,6 @@
 import type { ApolloClient, NormalizedCacheObject } from '@apollo/client';
 import { isApolloError } from '@apollo/client';
-import type {
-  AppLanguage,
-  CmsLanguage,
-  Menu,
-  Language,
-} from 'events-helsinki-components';
+import type { CmsLanguage, Menu, Language } from 'events-helsinki-components';
 import {
   DEFAULT_FOOTER_MENU_NAME,
   DEFAULT_HEADER_MENU_NAME,
@@ -62,7 +57,7 @@ export default async function getEventsStaticProps<P = Record<string, any>>(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (e: any) {
     // Generic error handling
-    staticGenerationLogger.error('Error while generating a page:', e);
+    staticGenerationLogger.error(`Error while generating a page: ${e}`, e);
     if (isApolloError(e)) {
       return {
         props: {
@@ -94,8 +89,8 @@ async function getGlobalCMSData({
   client,
   context,
 }: GetGlobalCMSDataParams): Promise<ReturnedGlobalCMSData> {
-  const locale: AppLanguage = (context?.locale ?? 'fi') as AppLanguage;
-  const headerNavigationMenuName = DEFAULT_HEADER_MENU_NAME[locale];
+  const language = getLanguageOrDefault(context.locale);
+  const headerNavigationMenuName = DEFAULT_HEADER_MENU_NAME[language];
   const { data: headerMenuData } = await client.query({
     query: MenuDocument,
     variables: {
@@ -113,7 +108,7 @@ async function getGlobalCMSData({
     },
   });
 
-  const footerNavigationMenuName = DEFAULT_FOOTER_MENU_NAME[locale];
+  const footerNavigationMenuName = DEFAULT_FOOTER_MENU_NAME[language];
   const { data: footerMenuData } = await client.query({
     query: MenuDocument,
     variables: {

diff --git a/apps/events-helsinki/src/domain/clients/eventsFederationApolloClient.ts b/apps/events-helsinki/src/domain/clients/eventsFederationApolloClient.ts
@@ -78,10 +78,10 @@ export function createApolloClient() {
     });
   });
   const httpLink = getHttpLink(AppConfig.federationGraphqlEndpoint);
-  const errorLink = onError(({ graphQLErrors, networkError }) => {
+  const errorLink = onError(({ graphQLErrors, networkError, operation }) => {
     if (graphQLErrors) {
       graphQLErrors.forEach(({ message, locations, path }) => {
-        const errorMessage = `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`;
+        const errorMessage = `[GraphQL error]: OperationName: ${operation.operationName}, Message: ${message}, Location: ${locations}, Path: ${path}`;
         graphqlClientLogger.error(errorMessage);
         Sentry.captureMessage(errorMessage);
       });

diff --git a/apps/hobbies-helsinki/src/domain/app/getHobbiesStaticProps.ts b/apps/hobbies-helsinki/src/domain/app/getHobbiesStaticProps.ts
@@ -1,11 +1,6 @@
 import type { ApolloClient, NormalizedCacheObject } from '@apollo/client';
 import { isApolloError } from '@apollo/client';
-import type {
-  AppLanguage,
-  CmsLanguage,
-  Menu,
-  Language,
-} from 'events-helsinki-components';
+import type { CmsLanguage, Menu, Language } from 'events-helsinki-components';
 import {
   DEFAULT_FOOTER_MENU_NAME,
   DEFAULT_HEADER_MENU_NAME,
@@ -63,7 +58,8 @@ export default async function getHobbiesStaticProps<P = Record<string, any>>(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (e: any) {
     // Generic error handling
-    staticGenerationLogger.error('Error while generating a page:', e);
+    staticGenerationLogger.error(`Error while generating a page: ${e}`, e);
+
     if (isApolloError(e)) {
       return {
         props: {
@@ -95,8 +91,8 @@ async function getGlobalCMSData({
   client,
   context,
 }: GetGlobalCMSDataParams): Promise<ReturnedGlobalCMSData> {
-  const locale: AppLanguage = (context?.locale ?? 'fi') as AppLanguage;
-  const headerNavigationMenuName = DEFAULT_HEADER_MENU_NAME[locale];
+  const language = getLanguageOrDefault(context.locale);
+  const headerNavigationMenuName = DEFAULT_HEADER_MENU_NAME[language];
   const { data: headerMenuData } = await client.query({
     query: MenuDocument,
     variables: {
@@ -114,7 +110,7 @@ async function getGlobalCMSData({
     },
   });
 
-  const footerNavigationMenuName = DEFAULT_FOOTER_MENU_NAME[locale];
+  const footerNavigationMenuName = DEFAULT_FOOTER_MENU_NAME[language];
   const { data: footerMenuData } = await client.query({
     query: MenuDocument,
     variables: {

diff --git a/apps/hobbies-helsinki/src/domain/clients/eventsFederationApolloClient.ts b/apps/hobbies-helsinki/src/domain/clients/eventsFederationApolloClient.ts
@@ -78,10 +78,10 @@ export function createApolloClient() {
     });
   });
   const httpLink = getHttpLink(AppConfig.federationGraphqlEndpoint);
-  const errorLink = onError(({ graphQLErrors, networkError }) => {
+  const errorLink = onError(({ graphQLErrors, networkError, operation }) => {
     if (graphQLErrors) {
       graphQLErrors.forEach(({ message, locations, path }) => {
-        const errorMessage = `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`;
+        const errorMessage = `[GraphQL error]: OperationName: ${operation.operationName}, Message: ${message}, Location: ${locations}, Path: ${path}`;
         graphqlClientLogger.error(errorMessage);
         Sentry.captureMessage(errorMessage);
       });

diff --git a/apps/sports-helsinki/src/domain/app/getSportsStaticProps.ts b/apps/sports-helsinki/src/domain/app/getSportsStaticProps.ts
@@ -58,7 +58,7 @@ export default async function getSportsStaticProps<P = Record<string, any>>(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (e: any) {
     // Generic error handling
-    staticGenerationLogger.error('Error while generating a page:', e);
+    staticGenerationLogger.error(`Error while generating a page: ${e}`, e);
     if (isApolloError(e)) {
       return {
         props: {

diff --git a/apps/sports-helsinki/src/domain/clients/eventsFederationApolloClient.ts b/apps/sports-helsinki/src/domain/clients/eventsFederationApolloClient.ts
@@ -78,10 +78,10 @@ export function createApolloClient() {
     });
   });
   const httpLink = getHttpLink(AppConfig.federationGraphqlEndpoint);
-  const errorLink = onError(({ graphQLErrors, networkError }) => {
+  const errorLink = onError(({ graphQLErrors, networkError, operation }) => {
     if (graphQLErrors) {
       graphQLErrors.forEach(({ message, locations, path }) => {
-        const errorMessage = `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`;
+        const errorMessage = `[GraphQL error]: OperationName: ${operation.operationName}, Message: ${message}, Location: ${locations}, Path: ${path}`;
         graphqlClientLogger.error(errorMessage);
         Sentry.captureMessage(errorMessage);
       });