@newskit-render/core 4.13.9 → 4.14.0-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.13.9](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@4.13.9-alpha.1...@newskit-render/core@4.13.9) (2023-08-16)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
 ## [4.13.8](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@4.13.8-alpha.0...@newskit-render/core@4.13.8) (2023-08-02)
 
 **Note:** Version bump only for package @newskit-render/core

package/Dockerfile.withNewRelic

@@ -0,0 +1,15 @@
+FROM node:18.17-buster
+
+WORKDIR /app
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm install @newrelic/next
+COPY .next/standalone ./standalone
+COPY public ./standalone/public
+COPY .next/static ./standalone/.next/static
+
+EXPOSE 3000
+ENV PORT 3000
+
+CMD ["node", "-r", "@newrelic/next", "./standalone/server.js"]

package/config/environment.ts

@@ -27,7 +27,8 @@ export const getSanitizedConfig = () => {
     sitemapFirstPublicationDate: process.env
       .SITEMAP_FIRST_PUBLICATION_DATE as string,
     sitemapPublicationName: process.env.SITEMAP_PUBLICATION_NAME as string,
-    newRelicEnabled: process.env.NEW_RELIC_ENABLED as string,
+    winstonEnabled: process.env.WINSTON_ENABLED as string,
+    winstonLogLevel: process.env.WINSTON_LOG_LEVEL as string,
     experimentationWeb: process.env.EXPERIMENTATION_WEB as string,
     sourcepointAccountId: process.env.SOURCEPOINT_ACCOUNT_ID as string,
     sourcepointPropertyHref: process.env.SOURCEPOINT_PROPERTY_HREF as string,
@@ -58,7 +59,8 @@ export const {
   optimizelysdkKey,
   sitemapFirstPublicationDate,
   sitemapPublicationName,
-  newRelicEnabled,
+  winstonEnabled,
+  winstonLogLevel,
   experimentationWeb,
   sourcepointAccountId,
   sourcepointPropertyHref,

package/helpers/__tests__/logger.test.ts

@@ -0,0 +1,62 @@
+import { replaceConsoleWithLogger } from '../logger'
+
+describe('logger', () => {
+  const { window } = global
+
+  const loggerMock = {
+    debug: jest.fn(),
+    warn: jest.fn(),
+    info: jest.fn(),
+    error: jest.fn(),
+  }
+
+  beforeEach(() => {
+    delete global.window
+    jest.resetAllMocks()
+  })
+  afterEach(() => {
+    global.window = window
+  })
+
+  it('should not replace console.log with Wintson', () => {
+    const replaceConsole = replaceConsoleWithLogger(loggerMock, 'false')
+    replaceConsole()
+    console.log('test')
+    expect(loggerMock.info).not.toBeCalledWith('test')
+  })
+
+  it('should replace console.log with Wintson', () => {
+    const replaceConsole = replaceConsoleWithLogger(loggerMock, 'true')
+    replaceConsole()
+    console.log('test')
+    expect(loggerMock.info).toBeCalledWith('test')
+  })
+
+  it('should replace console.info with Wintson', () => {
+    const replaceConsole = replaceConsoleWithLogger(loggerMock, 'true')
+    replaceConsole()
+    console.info('test')
+    expect(loggerMock.info).toBeCalledWith('test')
+  })
+
+  it('should replace console.warn with Wintson', () => {
+    const replaceConsole = replaceConsoleWithLogger(loggerMock, 'true')
+    replaceConsole()
+    console.warn('test')
+    expect(loggerMock.warn).toBeCalledWith('test')
+  })
+
+  it('should replace console.error with Wintson', () => {
+    const replaceConsole = replaceConsoleWithLogger(loggerMock, 'true')
+    replaceConsole()
+    console.error('test')
+    expect(loggerMock.error).toBeCalledWith('test')
+  })
+
+  it('should replace console.debug with Wintson', () => {
+    const replaceConsole = replaceConsoleWithLogger(loggerMock, 'true')
+    replaceConsole()
+    console.debug('test')
+    expect(loggerMock.debug).toBeCalledWith('test')
+  })
+})

package/helpers/logger/getWinstonLogger.ts

@@ -0,0 +1,19 @@
+import winston, { Logger } from 'winston'
+import newrelicFormatter from '@newrelic/winston-enricher'
+
+const newrelicWinstonFormatter = newrelicFormatter(winston)
+
+export const getWinstonLogger = (winstonLogLevel?: string): Logger =>
+  winston.createLogger({
+    level: winstonLogLevel || 'info',
+    format: winston.format.json(),
+    transports: [
+      new winston.transports.Console({
+        format: winston.format.combine(
+          winston.format.timestamp({ format: 'DD-MM-YYYY T hh:mm:ss.sss A' }),
+          winston.format.json(),
+          newrelicWinstonFormatter()
+        ),
+      }),
+    ],
+  })

package/helpers/logger/index.ts

@@ -0,0 +1,20 @@
+import newrelic from 'newrelic'
+import { winstonEnabled, winstonLogLevel } from '../../config'
+import { getWinstonLogger } from './getWinstonLogger'
+import { replaceConsoleWithLogger } from './replaceConsoleWithLogger'
+
+const logger = getWinstonLogger(winstonLogLevel)
+const replaceConsole = replaceConsoleWithLogger(logger, winstonEnabled)
+
+const replaceConsoleAndSetTransactionName = (transactionName: string) => {
+  replaceConsole()
+
+  newrelic.setTransactionName(transactionName)
+}
+
+export {
+  logger,
+  replaceConsoleWithLogger,
+  replaceConsole,
+  replaceConsoleAndSetTransactionName,
+}

package/helpers/logger/replaceConsoleWithLogger.ts

@@ -0,0 +1,14 @@
+import { Logger } from 'winston'
+
+export const replaceConsoleWithLogger =
+  (logger: Logger, winstonEnabled?: string) => () => {
+    if (winstonEnabled === 'true') {
+      console.log = (...message: any[]) => logger.info.call(logger, ...message)
+      console.info = (...message: any[]) => logger.info.call(logger, ...message)
+      console.warn = (...message: any[]) => logger.warn.call(logger, ...message)
+      console.error = (...message: any[]) =>
+        logger.error.call(logger, ...message)
+      console.debug = (...message: any[]) =>
+        logger.debug.call(logger, ...message)
+    }
+  }

package/infrastructure/.circleci/config.yml

@@ -503,6 +503,9 @@ jobs:
         description: Project name that will be used to tag docker images i.e ncu-newskit-render
         type: string
         default: <% PROJECT_NAME >
+      dockerfile:
+        type: string
+        default: "Dockerfile.withNewRelic"
     working_directory: ~/project
     executor: node
     steps:
@@ -536,7 +539,7 @@ jobs:
             <% PACKAGE_DOCKER_BUILD >
 
             echo $DOCKER_PASSWORD | docker login -u $DOCKER_USERNAME --password-stdin
-            docker build -t << parameters.project >> .
+            docker build -f << parameters.dockerfile >> -t << parameters.project >> .
             $(aws ecr get-login --no-include-email)
             for tag in $TAGS; do
               docker tag << parameters.project >> $DOCKER_REGISTRY_URL/<< parameters.project >>:$tag;
@@ -879,6 +882,7 @@ workflows:
           <<: *only_on_pr_branch
           context: <% PROJECT_NAME >-dev
           name: publish_docker
+          dockerfile: "Dockerfile"
           requires:
             - install_deps
             - aws_oidc

package/newrelic.js

@@ -28,7 +28,12 @@ exports.config = {
      *
      * @env NEW_RELIC_DISTRIBUTED_TRACING_ENABLED
      */
-    enabled: false,
+    enabled: true,
+  },
+  application_logging: {
+    forwarding: {
+      enabled: true,
+    },
   },
   logging: {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "4.13.9",
+  "version": "4.14.0-alpha.1",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -11,7 +11,9 @@
   "scripts": {
     "build": "next build",
     "start": "NODE_OPTIONS=--max_old_space_size=8192 next dev",
+    "dev:nr": "NODE_OPTIONS='-r @newrelic/next' next dev",
     "start:prod": "next build && next start",
+    "start:prod:nr": "next build && NODE_OPTIONS='-r @newrelic/next' next start",
     "clean": "rm -rf node_modules & rm -f package-lock.json & rm -f yarn.lock & rm -rf .next",
     "test:unit": "jest --coverage --verbose --silent --i",
     "test:unit:ci": "JEST_JUNIT_OUTPUT_NAME=core.xml node --max_old_space_size=4096 --expose-gc ./node_modules/.bin/jest --ci --coverage --reporters=default --reporters=jest-junit --runInBand --logHeapUsage",
@@ -38,26 +40,29 @@
     "@emotion-icons/material-outlined": "3.14.0",
     "@emotion/react": "11.9.3",
     "@emotion/styled": "11.9.3",
+    "@newrelic/next": "0.5.2",
+    "@newrelic/winston-enricher": "4.0.1",
     "@newskit-render/api": "^1.8.0",
     "@newskit-render/auth": "^1.7.1",
     "@newskit-render/checkout": "^3.7.4",
     "@newskit-render/feature-flags": "^1.6.0",
     "@newskit-render/feed": "^1.8.1",
-    "@newskit-render/my-account": "^7.2.0",
+    "@newskit-render/my-account": "^7.2.1-alpha.0",
     "@newskit-render/shared-components": "^4.1.0",
     "@newskit-render/standalone-components": "^3.16.4",
     "@newskit-render/validation": "^1.12.1",
     "cross-fetch": "3.1.5",
     "graphql": "16.6.0",
     "lodash.get": "4.4.2",
-    "newrelic": "7.1.0",
+    "newrelic": "10.6.1",
     "newskit": "7.4.0",
     "next": "13.4.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-helmet": "6.1.0",
     "sharp": "0.32.4",
-    "swr": "1.3.0"
+    "swr": "1.3.0",
+    "winston": "3.10.0"
   },
   "devDependencies": {
     "@apollo/react-testing": "4.0.0",
@@ -69,7 +74,7 @@
     "@percy/cypress": "3.1.2",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
-    "@types/newrelic": "7.0.0",
+    "@types/newrelic": "9.14.0",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
     "@types/react-helmet": "6.1.0",

package/pages/[section]/[articleId]/[articleSlug].tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
 import {
   createApolloClient,
   ClientTypes,
@@ -66,7 +66,7 @@ export async function getServerSideProps(context) {
     params: { articleId, section, articleSlug },
   } = context
 
-  newrelic.setTransactionName(
+  replaceConsoleAndSetTransactionName(
     `Article: /${section}/${articleId}/${articleSlug}`
   )
 

package/pages/[section]/[articleId]/relatedArticles.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
 import { getAcsCookie, ClientTypes, Config } from '@newskit-render/api'
 import {
   RecommendedArticleList,
@@ -65,7 +65,7 @@ const RelatedArticlesPage: React.FC<RelatedArticles> = ({
 }
 
 export async function getServerSideProps(context) {
-  newrelic.setTransactionName('RelatedArticlesPage')
+  replaceConsoleAndSetTransactionName('RelatedArticlesPage')
   console.warn('context:')
   console.warn(context.req && context.req.headers)
   const {

package/pages/[section]/index.tsx

@@ -1,4 +1,4 @@
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../helpers/logger'
 import {
   createApolloClient,
   getAcsCookie,
@@ -24,7 +24,7 @@ export async function getServerSideProps(context) {
     ? getAcsCookie(ClientTypes.main, context.req.headers.cookie)
     : ''
   const siteHost = getHost(context.req)
-  newrelic.setTransactionName(`Section: ${section}`)
+  replaceConsoleAndSetTransactionName(`Section: ${section}`)
 
   let data
   let user

package/pages/_app.tsx

@@ -4,7 +4,6 @@ import Head from 'next/head'
 import { ThemeProvider, Global, styled } from 'newskit'
 import { Publisher } from '@newskit-render/api'
 import { AppContextProvider, AppContext } from '../context/app-context'
-import { logger } from '../helpers/logger'
 import { InstrumentationContextProvider } from '../app-context/InstrumentationContextProvider'
 import { getTenant } from '../helpers/multiTenancy'
 import { GlobalStyling } from '../css'
@@ -23,12 +22,6 @@ import {
   graphik,
 } from '../assets/fontFamily'
 
-if (!process.browser) {
-  // eslint-disable-next-line global-require
-  require('newrelic')
-  logger()
-}
-
 const PageContainer = styled.div`
   position: relative;
   min-height: 100vh;

package/pages/_document.tsx

@@ -11,7 +11,6 @@ import Document, {
 import { ExperimentationWeb, Consent, Tealium } from 'newskit'
 import Helmet from 'react-helmet'
 import newrelic from 'newrelic'
-import { getSubStringBetween } from '../components/utils'
 import {
   experimentationWeb,
   sourcepointAccountId,
@@ -25,9 +24,15 @@ import {
 export default class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
     const { html, head } = await ctx.renderPage()
+
+    const browserTimingHeader = newrelic.getBrowserTimingHeader({
+      hasToRemoveScriptWrapper: true,
+    })
+
     return {
       html,
       head,
+      browserTimingHeader,
     }
   }
 
@@ -44,18 +49,12 @@ export default class MyDocument extends Document {
       <Html lang="en">
         <Head>
           <>
-            <Script
-              id="browser-script"
+            <script
               type="text/javascript"
-              data-attribute="nr-browser"
               dangerouslySetInnerHTML={{
-                __html: getSubStringBetween(
-                  "<script type='text/javascript' defer>",
-                  '</script>',
-                  newrelic.getBrowserTimingHeader()
-                ),
+                // @ts-ignore
+                __html: this.props.browserTimingHeader,
               }}
-              strategy="lazyOnload"
             />
             {experimentationWeb &&
               featureFlags &&

package/pages/_error.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { NotFound, GenericError } from '@newskit-render/my-account'
 import Error from 'next/error'
-import { getCircularReplacer } from '../helpers/getCircularReplacer'
 import ErrorPage from '../components/ErrorPage/ErrorPage'
 import ErrorPageHelpHub from '../pages/help-hub/error'
 
@@ -61,11 +60,7 @@ CustomError.getInitialProps = ({ res, err, asPath }) => {
   const statusCode = res ? res.statusCode : err ? err.statusCode : 404
 
   // Logging the error for being captured by New Relic
-  console.error(
-    `An ${statusCode} error has occurred ${
-      err ? `:${JSON.stringify(err, getCircularReplacer())}` : ''
-    }`
-  )
+  console.error(`An ${statusCode} error has occurred`, err)
 
   return { statusCode, asPath }
 }

package/pages/account/add/[field].tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
 import { AddField, addComponentMap } from '@newskit-render/my-account'
 import validation from '../../../validation'
 import { DynamicPage } from '@newskit-render/my-account'
@@ -20,7 +20,7 @@ export const getServerSideProps = async (context) => {
     params: { field },
   } = context
   const doesAddpageExist = Object.keys(addComponentMap).includes(field)
-  newrelic.setTransactionName(`Account: add ${field}`)
+  replaceConsoleAndSetTransactionName(`Account: add ${field}`)
 
   if (!doesAddpageExist) {
     context.res.statusCode = 404

package/pages/account/cancellation/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Cancellation, getProviderProps } from '@newskit-render/my-account'
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
 import { optimizelysdkKey } from '../../../config' /* cra-effected */
 import validation from '../../../validation'
@@ -12,7 +12,7 @@ const AccountCancellation = (props) => (
 export default AccountCancellation
 
 export const getServerSideProps = async (context) => {
-  newrelic.setTransactionName('Account: Cancellation')
+  replaceConsoleAndSetTransactionName('Account: Cancellation')
   /* start cra-effected */
   const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
   /* end cra-effected */

package/pages/account/dream-team/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { DreamTeam, getProviderProps } from '@newskit-render/my-account'
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
 import { optimizelysdkKey } from '../../../config' /* cra-effected */
 
@@ -9,7 +9,7 @@ const AccountNewslettersAndAlerts = (props) => <DreamTeam {...props} />
 export default AccountNewslettersAndAlerts
 
 export const getServerSideProps = async (context) => {
-  newrelic.setTransactionName('Account: Dream Team')
+  replaceConsoleAndSetTransactionName('Account: Dream Team')
   /* start cra-effected */
   const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
   /* end cra-effected */

package/pages/account/edit/[field].tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
 import {
   EditField,
   getProviderProps,
@@ -28,7 +28,7 @@ export const getServerSideProps = async (context) => {
   } = context
   const doesEditPageExist = Object.keys(editComponentMap).includes(field)
 
-  newrelic.setTransactionName(`Account: edit ${field}`)
+  replaceConsoleAndSetTransactionName(`Account: edit ${field}`)
 
   if (!doesEditPageExist) {
     context.res.statusCode = 404

package/pages/account/holiday-stop/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { getProviderProps, HolidayStop } from '@newskit-render/my-account'
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
 import { optimizelysdkKey } from '../../../config' /* cra-effected */
 
@@ -9,7 +9,7 @@ const AccountHolidayStop = (props) => <HolidayStop {...props} />
 export default AccountHolidayStop
 
 export const getServerSideProps = async (context) => {
-  newrelic.setTransactionName('Account: Book a Holiday Stop')
+  replaceConsoleAndSetTransactionName('Account: Book a Holiday Stop')
   /* start cra-effected */
   const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
   /* end cra-effected */

package/pages/account/holiday-stop/previous-holiday-stops.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { getProviderProps, HolidayStopList } from '@newskit-render/my-account'
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
 import { holidayStopListContextOverrides } from '../../../context/app-context/holidayStopListContextOverrides'
 
 const AccountPreviousHolidayStops = (props) => (
@@ -14,6 +14,6 @@ const AccountPreviousHolidayStops = (props) => (
 export default AccountPreviousHolidayStops
 
 export const getServerSideProps = async (context) => {
-  newrelic.setTransactionName('Account: Previous Holiday Stops')
+  replaceConsoleAndSetTransactionName('Account: Previous Holiday Stops')
   return getProviderProps({ ...context, provider: 'HolidayStop' })
 }

package/pages/account/holiday-stop/upcoming-holiday-stops.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { getProviderProps, HolidayStopList } from '@newskit-render/my-account'
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
 import { holidayStopListContextOverrides } from '../../../context/app-context/holidayStopListContextOverrides'
 
 const AccountUpcomingHolidayStops = (props) => (
@@ -14,6 +14,6 @@ const AccountUpcomingHolidayStops = (props) => (
 export default AccountUpcomingHolidayStops
 
 export const getServerSideProps = async (context) => {
-  newrelic.setTransactionName('Account: Upcoming Holiday Stops')
+  replaceConsoleAndSetTransactionName('Account: Upcoming Holiday Stops')
   return getProviderProps({ ...context, provider: 'HolidayStop' })
 }

package/pages/account/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import newrelic from 'newrelic'
 import { PersonalDetails, getProviderProps } from '@newskit-render/my-account'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
 import { optimizelysdkKey } from '../../config' /* cra-effected */
 import { AccountDropdown } from '../../components/AccountDropdown' /* cra-disabled */
+import { replaceConsoleAndSetTransactionName } from '../../helpers/logger'
 
 const AccountPersonalDetails = (props) => (
   <>
@@ -22,7 +22,7 @@ export const getServerSideProps = async (context) => {
   /* start cra-effected */
   const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
   /* end cra-effected */
-  newrelic.setTransactionName('Account: Personal details')
+  replaceConsoleAndSetTransactionName('Account: Personal details')
   return getProviderProps(
     { ...context, provider: 'PersonalDetails' },
     { featureFlags } /* cra-effected */

package/pages/account/newsletters-and-alerts/index.tsx

@@ -3,7 +3,7 @@ import {
   NewslettersAndAlerts,
   getProviderProps,
 } from '@newskit-render/my-account'
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
 import { optimizelysdkKey } from '../../../config' /* cra-effected */
 
@@ -14,7 +14,7 @@ const AccountNewslettersAndAlerts = (props) => (
 export default AccountNewslettersAndAlerts
 
 export const getServerSideProps = async (context) => {
-  newrelic.setTransactionName('Account: Newsletters and Alerts')
+  replaceConsoleAndSetTransactionName('Account: Newsletters and Alerts')
   /* start cra-effected */
   const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
   /* end cra-effected */

package/pages/account/payment/[paymentMethod].tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
 import {
   getProviderProps,
   Payment,
@@ -23,7 +23,7 @@ const PaymentPage = (props) => {
 export default PaymentPage
 
 export const getServerSideProps = async (context) => {
-  newrelic.setTransactionName('Payment method')
+  replaceConsoleAndSetTransactionName('Payment method')
   /* start cra-effected */
   const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
   /* end cra-effected */

package/pages/account/payment/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
 import { Payment, getProviderProps } from '@newskit-render/my-account'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
 import { optimizelysdkKey } from '../../../config' /* cra-effected */
@@ -9,7 +9,7 @@ const AccountPayment = (props) => <Payment {...props} />
 export default AccountPayment
 
 export const getServerSideProps = async (context) => {
-  newrelic.setTransactionName('Edit Payment method')
+  replaceConsoleAndSetTransactionName('Edit Payment method')
   /* start cra-effected */
   const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
   /* end cra-effected */

package/pages/account/payment-methods/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { getProviderProps, PaymentMethods } from '@newskit-render/my-account'
-import newrelic from 'newrelic'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
 import { optimizelysdkKey } from '../../../config' // create-render-app effected
 import { paymentMethodContext } from '../../../context/app-context/paymentMethodContext'
+import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
 
 const AccountPaymentMethods = (props) => (
   <PaymentMethods {...props} context={paymentMethodContext} />
@@ -12,7 +12,7 @@ const AccountPaymentMethods = (props) => (
 export default AccountPaymentMethods
 
 export const getServerSideProps = async (context) => {
-  newrelic.setTransactionName('Account: Payment Methods')
+  replaceConsoleAndSetTransactionName('Account: Payment Methods')
   const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
   return getProviderProps(
     { ...context, provider: 'PaymentMethods' },

package/pages/account/subscription-and-billing/index.tsx

@@ -3,9 +3,9 @@ import {
   SubscriptionAndBilling,
   getProviderProps,
 } from '@newskit-render/my-account'
-import newrelic from 'newrelic'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
 import { optimizelysdkKey } from '../../../config' /* cra-effected */
+import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
 
 const AccountSubscriptionAndBilling = (props) => (
   <SubscriptionAndBilling {...props} />
@@ -14,7 +14,7 @@ const AccountSubscriptionAndBilling = (props) => (
 export default AccountSubscriptionAndBilling
 
 export const getServerSideProps = async (context) => {
-  newrelic.setTransactionName('Account: Subscription and Billing')
+  replaceConsoleAndSetTransactionName('Account: Subscription and Billing')
   /* start cra-effected */
   const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
   /* end cra-effected */

package/pages/help-hub/article/[title]/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../../../helpers/logger'
 import {
   AlgoliaCredentials,
   HelpHubArticlePage,
@@ -17,9 +17,8 @@ const ArticlePage: React.FC<{
 export default ArticlePage
 
 export const getServerSideProps = async (context) => {
-  newrelic.setTransactionName('HelpHubArticlePage')
-  console.warn('context:')
-  console.warn(context.req && context.req.headers)
+  replaceConsoleAndSetTransactionName('HelpHubArticlePage')
+
   addCacheHeaders(context.res)
 
   return helpHubArticleProvider(context)

package/pages/help-hub/error.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../helpers/logger'
 import {
   HelpHubErrorPage,
   helpHubErrorPageProvider,
@@ -14,9 +14,7 @@ const ErrorPageHelpHub: React.FC<{
 }
 
 export const getServerSideProps = async (context) => {
-  newrelic.setTransactionName('HelpHubErrorPage')
-  console.warn('context:')
-  console.warn(context.req && context.req.headers)
+  replaceConsoleAndSetTransactionName('HelpHubErrorPage')
 
   addCacheHeaders(context.res)
   return helpHubErrorPageProvider()

package/pages/help-hub/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../helpers/logger'
 import {
   AlgoliaCredentials,
   HelpHubLandingPage,
@@ -43,9 +43,8 @@ const LandingPage: React.FC<{
 export default LandingPage
 
 export const getServerSideProps = async (context) => {
-  newrelic.setTransactionName('HelpHubLandingPage')
-  console.warn('context:')
-  console.warn(context.req && context.req.headers)
+  replaceConsoleAndSetTransactionName('HelpHubLandingPage')
+
   addCacheHeaders(context.res)
 
   return helpHubLandingPageProvider()

package/pages/help-hub/results.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../../helpers/logger'
 import {
   HelpHubResultsPage,
   AlgoliaCredentials,
@@ -16,7 +16,7 @@ const ResultsPage: React.FC<{
 export default ResultsPage
 
 export const getServerSideProps = async (context) => {
-  newrelic.setTransactionName('HelpHubResultsPage')
+  replaceConsoleAndSetTransactionName('HelpHubResultsPage')
   console.warn('context:')
   console.warn(context.req && context.req.headers)
   addCacheHeaders(context.res)

package/pages/index.tsx

@@ -1,4 +1,4 @@
-import newrelic from 'newrelic'
+import { replaceConsoleAndSetTransactionName } from '../helpers/logger'
 import {
   createApolloClient,
   getAcsCookie,
@@ -14,10 +14,7 @@ import { getAccountQueryUrl } from '../constants'
 import { addCacheHeaders } from '../helpers/addCacheHeaders'
 
 export async function getServerSideProps(context) {
-  newrelic.setTransactionName('Homepage')
-  console.warn('config:')
-  console.warn('context:')
-  console.warn(context.req && context.req.headers)
+  replaceConsoleAndSetTransactionName('Homepage')
 
   const apolloClient = await createApolloClient(ClientTypes.nkapi)
   const acsCookie = context.req.headers.cookie

package/scripts/nr-exports.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+# to run New Relic locally add values here and run . ./scripts/nr-exports.sh
+# never commit to repo with license key value
+
+export NEW_RELIC_LICENSE_KEY=""
+export NEW_RELIC_APP_NAME=""

package/temp/_app.tsx

@@ -6,13 +6,6 @@ import { bitter, poppins, dmSans } from '../assets/fontFamily'
 import { GlobalStyling } from '../css'
 <% MODULE >
 
-
-
-if (!process.browser) {
-  // eslint-disable-next-line global-require
-  require('newrelic')
-}
-
 const PageContainer = styled.div`
   position: relative;
   min-height: 100vh;

package/temp/_document.tsx

@@ -17,9 +17,15 @@ import { getSubStringBetween } from '../components/utils'
 export default class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
     const { html, head } = await ctx.renderPage()
+
+    const browserTimingHeader = newrelic.getBrowserTimingHeader({
+      hasToRemoveScriptWrapper: true,
+    })
+
     return {
       html,
       head,
+      browserTimingHeader,
     }
   }
 
@@ -31,18 +37,13 @@ export default class MyDocument extends Document {
       <Html lang="en">
         <Head>
           <>
-            <Script
-                id="browser-script"
-                type="text/javascript"
-                data-attribute="nr-browser"
-                dangerouslySetInnerHTML={{
-                  __html: getSubStringBetween(
-                    "<script type='text/javascript' >",
-                    '</script>',
-                    newrelic.getBrowserTimingHeader()
-                  ),
-                }}
-              />
+            <script
+              type="text/javascript"
+              dangerouslySetInnerHTML={{
+                // @ts-ignore
+                __html: this.props.browserTimingHeader,
+              }}
+            />
               <% OPTIMIZELY_WEB >
               {helmet.script.toComponent()}
               <% SOURCEPOINT >

package/helpers/__tests__/getCircularReplacer.test.ts

@@ -1,17 +0,0 @@
-import { getCircularReplacer } from '../getCircularReplacer'
-
-describe('getCircularReplacer', () => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const mockObject: any = { value: 'test' }
-  mockObject.self = mockObject
-  it('should throw error', () => {
-    expect(() => JSON.stringify(mockObject)).toThrowError(
-      /Converting circular structure to JSON/
-    )
-  })
-  it('should remove cyclic object value and not throw error', () => {
-    expect(JSON.stringify(mockObject, getCircularReplacer())).toEqual(
-      JSON.stringify({ value: 'test' })
-    )
-  })
-})

package/helpers/getCircularReplacer.ts

@@ -1,12 +0,0 @@
-export const getCircularReplacer = () => {
-  const seen = new WeakSet()
-  return (_key, value) => {
-    if (typeof value === 'object' && value !== null) {
-      if (seen.has(value)) {
-        return undefined
-      }
-      seen.add(value)
-    }
-    return value
-  }
-}

package/helpers/logger.ts

@@ -1,24 +0,0 @@
-import { newRelicEnabled } from '../config'
-
-export const logger = () => {
-  if (newRelicEnabled === 'true') {
-    // Format Output logs to be properly logged for NewRelic
-    const { log, error, warn, info } = console
-
-    console.error = (...args) => {
-      error.call(console, JSON.stringify(args))
-    }
-
-    console.log = (...args) => {
-      log.call(console, JSON.stringify(args))
-    }
-
-    console.info = (...args) => {
-      info.call(console, JSON.stringify(args))
-    }
-
-    console.warn = (...args) => {
-      warn.call(console, JSON.stringify(args))
-    }
-  }
-}