Merge pull request #1915 from NDLANO/graphql-error-logging

Add requestPath and other graphql context to graphql errors

src/iframe/embedIframeIndex.tsx

@@ -61,7 +61,7 @@ const language = initialProps.locale ?? config.defaultLocale;
 
 const cache = createCache({ key: EmotionCacheKey });
 
-const client = createApolloClient(language);
+const client = createApolloClient(language, undefined, window.location.pathname);
 const i18n = initializeI18n(i18nInstance, language);
 
 const renderOrHydrate = (container: HTMLElement, children: ReactNode) => {

src/server/podcastRssFeed.ts

@@ -6,6 +6,7 @@
  *
  */
 
+import { Request } from "express";
 import { gql, ApolloClient, NormalizedCacheObject } from "@apollo/client/core";
 import config from "../config";
 import { GQLPodcastSeriesQuery } from "../graphqlTypes";
@@ -14,18 +15,18 @@ import { createApolloClient } from "../util/apiHelpers";
 let apolloClient: ApolloClient<NormalizedCacheObject>;
 let storedLocale: string;
 
-const getApolloClient = (locale: string) => {
+const getApolloClient = (locale: string, req: Request) => {
   if (apolloClient && locale === storedLocale) {
     return apolloClient;
   } else {
-    apolloClient = createApolloClient(locale);
+    apolloClient = createApolloClient(locale, undefined, req.path);
     storedLocale = locale;
     return apolloClient;
   }
 };
 
-const podcastRssFeed = async (seriesId: number): Promise<string> => {
-  const client = getApolloClient("nb");
+const podcastRssFeed = async (seriesId: number, req: Request): Promise<string> => {
+  const client = getApolloClient("nb", req);
 
   const { data: { podcastSeries } = {} } = await client.query<GQLPodcastSeriesQuery>({
     query: podcastSeriesQuery,

src/server/render/defaultRender.tsx

@@ -69,7 +69,7 @@ export const defaultRender: RenderFunc = async (req) => {
     };
   }
 
-  const client = createApolloClient(locale, versionHash);
+  const client = createApolloClient(locale, versionHash, req.path);
   const cache = createCache({ key: EmotionCacheKey });
   const i18n = initializeI18n(i18nInstance, locale);
   const redirectContext: RedirectInfo = {};

src/server/render/iframeArticleRender.tsx

@@ -56,7 +56,7 @@ export const iframeArticleRender: RenderFunc = async (req) => {
     };
   }
 
-  const client = createApolloClient(locale);
+  const client = createApolloClient(locale, undefined, req.path);
   const cache = createCache({ key: EmotionCacheKey });
   const i18n = initializeI18n(i18nInstance, locale ?? config.defaultLocale);
   const context: RedirectInfo = {};

src/server/render/iframeEmbedRender.tsx

@@ -48,7 +48,7 @@ export const iframeEmbedRender: RenderFunc = async (req) => {
     };
   }
 
-  const client = createApolloClient(locale);
+  const client = createApolloClient(locale, undefined, req.path);
   const cache = createCache({ key: EmotionCacheKey });
   const i18n = initializeI18n(i18nInstance, locale ?? config.defaultLocale);
   const context: RedirectInfo = {};

src/server/routes/oembedArticleRoute.ts

@@ -44,11 +44,11 @@ type MatchParams = "resourceId" | "topicId" | "lang" | "articleId";
 let apolloClient: ApolloClient<NormalizedCacheObject>;
 let storedLocale: string;
 
-const getApolloClient = (locale: string) => {
+const getApolloClient = (locale: string, req: express.Request) => {
   if (apolloClient && locale === storedLocale) {
     return apolloClient;
   } else {
-    apolloClient = createApolloClient(locale);
+    apolloClient = createApolloClient(locale, undefined, req.path);
     storedLocale = locale;
     return apolloClient;
   }
@@ -111,7 +111,7 @@ const embedOembedQuery = gql`
 `;
 
 const getEmbedObject = async (lang: string, embedId: string, embedType: string, req: express.Request) => {
-  const client = getApolloClient(lang);
+  const client = getApolloClient(lang, req);
 
   const embed = await client.query<GQLEmbedOembedQuery, GQLEmbedOembedQueryVariables>({
     query: embedOembedQuery,

src/server/routes/podcastFeedRoute.ts

@@ -18,7 +18,7 @@ export const podcastFeedRoute = async (req: Request, res: Response, next: NextFu
     return;
   }
 
-  await podcastRssFeed(id)
+  await podcastRssFeed(id, req)
     .then((podcastPage) => {
       res.setHeader("Content-Type", "application/xml");
       res.send(podcastPage);

src/server/server.ts

@@ -278,7 +278,7 @@ async function sendInternalServerError(req: Request, res: Response, err?: Error)
 
 const errorHandler = (err: Error, req: Request, res: Response, __: (err: Error) => void) => {
   vite?.ssrFixStacktrace(err);
-  handleError(err, undefined, req);
+  handleError(err, undefined, req.path);
   sendInternalServerError(req, res, err);
 };
 

src/util/apiHelpers.ts

@@ -6,12 +6,13 @@
  *
  */
 
+import { GraphQLErrorExtensions } from "graphql/error";
 import { ApolloClient, ApolloLink, FieldFunctionOptions, InMemoryCache, TypePolicies } from "@apollo/client/core";
 import { BatchHttpLink } from "@apollo/client/link/batch-http";
 import { setContext } from "@apollo/client/link/context";
 import { onError } from "@apollo/client/link/error";
 import { getAccessToken, getFeideCookie, isAccessTokenValid, renewAuth } from "./authHelpers";
-import handleError from "./handleError";
+import handleError, { LogLevel } from "./handleError";
 import config from "../config";
 import { GQLBucketResult, GQLGroupSearch, GQLQueryFolderResourceMetaSearchArgs } from "../graphqlTypes";
 
@@ -195,16 +196,23 @@ function getCache() {
   return cache;
 }
 
-export const createApolloClient = (language = "nb", versionHash?: string) => {
+export const createApolloClient = (language = "nb", versionHash?: string, path?: string) => {
   const cache = getCache();
 
   return new ApolloClient({
-    link: createApolloLinks(language, versionHash),
+    link: createApolloLinks(language, versionHash, path),
     cache,
   });
 };
 
-export const createApolloLinks = (lang: string, versionHash?: string) => {
+const getLogLevel = (extensions: GraphQLErrorExtensions): LogLevel => {
+  if (typeof extensions?.status === "number" && extensions.status < 500) {
+    return "warn";
+  }
+  return "error";
+};
+
+export const createApolloLinks = (lang: string, versionHash?: string, requestPath?: string) => {
   const cookieString = config.isClient ? document.cookie : "";
   const feideCookie = getFeideCookie(cookieString);
   const accessTokenValid = isAccessTokenValid(feideCookie);
@@ -221,26 +229,31 @@ export const createApolloLinks = (lang: string, versionHash?: string) => {
       },
     };
   });
-  return ApolloLink.from([
-    onError(({ graphQLErrors, networkError }) => {
-      if (graphQLErrors) {
-        graphQLErrors.forEach(({ message, locations, path, extensions }) => {
-          if (!config.isClient || extensions?.status !== 404) {
-            handleError(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
-          }
-        });
-      }
-      if (networkError) {
-        handleError(`[Network error]: ${networkError}`, {
-          clientTime: new Date(),
-        });
-      }
-    }),
-    headersLink,
-    new BatchHttpLink({
-      uri,
-    }),
-  ]);
+
+  const errorLink = onError(({ graphQLErrors, networkError }) => {
+    if (graphQLErrors) {
+      graphQLErrors.forEach(({ message, locations, path, extensions }) => {
+        if (!config.isClient || extensions?.status !== 404) {
+          handleError(`[GraphQL error]: ${message}`, undefined, requestPath, getLogLevel(extensions), {
+            requestPath,
+            graphqlError: {
+              message,
+              locations,
+              path,
+              extensions,
+            },
+          });
+        }
+      });
+    }
+    if (networkError) {
+      handleError(`[Network error]: ${networkError}`, {
+        clientTime: new Date(),
+      });
+    }
+  });
+
+  return ApolloLink.from([errorLink, headersLink, new BatchHttpLink({ uri })]);
 };
 
 type HttpHeaders = {

src/util/handleError.ts

@@ -6,7 +6,6 @@
  *
  */
 
-import { Request } from "express";
 import { ErrorInfo } from "react";
 import { ApolloError } from "@apollo/client";
 import { ErrorReporter } from "@ndla/error-reporter";
@@ -70,27 +69,60 @@ export const isInternalServerError = (error: ApolloError | undefined | null): bo
 
 const getErrorLog = (
   error: ApolloError | Error | string | unknown,
-  request?: Request,
+  extraContext: Record<string, unknown>,
 ): ApolloError | Error | string | unknown => {
   if (typeof error === "object") {
     const errWithPath = error as { requestPath?: string } & object;
-    errWithPath.requestPath = request?.path;
-    return errWithPath;
+    return { ...errWithPath, ...extraContext };
+  }
+
+  if (typeof error === "string") {
+    return { message: error, ...extraContext };
   }
 
   return error;
 };
 
+export type LogLevel = "error" | "warn" | "info";
+const unreachable = (parameter: never): never => {
+  throw new Error(`This code should be unreachable but is not, because '${parameter}' is not of 'never' type.`);
+};
+
+const logServerError = async (
+  error: ApolloError | Error | string | unknown,
+  requestPath: string | undefined,
+  loglevel: LogLevel | undefined,
+  extraContext: Record<string, unknown>,
+) => {
+  const ctx = { ...extraContext, requestPath };
+  const err = getErrorLog(error, ctx);
+  switch (loglevel) {
+    case "info":
+      await log?.info(err);
+      break;
+    case "warn":
+      await log?.warn(err);
+      break;
+    case "error":
+    case undefined:
+      await log?.error(err);
+      break;
+    default:
+      unreachable(loglevel);
+  }
+};
+
 const handleError = async (
   error: ApolloError | Error | string | unknown,
   info?: ErrorInfo | { clientTime: Date },
-  request?: Request,
+  requestPath?: string,
+  loglevel?: LogLevel,
+  extraContext: Record<string, unknown> = {},
 ) => {
   if (config.runtimeType === "production" && config.isClient) {
     ErrorReporter.getInstance().captureError(error, info);
   } else if (config.runtimeType === "production" && !config.isClient) {
-    const err = getErrorLog(error, request);
-    await log?.error(err);
+    await logServerError(error, requestPath, loglevel, extraContext);
   } else {
     console.error(error); // eslint-disable-line no-console
   }