From 8b436cdea4be6ad5f3862e401fe446a4cc753d51 Mon Sep 17 00:00:00 2001 From: Alberto Arias Date: Tue, 8 Oct 2024 09:17:20 +0200 Subject: [PATCH] App router migration new relic configuration (#1086) * Add basic Root Layout * Add metadata * Add reference included by next * Add comment to explain the default meta tags * Add public testing page to check the migration * Add basic Root Layout * Add metadata * Add reference included by next * Add comment to explain the default meta tags * Add public testing page to check the migration * Add new relic nextjs configuration * Create new relic configuration file * Use new relic configuration * Remove non required file * Add basic Root Layout * Add metadata * Add reference included by next * Add comment to explain the default meta tags * Add public testing page to check the migration * App router migration google tag manager script (#1117) * Add basic Root Layout * Add metadata * Add reference included by next * Add comment to explain the default meta tags * Add public testing page to check the migration * Remove non required file * Add google tag manager to root layout * Change strategy as worker is experimental and is not including the script * Move gtm to body as next is including it in head properly * Add comment to tackle in the future * Move gtm script from _document to _app * App router migration rollbar script (#1118) * Add basic Root Layout * Add metadata * Add reference included by next * Add comment to explain the default meta tags * Add public testing page to check the migration * Remove non required file * Use script tag and set id * Add rollbar script to root layout * Make it beforeInteractive so it is included in the head * Move to _app as next/script is not working in _document * App router migration opengraph metadata (#1120) * Add basic Root Layout * Add metadata * Add reference included by next * Add comment to explain the default meta tags * Add public testing page to check the migration * Remove non required file * Move primary color to a constant so can be used in a server component (root layout) * Create rootMetadata * Fix format * Add metadata to root layout --------- Co-authored-by: eleanorreem * App router migration error boundary component (#1121) * Add basic Root Layout * Add metadata * Add reference included by next * Add comment to explain the default meta tags * Add public testing page to check the migration * Remove non required file * Make error boundary client component * Add ErrorBoundary component to root layout * Create app router error route test page --------- Co-authored-by: eleanorreem * App router migration material UI configuration (#1122) * Add basic Root Layout * Add metadata * Add reference included by next * Add comment to explain the default meta tags * Add public testing page to check the migration * Remove non required file * Create theme registry component * Add ThemeRegistry to root layout * Make theme client component * Install mui for app router --------- Co-authored-by: eleanorreem * App router migration analytics (#1123) * Add basic Root Layout * Add metadata * Add reference included by next * Add comment to explain the default meta tags * Add public testing page to check the migration * Remove non required file * Create Analytics component * Add analytics to root layout * Update layout.tsx --------- Co-authored-by: eleanorreem --------- Co-authored-by: eleanorreem --- app/layout.tsx | 7 +++++-- config/newRelic.tsx | 46 +++++++++++++++++++++++++++++++++++++++++++++ next.config.js | 18 ++++++++++++++++++ 3 files changed, 69 insertions(+), 2 deletions(-) create mode 100644 config/newRelic.tsx diff --git a/app/layout.tsx b/app/layout.tsx index 9eb58a9c..e724ee9a 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,19 +1,21 @@ import Analytics from '../components/head/Analytics'; import GoogleTagManagerScript from '../components/head/GoogleTagManagerScript'; +import RollbarScript from '../components/head/RollbarScript'; import ErrorBoundary from '../components/layout/ErrorBoundary'; +import { newRelicInit } from '../config/newRelic'; import rootMetadata from './rootMetadata'; -import RollbarScript from '../components/head/RollbarScript'; import ThemeRegistry from './ThemeRegistry'; export const metadata = rootMetadata; -export default function RootLayout({ +export default async function RootLayout({ // Layouts must accept a children prop. // This will be populated with nested layouts or pages children, }: { children: React.ReactNode; }) { + const NewRelicScript = await newRelicInit(); return ( @@ -26,6 +28,7 @@ export default function RootLayout({ {children} + {NewRelicScript} diff --git a/config/newRelic.tsx b/config/newRelic.tsx new file mode 100644 index 00000000..281586bb --- /dev/null +++ b/config/newRelic.tsx @@ -0,0 +1,46 @@ +import newrelic from 'newrelic'; +import Script from 'next/script'; + +// Configuration according to Newrelic app router example +// See https://github.com/newrelic/newrelic-node-nextjs?tab=readme-ov-file#example-projects +export const newRelicInit = async () => { + // @ts-ignore + if (newrelic.agent.collector.isConnected() === false) { + await new Promise((resolve) => { + // @ts-ignore + newrelic.agent.on('connected', resolve); + }); + } + + const browserTimingHeader = newrelic.getBrowserTimingHeader({ + hasToRemoveScriptWrapper: true, + // @ts-ignore + allowTransactionlessInjection: true, + }); + + return ; +}; + +export type NewRelicScriptProps = { + browserTimingHeader: string; +}; + +const NewRelicScript = ({ browserTimingHeader }: NewRelicScriptProps) => { + return ( + // eslint-disable-next-line @next/next/no-before-interactive-script-outside-document +