Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Issue #3071] create new relic client side script manually #3106

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

[Issue #3071] create new relic client side script manually #3106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eca2963
create new relic client side script manually
doug-s-nava Dec 4, 2024
26e5fe7
add necessary secrets in tf
doug-s-nava Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
"all-checks": "npm run lint && npm run ts:check && npm run test && npm run build",
"build": "next build",
"dev": "NEW_RELIC_ENABLED=false next dev",
"dev:nr": "NODE_OPTIONS='-r @newrelic/next' next dev",
"dev:nr": "NODE_OPTIONS='-r newrelic' next dev",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏🏿

"debug": "NODE_OPTIONS='--inspect' next dev",
"format": "prettier --write '**/*.{js,json,md,ts,tsx,scss,yaml,yml}'",
"format-check": "prettier --check '**/*.{js,json,md,ts,tsx,scss,yaml,yml}'",
"lint": "next lint --dir src --dir stories --dir .storybook --dir tests --dir scripts --dir frontend --dir lib --dir types",
"lint-fix": "npm run lint -- --fix",
"postinstall": "node ./scripts/postinstall.js",
"start:nr": "NODE_OPTIONS= '-r @newrelic/next' next start -p ${PORT:-3000}",
"start:nr": "NODE_OPTIONS='-r newrelic' next start -p ${PORT:-3000}",
"start": "next start -p ${PORT:-3000}",
"storybook": "storybook dev -p 6006",
"storybook-build": "storybook build",
Expand Down
33 changes: 14 additions & 19 deletions frontend/src/app/[locale]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,13 @@ import * as newrelic from "newrelic";
import { Metadata } from "next";
import { environment } from "src/constants/environments";

import Script from "next/script";

import "src/styles/styles.scss";

import { NextIntlClientProvider } from "next-intl";
import { getMessages, unstable_setRequestLocale } from "next-intl/server";

import Layout from "src/components/Layout";
import NewRelicScript from "src/components/NewRelicScript";

export const metadata: Metadata = {
icons: [`${environment.NEXT_PUBLIC_BASE_PATH}/img/favicon.ico`],
Expand Down Expand Up @@ -59,6 +58,13 @@ export function generateStaticParams() {

export default async function LocaleLayout({ children, params }: Props) {
const { locale } = params;
const {
NEW_RELIC_ACCOUNT_ID,
NEW_RELIC_AGENT_ID,
NEW_RELIC_APPLICATION_ID,
NEW_RELIC_CLIENT_LICENSE_KEY,
NEW_RELIC_TRUST_KEY,
} = environment;

// Enable static rendering
unstable_setRequestLocale(locale);
Expand All @@ -74,13 +80,6 @@ export default async function LocaleLayout({ children, params }: Props) {
});
}

const browserTimingHeader = typedNewRelic
? typedNewRelic.getBrowserTimingHeader({
hasToRemoveScriptWrapper: true,
allowTransactionlessInjection: true,
})
: "";

return (
<html lang={locale} suppressHydrationWarning>
<head>
Expand All @@ -94,16 +93,12 @@ export default async function LocaleLayout({ children, params }: Props) {
<NextIntlClientProvider messages={messages}>
<Layout locale={locale}>{children}</Layout>
</NextIntlClientProvider>
<Script
id="nr-browser-agent"
// By setting the strategy to "beforeInteractive" we guarantee that
// the script will be added to the document's `head` element.
// However, we cannot add this because it needs to be in the Root Layout, outside of the [locale] directory
// And we cannot add beneath the local directory because our HTML tag needs to know about the locale
// Come back to this to see if we can find a solution later on
// strategy="beforeInteractive"

dangerouslySetInnerHTML={{ __html: browserTimingHeader }}
<NewRelicScript
accountID={NEW_RELIC_ACCOUNT_ID}
trustKey={NEW_RELIC_TRUST_KEY}
agentID={NEW_RELIC_AGENT_ID}
licenseKey={NEW_RELIC_CLIENT_LICENSE_KEY}
applicationID={NEW_RELIC_APPLICATION_ID}
/>
</body>
</html>
Expand Down
40 changes: 40 additions & 0 deletions frontend/src/components/NewRelicScript.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
"use client";

import staticNewRelicScript from "src/constants/newRelicScript";

import Script from "next/script";

type NewRelicScriptProps = {
accountID: string;
trustKey: string;
agentID: string;
licenseKey: string;
applicationID: string;
};

export default function NewRelicScript({
accountID,
trustKey,
agentID,
licenseKey,
applicationID,
}: NewRelicScriptProps) {
const dynamicNewRelicScript = `;window.NREUM||(NREUM={});NREUM.init={distributed_tracing:{enabled:true},privacy:{cookies_enabled:true}};
;NREUM.loader_config={accountID:"${accountID}",trustKey:"${trustKey}",agentID:"${agentID}",licenseKey:"${licenseKey}",applicationID:"${applicationID}"};
;NREUM.info={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",licenseKey:"${licenseKey}",applicationID:"${applicationID}",sa:1};`;

return (
<Script
id="nr-browser-agent"
// By setting the strategy to "beforeInteractive" we guarantee that
// the script will be added to the document's `head` element.
// However, we cannot add this because it needs to be in the Root Layout, outside of the [locale] directory
// And we cannot add beneath the local directory because our HTML tag needs to know about the locale
// Come back to this to see if we can find a solution later on
strategy="beforeInteractive"
dangerouslySetInnerHTML={{
__html: dynamicNewRelicScript + staticNewRelicScript,
}}
/>
);
}
10 changes: 10 additions & 0 deletions frontend/src/constants/environments.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@ const {
API_URL,
API_AUTH_TOKEN = "",
NEXT_PUBLIC_BASE_URL,
NEW_RELIC_ACCOUNT_ID = "",
NEW_RELIC_TRUST_KEY = "",
NEW_RELIC_AGENT_ID = "",
NEW_RELIC_CLIENT_LICENSE_KEY = "",
NEW_RELIC_APPLICATION_ID = "",
} = process.env;

// home for all interpreted server side environment variables
Expand All @@ -25,4 +30,9 @@ export const environment: { [key: string]: string } = {
API_AUTH_TOKEN,
NEXT_PUBLIC_BASE_URL: NEXT_PUBLIC_BASE_URL || "http://localhost:3000",
GOOGLE_TAG_MANAGER_ID: "GTM-MV57HMHS",
NEW_RELIC_ACCOUNT_ID,
NEW_RELIC_TRUST_KEY,
NEW_RELIC_AGENT_ID,
NEW_RELIC_CLIENT_LICENSE_KEY,
NEW_RELIC_APPLICATION_ID,
};
4 changes: 4 additions & 0 deletions frontend/src/constants/newRelicScript.ts
View file
Open in desktop

Large diffs are not rendered by default.

23 changes: 22 additions & 1 deletion infra/frontend/app-config/env-config/environment-variables.tf
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,27 @@ locals {
NEW_RELIC_LICENSE_KEY = {
manage_method = "manual"
secret_store_name = "/new-relic-license-key"
}
},
NEW_RELIC_ACCOUNT_ID = {
manage_method = "manual"
secret_store_name = "/${var.app_name}/${var.environment}/new-relic-account-id"
},
NEW_RELIC_TRUST_KEY = {
manage_method = "manual"
secret_store_name = "/${var.app_name}/${var.environment}/new-relic-trust-key"
},
NEW_RELIC_AGENT_ID = {
manage_method = "manual"
secret_store_name = "/${var.app_name}/${var.environment}/new-relic-agent-id"
},
NEW_RELIC_CLIENT_LICENSE_KEY = {
manage_method = "manual"
secret_store_name = "/${var.app_name}/${var.environment}/new-relic-client-license-key"
},
NEW_RELIC_APPLICATION_ID = {
manage_method = "manual"
secret_store_name = "/${var.app_name}/${var.environment}/new-relic-application-id"
},

}
}
Loading