From 18c1f12c696b5c5662b371a01b2ce2239efda95c Mon Sep 17 00:00:00 2001
From: Jeffrey Dowdle <jeffrey.dowdle@dpc.vic.gov.au>
Date: Wed, 13 Dec 2023 13:29:08 +1100
Subject: [PATCH 1/4] feat(@dpc-sdp/nuxt-ripple): adds logging in vue/nuxt
 contexts

---
 .gitignore                                      |  2 +-
 .../nuxt-ripple/components/TideBaseLayout.vue   | 14 +++++++++++++-
 packages/nuxt-ripple/composables/use-logger.ts  | 17 +++++++++++++++++
 .../nuxt-ripple/plugins/00.logging.server.ts    | 10 ++++++++++
 packages/nuxt-ripple/plugins/site-theme.ts      |  8 +++++++-
 5 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 packages/nuxt-ripple/composables/use-logger.ts
 create mode 100644 packages/nuxt-ripple/plugins/00.logging.server.ts

diff --git a/.gitignore b/.gitignore
index 6242e8a82c..a1c4421952 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,6 @@
 # Temporary files
 node_modules
-*.log*
+*.log
 .nuxt
 .nitro
 .cache
diff --git a/packages/nuxt-ripple/components/TideBaseLayout.vue b/packages/nuxt-ripple/components/TideBaseLayout.vue
index 87439df571..1fbed978fc 100644
--- a/packages/nuxt-ripple/components/TideBaseLayout.vue
+++ b/packages/nuxt-ripple/components/TideBaseLayout.vue
@@ -93,7 +93,13 @@
 
 <script setup lang="ts">
 // @ts-ignore
-import { useAppConfig, useRoute, useNuxtApp, useTideLanguage } from '#imports'
+import {
+  useAppConfig,
+  useRoute,
+  useNuxtApp,
+  useTideLanguage,
+  useLogger
+} from '#imports'
 import { computed, onMounted, provide, ref } from 'vue'
 import { defu as defuMerge } from 'defu'
 import { TideSiteData } from '../types'
@@ -164,6 +170,12 @@ const footerNav = computed(() => {
 })
 
 const nuxtApp = useNuxtApp()
+const logger = useLogger()
+
+logger.info('Calling tide:page hook...', {
+  label: 'TideBaseLayout'
+})
+
 /*
  * This hook can be called from plugins to extend Tide managed pages behaviour - see /plugins folder for examples
  */
