Merge pull request #1398 from dpc-sdp/release/2.22.0

Release/2.22.0

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v2.22.0
+
+[compare changes](https://github.com/dpc-sdp/ripple-framework/compare/2.22.0...v2.22.0)
+
 ## v2.21.0
 
 [compare changes](https://github.com/dpc-sdp/ripple-framework/compare/2.21.0...v2.21.0)

examples/nuxt-app/app.config.ts

@@ -207,16 +207,13 @@ export default defineAppConfig({
         }
       },
       mapResultHooks: {
-        exampleMapResultsHook: (map, results, locationQuery) => {
-          if (!map || !results || !locationQuery) return
+        exampleMapResultsHook: (map, results) => {
+          if (!map || !results) return
 
           centerMap(
             map,
-            [
-              parseFloat(locationQuery?.center[0]),
-              parseFloat(locationQuery?.center[1])
-            ],
-            13,
+            [15809362.126037747, -4543542.166789566],
+            8,
             {},
             'popover'
           )

examples/nuxt-app/layers/map-features/components/global/test/TestMapShapeLayer.vue

@@ -26,6 +26,8 @@ const lgaShapeURL = computed(() => {
 
 const defaultStyleFn = (feature: Feature, style: Style) => {
   style.getFill().setColor([255, 255, 255, 0.5])
+
+  return style
 }
 
 const layerIdentifier = 'shapeLayer'

examples/nuxt-app/test/features/maps/maps.feature

@@ -33,7 +33,7 @@ Feature: Custom collection map component
     Given I visit the page "/map"
     And the map is loaded
     When I click the map component at coordinates 517 242
-    When I wait 2 seconds
+    When I wait 4 seconds
     Then the map matches the image snapshot "map-popup-type-popover"
 
   @mockserver
@@ -45,7 +45,7 @@ Feature: Custom collection map component
     Given I visit the page "/map"
     And the map is loaded
     When I click the map component at coordinates 517 242
-    When I wait 2 seconds
+    When I wait 4 seconds
     Then the map matches the image snapshot "map-popup-type-sidebar"
 
   @mockserver
@@ -58,7 +58,7 @@ Feature: Custom collection map component
     Given I visit the page "/map"
     And the map is loaded
     When I click the map component at coordinates 663 242
-    When I wait 2 seconds
+    When I wait 4 seconds
     Then the map matches the image snapshot "map-popup-type-popover-with-sidepanel"
 
   @mockserver
@@ -71,7 +71,7 @@ Feature: Custom collection map component
     Given I visit the page "/map"
     And the map is loaded
     When I click the map component at coordinates 663 242
-    When I wait 2 seconds
+    When I wait 4 seconds
     Then the map matches the image snapshot "map-popup-type-sidebar-with-sidepanel"
 
   @mockserver
@@ -82,8 +82,8 @@ Feature: Custom collection map component
     Given the "/api/tide/elasticsearch/elasticsearch_index_develop_node/_search" network request is stubbed with fixture "/maps/simple-map-results" and status 200 as alias "searchReq"
     Given I visit the page "/map"
     And the map is loaded
-    When I click the map component at coordinates 606 424
-    When I wait 2 seconds
+    When I click the map component at coordinates 606 442
+    When I wait 4 seconds
     Then the map matches the image snapshot "map-popup-type-sidebar-with-sidepanel-double-pin"
 
   @mockserver
@@ -96,7 +96,7 @@ Feature: Custom collection map component
     Given I visit the page "/map"
     And the map is loaded
     Given I click the side panel item with text "Single Pin Test"
-    When I wait 2 seconds
+    When I wait 4 seconds
     Then the map matches the image snapshot "map-sidepanel-item-click"
 
   @mockserver
@@ -111,18 +111,19 @@ Feature: Custom collection map component
     And the map is loaded
     Then I click the map component at coordinates 545 385
     And I wait 1 seconds
-    Then I click the map component at coordinates 660 320
-    And I wait 2 seconds
+    Then I click the map component at coordinates 650 320
+    And I wait 4 seconds
     Then the map matches the image snapshot "map-popover-max-zoom-cluster"
 
   @mockserver
   Scenario: Map zooms to intended initial location with results hook
     Given I load the page fixture with "/maps/basic-page"
     And a custom map results hook called "exampleMapResultsHook" is used
     Then the page endpoint for path "/map" returns the loaded fixture
-    And the "/api/tide/elasticsearch/elasticsearch_index_develop_node/_search" network request is stubbed with fixture "/maps/simple-map-results" and status 200 as alias "searchReq"
-    Given I visit the page "/map?location[center]=15809362.126037747&location[center]=-4543542.166789566"
+    And the "/api/tide/elasticsearch/elasticsearch_index_develop_node/_search" network request is delayed by 500 milliseconds and stubbed with fixture "/maps/simple-map-results", status 200 and alias "searchReq"
+    Given I visit the page "/map"
     And the map is loaded
+    When I wait 4 seconds
     Then the map matches the image snapshot "map-initial-location-results-hook"
 
   @mockserver

examples/nuxt-app/test/features/maps/vsba.feature

@@ -88,7 +88,7 @@ Feature: School buildings map
     Given the "/api/tide/elasticsearch/elasticsearch_index_develop_node/_search" network request is stubbed with fixture "/map-table/vsba/response-all" and status 200 as alias "searchReq"
     And I visit the page "/map"
     When the map is loaded
-    When I click the map component at coordinates 650 429
+    When I click the map component at coordinates 630 440
     When I wait 4 seconds
     Then the map matches the image snapshot "map-cluster-zoom"
 

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.21.0",
+  "version": "2.22.0",
   "npmClient": "pnpm",
   "exact": true,
   "command": {

packages/eslint-config-ripple/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/eslint-config-ripple",
   "description": "ESLint config for Ripple projects",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "license": "Apache-2.0",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
   "main": "index.js",

packages/nuxt-ripple-analytics/app.config.ts

@@ -15,6 +15,13 @@ export default defineAppConfig({
   ripple: {
     analytics: {
       eventListeners
+    },
+    featureFlags: {
+      newRelicBrowserBeacon: 'bam.nr-data.net',
+      newRelicBrowserJSErrorsEnabled: true,
+      newRelicBrowserCookiesEnabled: false,
+      newRelicBrowserDistributedTracingEnabled: false,
+      newRelicBrowserAjaxDenyList: ['bam.nr-data.net']
     }
   }
 })

packages/nuxt-ripple-analytics/composables/useNewRelicBrowserAgent.ts

@@ -0,0 +1,63 @@
+import type { IRplFeatureFlags } from '@dpc-sdp/ripple-tide-api/types'
+
+export default () => {
+  const config = useRuntimeConfig()
+  const browserAgentConfig = config?.public?.newRelic?.browser
+
+  if (!browserAgentConfig.enabled) {
+    return
+  }
+
+  const featureFlags: IRplFeatureFlags = inject('featureFlags', {
+    newRelicBrowserBeacon: 'bam.nr-data.net',
+    newRelicBrowserJSErrorsEnabled: true,
+    newRelicBrowserCookiesEnabled: false,
+    newRelicBrowserDistributedTracingEnabled: false,
+    newRelicBrowserAjaxDenyList: ['bam.nr-data.net']
+  })
+
+  // Scripts from new relic need to be dynamically imported, otherwise they will throw an error
+  const initBrowserAgent = async () => {
+    // Error module has to be manually added when using new relic via npm
+    const { JSErrors } = await import(
+      '@newrelic/browser-agent/features/jserrors'
+    )
+
+    const options = {
+      info: {
+        beacon: featureFlags.newRelicBrowserBeacon,
+        licenseKey: browserAgentConfig.licenseKey,
+        applicationID: browserAgentConfig.applicationID,
+        sa: 1 // 'sa' stands for 'standalone' https://github.com/newrelic/newrelic-browser-agent/blob/bbf414c0d6a483141f32e2dd31b1f8a23ad1dda5/src/features/logging/aggregate/index.js#L100
+      },
+      init: {
+        distributed_tracing: {
+          enabled: featureFlags.newRelicBrowserDistributedTracingEnabled
+        },
+        privacy: {
+          cookies_enabled: featureFlags.newRelicBrowserCookiesEnabled
+        },
+        jserrors: { enabled: featureFlags.newRelicBrowserJSErrorsEnabled },
+        ajax: { deny_list: featureFlags.newRelicBrowserAjaxDenyList }
+      },
+      loader_config: {
+        accountID: browserAgentConfig.accountID,
+        trustKey: browserAgentConfig.trustKey,
+        agentID: browserAgentConfig.agentID,
+        licenseKey: browserAgentConfig.licenseKey,
+        applicationID: browserAgentConfig.applicationID
+      },
+      features: [JSErrors]
+    }
+
+    const { BrowserAgent } = await import(
+      '@newrelic/browser-agent/loaders/browser-agent'
+    )
+
+    new BrowserAgent(options)
+  }
+
+  if (process.client) {
+    initBrowserAgent()
+  }
+}

packages/nuxt-ripple-analytics/nuxt.config.ts

@@ -7,6 +7,16 @@ export default defineNuxtConfig({
         analytics: {
           GTM: 'GTM-KF8NCW2'
         }
+      },
+      newRelic: {
+        browser: {
+          enabled: false,
+          accountID: '',
+          trustKey: '',
+          agentID: '',
+          licenseKey: '',
+          applicationID: ''
+        }
       }
     }
   }

packages/nuxt-ripple-analytics/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/nuxt-ripple-analytics",
   "description": "Nuxt module for handling event tracking.",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "@dpc-sdp/ripple-ui-core": "workspace:*",
-    "@gtm-support/core": "^2.0.0"
+    "@gtm-support/core": "^2.0.0",
+    "@newrelic/browser-agent": "^1.273.0"
   },
   "devDependencies": {
     "@dpc-sdp/nuxt-ripple": "workspace:*",

packages/nuxt-ripple-analytics/plugins/newRelicBrowser.ts

@@ -0,0 +1,29 @@
+import { defineNuxtPlugin } from '#app'
+import trackError from '../utils/trackError'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  /* @ts-ignore process is extended by webpack */
+  if (process.client) {
+    nuxtApp.vueApp.use({
+      install(app: any) {
+        useNewRelicBrowserAgent()
+
+        const existingErrorHandler = app.config.errorHandler
+
+        // Catch all vue errors
+        app.config.errorHandler = (error: Error) => {
+          console.error(error)
+          trackError(error)
+
+          // Allow multiple error handlers to run
+          if (
+            existingErrorHandler &&
+            typeof existingErrorHandler === 'function'
+          ) {
+            existingErrorHandler(error)
+          }
+        }
+      }
+    })
+  }
+})

packages/nuxt-ripple-analytics/utils/trackError.ts

@@ -0,0 +1,15 @@
+declare global {
+  interface Window {
+    newrelic?: {
+      noticeError: (error: any) => void
+    }
+  }
+}
+
+const trackError = (error: any) => {
+  if (window?.newrelic?.noticeError) {
+    window.newrelic.noticeError(error)
+  }
+}
+
+export default trackError

packages/nuxt-ripple-cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/nuxt-ripple-cli",
   "description": "A CLI for simplifying common setup and scaffolding tasks",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "license": "Apache-2.0",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
   "main": "./dist/index.js",

packages/nuxt-ripple-preview/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/nuxt-ripple-preview",
   "description": "Adds support for drupal preview links in Ripple frontend sites",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",

packages/nuxt-ripple/components/TideAlerts.vue

@@ -71,6 +71,7 @@ const filteredAlerts = computed(() => {
       return !dismissedIds.includes(alert.alertId)
     })
   } catch (e) {
+    trackError(e)
     console.error(
       'Something went wrong when trying to get dismissed alerts cookie'
     )

packages/nuxt-ripple/composables/use-tide-error.ts

@@ -1,4 +1,7 @@
-export const useTideError = (statusCode: number): void => {
+export const useTideError = (
+  statusCode: number,
+  originalError?: Error
+): void => {
   if (statusCode) {
     switch (statusCode) {
       case 404:
@@ -28,6 +31,10 @@ export const useTideError = (statusCode: number): void => {
         break
 
       default:
+        if (originalError) {
+          trackError(originalError)
+        }
+
         throw createError({
           statusCode: 500,
           statusMessage: 'We have a glitch in our system.',

packages/nuxt-ripple/composables/use-tide-page.ts

@@ -151,7 +151,7 @@ export const useTidePage = async (
     }
 
     if (error && error.value?.statusCode) {
-      useTideError(error.value?.statusCode)
+      useTideError(error.value?.statusCode, error.value)
     }
 
     debugLogger('Page data fetched', {

packages/nuxt-ripple/composables/use-tide-site.ts

@@ -34,7 +34,7 @@ export const useTideSite = async (id?: number): Promise<TideSiteData> => {
     if (error && error.value?.statusCode) {
       console.log(error)
       console.log('API error fetching site data')
-      useTideError(500)
+      useTideError(500, error.value)
     }
 
     // Section.io cache tags must be set on the response header to invalidate the cache after a change in drupal

packages/nuxt-ripple/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/nuxt-ripple",
   "description": "Nuxt module for integrating Ripple and Tide",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",

packages/ripple-sdp-core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/ripple-sdp-core",
   "description": "SDP core content types",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "license": "Apache-2.0",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
   "main": "./nuxt.config.ts",

packages/ripple-storybook/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ripple-storybook",
   "description": "Ripple Storybook instance",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "license": "Apache-2.0",
   "private": true,
   "repository": "https://github.com/dpc-sdp/ripple-framework",