diff --git a/packages/nuxt-ripple/composables/use-logger.ts b/packages/nuxt-ripple/composables/use-logger.ts
new file mode 100644
index 0000000000..dfb1af4908
--- /dev/null
+++ b/packages/nuxt-ripple/composables/use-logger.ts
@@ -0,0 +1,17 @@
+export const useLogger = (id?: number) => {
+  const { $logger } = useNuxtApp()
+  const noop = () => {}
+
+  if (process.server) {
+    return $logger
+  }
+
+  return {
+    debug: noop,
+    info: noop,
+    warning: noop,
+    error: noop
+  }
+}
+
+export default useLogger
diff --git a/packages/nuxt-ripple/plugins/00.logging.server.ts b/packages/nuxt-ripple/plugins/00.logging.server.ts
new file mode 100644
index 0000000000..c02788d78a
--- /dev/null
+++ b/packages/nuxt-ripple/plugins/00.logging.server.ts
@@ -0,0 +1,10 @@
+import { defineNuxtPlugin } from '#app'
+import { logger } from '@dpc-sdp/ripple-tide-api'
+
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      logger
+    }
+  }
+})
diff --git a/packages/nuxt-ripple/plugins/site-theme.ts b/packages/nuxt-ripple/plugins/site-theme.ts
index 0de4b9770c..89f6243e64 100644
--- a/packages/nuxt-ripple/plugins/site-theme.ts
+++ b/packages/nuxt-ripple/plugins/site-theme.ts
@@ -1,4 +1,4 @@
-import { useAppConfig, useHead } from '#imports'
+import { useAppConfig, useHead, useLogger } from '#imports'
 import { defu as defuMerge } from 'defu'
 
 const formatThemeStyle = (themeObj) => {
@@ -13,6 +13,12 @@ const formatThemeStyle = (themeObj) => {
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hook('tide:page', ({ site }) => {
+    const logger = useLogger()
+
+    logger.info('tide:page hook was triggered', {
+      label: 'site-theme.ts'
+    })
+
     const siteTheme = defuMerge(
       site?.theme,
       useAppConfig()?.ripple?.theme || {}

From 525f8319fa83e810bbf57862cc9635d13a543231 Mon Sep 17 00:00:00 2001
From: Jeffrey Dowdle <jeffrey.dowdle@dpc.vic.gov.au>
Date: Wed, 27 Dec 2023 11:07:15 +1100
Subject: [PATCH 2/4] feat(@dpc-sdp/ripple-tide-api): add section id to logging
 messages and add debug info

---
 .../nuxt-ripple/composables/use-section-id.ts |  9 +++
 .../nuxt-ripple/composables/use-tide-page.ts  | 74 +++++++++++++++++--
 .../nuxt-ripple/composables/use-tide-site.ts  | 12 +++
 packages/nuxt-ripple/server/api/tide/page.ts  |  8 +-
 packages/nuxt-ripple/server/api/tide/site.ts  |  4 +-
 .../src/services/http-client.ts               | 10 ++-
 .../ripple-tide-api/src/services/tide-page.ts | 35 ++++++---
 .../ripple-tide-api/src/services/tide-site.ts |  5 +-
 8 files changed, 134 insertions(+), 23 deletions(-)
 create mode 100644 packages/nuxt-ripple/composables/use-section-id.ts

diff --git a/packages/nuxt-ripple/composables/use-section-id.ts b/packages/nuxt-ripple/composables/use-section-id.ts
new file mode 100644
index 0000000000..7b22b9c502
--- /dev/null
+++ b/packages/nuxt-ripple/composables/use-section-id.ts
@@ -0,0 +1,9 @@
+import { useRequestHeaders } from '#imports'
+
+export const useSectionId = (): string => {
+  const sectionIdHeaderName = 'section-io-id'
+  const requestHeaders = useRequestHeaders([sectionIdHeaderName])
+  return requestHeaders[sectionIdHeaderName] || 'no section id'
+}
+
+export default useSectionId
diff --git a/packages/nuxt-ripple/composables/use-tide-page.ts b/packages/nuxt-ripple/composables/use-tide-page.ts
index cb11b1bb05..d213ad5e81 100644
--- a/packages/nuxt-ripple/composables/use-tide-page.ts
+++ b/packages/nuxt-ripple/composables/use-tide-page.ts
@@ -1,5 +1,11 @@
 import type { TidePageBase } from './../types'
-import { useCookie, isPreviewPath, AuthCookieNames } from '#imports'
+import {
+  useCookie,
+  isPreviewPath,
+  AuthCookieNames,
+  useLogger,
+  useSectionId
+} from '#imports'
 
 const isCacheTimeExpired = (date: number, expiryInMinutes = 5) => {
   // 5 minute default expiry in step with varnish cache
@@ -8,7 +14,7 @@ const isCacheTimeExpired = (date: number, expiryInMinutes = 5) => {
   return date < timePlusExpiry
 }
 
-const checkForRedirect = async (page: TidePageBase) => {
+const checkForRedirect = async (page: TidePageBase, debugLogger) => {
   // Redirect on the 6 codes that Drupal supplies
   if (page?.type === 'redirect') {
     switch (page.status_code) {
@@ -18,6 +24,13 @@ const checkForRedirect = async (page: TidePageBase) => {
       case '304':
       case '305':
       case '307':
+        debugLogger(`Redirecting to ${page?.redirect_url}`, {
+          pageType: page?.type,
+          pageRedirectUrl: page?.redirect_url,
+          pageRedirectType: page?.redirect_type,
+          pageStatusCode: page?.status_code
+        })
+
         await navigateTo(page.redirect_url, {
           replace: true,
           redirectCode: page.status_code,
@@ -33,15 +46,39 @@ export const useTidePage = async (
   slug?: string,
   site?: number
 ): Promise<TidePageBase> => {
+  const logger = useLogger()
   const route = useRoute()
+
   const path = slug || route.path
   const { public: config } = useRuntimeConfig()
   const siteId = site || config.tide?.site
 
+  const sectionRequestId = useSectionId()
+
+  const debugLogger = (message: string, data = {}) => {
+    logger.debug(message, {
+      label: 'useTidePage',
+      section_io_id: sectionRequestId,
+      ...data
+    })
+  }
+
+  debugLogger('Route requested', {
+    path,
+    siteId
+  })
+
   // check we dont add too many keys to cache
   const nuxt = useNuxtApp()
   const maxCacheItems = 50
   if (nuxt.payload.data) {
+    debugLogger(
+      `Nuxt cache length is: ${Object.keys(nuxt.payload.data).length}`,
+      {
+        nuxtCacheKeys: Object.keys(nuxt.payload.data)
+      }
+    )
+
     if (Object.keys(nuxt.payload.data).length > maxCacheItems + 1) {
       if (process.dev) {
         console.log('clear nuxt cache')
@@ -58,11 +95,22 @@ export const useTidePage = async (
       if (process.dev) {
         console.log('Cache reset for page', `page-${path}`)
       }
+
+      debugLogger(
+        'Cached data for this page is stale, clearing nuxt cache just for this page...',
+        {
+          cacheKey: `page-${path}`
+        }
+      )
+
       await clearNuxtData(`page-${path}`)
     }
   }
 
-  const headers = {}
+  const headers: {
+    cookie?: string
+    'x-section-request-id'?: string
+  } = {}
 
   // Need to manually pass the cookies needed for auth as they aren't automatically added when server rendered
   if (isPreviewPath(path)) {
@@ -73,9 +121,15 @@ export const useTidePage = async (
     headers.cookie = `${AuthCookieNames.ACCESS_TOKEN}=${accessTokenCookie.value};${AuthCookieNames.ACCESS_TOKEN_EXPIRY}=${accessTokenExpiryCookie.value}`
   }
 
+  if (process.server) {
+    headers['x-section-request-id'] = sectionRequestId
+  }
+
   let sectionCacheTags
 
   if (!pageData.value) {
+    debugLogger('No cached page found, fetching the page data...')
+
     const { data, error } = await useFetch('/api/tide/page', {
       key: `page-${path}`,
       baseURL: config.apiUrl || '',
@@ -102,12 +156,22 @@ export const useTidePage = async (
       useTideError(error.value?.statusCode)
     }
 
-    await checkForRedirect(data.value)
+    debugLogger('Page data fetched', {
+      pageTitle: data.value.title,
+      pageNodeId: data.value.nid
+    })
+
+    await checkForRedirect(data.value, debugLogger)
 
     return data.value
   }
 
-  await checkForRedirect(pageData.value)
+  debugLogger('Cached data for this page was found and is being used...', {
+    pageTitle: pageData.value.title,
+    pageNodeId: pageData.value.nid
+  })
+
+  await checkForRedirect(pageData.value, debugLogger)
 
   return pageData.value
 }
diff --git a/packages/nuxt-ripple/composables/use-tide-site.ts b/packages/nuxt-ripple/composables/use-tide-site.ts
index 867cc63a46..7e08978a3f 100644
--- a/packages/nuxt-ripple/composables/use-tide-site.ts
+++ b/packages/nuxt-ripple/composables/use-tide-site.ts
@@ -1,10 +1,21 @@
 import type { TideSiteData } from './../types'
+import { useSectionId } from '#imports'
 
 export const useTideSite = async (id?: number): Promise<TideSiteData> => {
   const { public: config } = useRuntimeConfig()
   const siteId = id || config.tide?.site
   const { data: siteData } = useNuxtData(`site-${siteId}`)
 
+  const sectionRequestId = useSectionId()
+
+  const headers: {
+    'x-section-request-id'?: string
+  } = {}
+
+  if (process.server) {
+    headers['x-section-request-id'] = sectionRequestId
+  }
+
   let sectionCacheTags
 
   if (!siteData.value) {
@@ -14,6 +25,7 @@ export const useTideSite = async (id?: number): Promise<TideSiteData> => {
       params: {
         id: siteId
       },
+      headers,
       async onResponse({ response }) {
         sectionCacheTags = response.headers.get('section-cache-tags')
       }
diff --git a/packages/nuxt-ripple/server/api/tide/page.ts b/packages/nuxt-ripple/server/api/tide/page.ts
index ce34a582b3..5b6d35fc89 100644
--- a/packages/nuxt-ripple/server/api/tide/page.ts
+++ b/packages/nuxt-ripple/server/api/tide/page.ts
@@ -4,7 +4,8 @@ import {
   getQuery,
   H3Event,
   getCookie,
-  setResponseHeader
+  setResponseHeader,
+  getHeader
 } from 'h3'
 import { createHandler, TidePageApi } from '@dpc-sdp/ripple-tide-api'
 import { BadRequestError } from '@dpc-sdp/ripple-tide-api/errors'
@@ -41,11 +42,14 @@ export const createPageHandler = async (
       headers['X-OAuth2-Authorization'] = `Bearer ${tokenCookie}`
     }
 
+    const sectionId = getHeader(event, 'x-section-request-id')
+
     const pageResponse = await tidePageApi.getPageByPath(
       query.path,
       query.site,
       {},
-      headers
+      headers,
+      sectionId
     )
 
     // Need to pass on the section cache tags to the nuxt app
diff --git a/packages/nuxt-ripple/server/api/tide/site.ts b/packages/nuxt-ripple/server/api/tide/site.ts
index 23013fd6f3..1100f1429f 100644
--- a/packages/nuxt-ripple/server/api/tide/site.ts
+++ b/packages/nuxt-ripple/server/api/tide/site.ts
@@ -15,7 +15,9 @@ export const createSiteHandler = async (
       throw new BadRequestError('Site id is required')
     }
 
-    const siteResponse = await tideSiteApi.getSiteData(query.id)
+    const sectionId = getHeader(event, 'x-section-request-id')
+
+    const siteResponse = await tideSiteApi.getSiteData(query.id, sectionId)
 
     // Need to pass on the section cache tags to the nuxt app
     if (siteResponse.headers && siteResponse.headers['section-cache-tags']) {
diff --git a/packages/ripple-tide-api/src/services/http-client.ts b/packages/ripple-tide-api/src/services/http-client.ts
index df4b6c8ace..51c9d00199 100644
--- a/packages/ripple-tide-api/src/services/http-client.ts
+++ b/packages/ripple-tide-api/src/services/http-client.ts
@@ -38,7 +38,11 @@ export default class HttpClient {
           `${request.method?.toUpperCase()} request to ${this.client.getUri(
             request
           )}`,
-          { label: this.logLabel }
+          {
+            label: this.logLabel,
+            // _logId is a custom property added by us https://github.com/axios/axios/issues/2203
+            section_io_id: (request as any)._logId || 'no section id'
+          }
         )
         return request
       },
@@ -62,7 +66,9 @@ export default class HttpClient {
               error.request.path
             }`,
             {
-              label: this.logLabel
+              label: this.logLabel,
+              // _logId is a custom property added by us https://github.com/axios/axios/issues/2203
+              section_io_id: error.request?._logId || 'no section id'
             }
           )
         } else {
diff --git a/packages/ripple-tide-api/src/services/tide-page.ts b/packages/ripple-tide-api/src/services/tide-page.ts
index 040da85d18..fccef9ff6d 100644
--- a/packages/ripple-tide-api/src/services/tide-page.ts
+++ b/packages/ripple-tide-api/src/services/tide-page.ts
@@ -82,12 +82,17 @@ export default class TidePageApi extends TideApiBase {
     }
   }
 
-  async getRouteByPath(path: string, site: string = this.site, headers = {}) {
+  async getRouteByPath(
+    path: string,
+    site: string = this.site,
+    headers = {},
+    logId?: string
+  ) {
     this.path = path
 
     const routeUrl = `/route?site=${site}&path=${path}`
 
-    return this.get(routeUrl, { headers })
+    return this.get(routeUrl, { headers, _logId: logId })
       .then((response) => response?.data?.data?.attributes)
       .catch((error) => {
         throw new NotFoundError(
@@ -103,19 +108,20 @@ export default class TidePageApi extends TideApiBase {
     path: string,
     siteQuery: string | undefined,
     params = {},
-    headers = {}
+    headers = {},
+    logId?: string
   ) {
     const site = siteQuery || this.site
 
     if (this.isShareLink(path)) {
-      return this.getPageByShareLink(path, site)
+      return this.getPageByShareLink(path, site, logId)
     }
 
     if (this.isPreviewLink(path)) {
-      return this.getPageFromPreviewLink(path, site, params, headers)
+      return this.getPageFromPreviewLink(path, site, params, headers, logId)
     }
 
-    const route = await this.getRouteByPath(path, site, headers)
+    const route = await this.getRouteByPath(path, site, headers, logId)
     if (route && !route.error) {
       if (route.hasOwnProperty('redirect_type')) {
         return {
@@ -133,11 +139,15 @@ export default class TidePageApi extends TideApiBase {
       if (includes !== '') {
         fullParams['include'] = includes
       }
-      return this.getPageByRouteData(route, { params: fullParams, headers })
+      return this.getPageByRouteData(route, {
+        params: fullParams,
+        headers,
+        _logId: logId
+      })
     }
   }
 
-  async getPageByShareLink(path: string, site: string) {
+  async getPageByShareLink(path: string, site: string, logId?: string) {
     const response = await this.get(path).then(({ data: res }) => {
       return res?.data ? jsonapiParse.parse(res).data || res.data : null
     })
@@ -163,7 +173,8 @@ export default class TidePageApi extends TideApiBase {
 
     return await this.getPageByRouteData(routeData, {
       headers: { 'X-Share-Link-Token': response.id },
-      params
+      params,
+      _logId: logId
     })
   }
 
@@ -171,7 +182,8 @@ export default class TidePageApi extends TideApiBase {
     path,
     site,
     params = {},
-    headers = {}
+    headers = {},
+    logId?: string
   ): Promise<any> {
     try {
       const { 2: contentType, 3: uuid, 4: revisionId } = path.split('/')
@@ -193,7 +205,8 @@ export default class TidePageApi extends TideApiBase {
 
       return await this.getPageByRouteData(routeData, {
         headers,
-        params: fullParams
+        params: fullParams,
+        _logId: logId
       })
     } catch (error) {
       throw new NotFoundError(`Couldn't get page preview`, {
diff --git a/packages/ripple-tide-api/src/services/tide-site.ts b/packages/ripple-tide-api/src/services/tide-site.ts
index 27b324cd0e..45128c3058 100644
--- a/packages/ripple-tide-api/src/services/tide-site.ts
+++ b/packages/ripple-tide-api/src/services/tide-site.ts
@@ -19,7 +19,7 @@ export default class TideSite extends TideApiBase {
     this.siteMapping = siteMapping
   }
 
-  async getSiteData(siteid) {
+  async getSiteData(siteid, logId?: string) {
     if (!this.siteMapping) {
       throw new Error('Error loading site mapping')
     }
@@ -41,7 +41,8 @@ export default class TideSite extends TideApiBase {
       const { data: response, headers } = await this.get(
         `/taxonomy_term/sites`,
         {
-          params
+          params,
+          _logId: logId
         }
       )
       if (response && response.data.length > 0) {

From 1b2821d2efbc69f6963ded10838dd3e314ff8dfb Mon Sep 17 00:00:00 2001
From: Jeffrey Dowdle <jeffrey.dowdle@dpc.vic.gov.au>
Date: Fri, 29 Dec 2023 08:29:46 +1100
Subject: [PATCH 3/4] style(@dpc-sdp/nuxt-ripple): fixed linting

---
 packages/nuxt-ripple/composables/use-logger.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nuxt-ripple/composables/use-logger.ts b/packages/nuxt-ripple/composables/use-logger.ts
index dfb1af4908..98d0e1ba36 100644
--- a/packages/nuxt-ripple/composables/use-logger.ts
+++ b/packages/nuxt-ripple/composables/use-logger.ts
@@ -1,4 +1,4 @@
-export const useLogger = (id?: number) => {
+export const useLogger = () => {
   const { $logger } = useNuxtApp()
   const noop = () => {}
 

From 3c0ae7f3fa2eb5a9ff6d6720fb9b101c36d0c73d Mon Sep 17 00:00:00 2001
From: dylankelly <dylan.kelly@dpc.vic.gov.au>
Date: Fri, 12 Jan 2024 15:17:17 +1100
Subject: [PATCH 4/4] chore: remove console log

---
 packages/nuxt-ripple/composables/use-tide-page.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/nuxt-ripple/composables/use-tide-page.ts b/packages/nuxt-ripple/composables/use-tide-page.ts
index d213ad5e81..e5fc3e801d 100644
--- a/packages/nuxt-ripple/composables/use-tide-page.ts
+++ b/packages/nuxt-ripple/composables/use-tide-page.ts
@@ -80,9 +80,7 @@ export const useTidePage = async (
     )
 
     if (Object.keys(nuxt.payload.data).length > maxCacheItems + 1) {
-      if (process.dev) {
-        console.log('clear nuxt cache')
-      }
+      debugLogger(`Cache is larger than max ${maxCacheItems} items, clearing...`)
       clearNuxtData()
     }
   }
@@ -92,9 +90,6 @@ export const useTidePage = async (
   // Refresh data so it doesnt go stale whilst client side nav
   if (pageData.value && pageData.value._fetched) {
     if (isCacheTimeExpired(pageData.value._fetched)) {
-      if (process.dev) {
-        console.log('Cache reset for page', `page-${path}`)
-      }
 
       debugLogger(
         'Cached data for this page is stale, clearing nuxt cache just for this page...',