Setup new relic (#808)

chaynHQ · Jan 10, 2024 · fad897a · fad897a
1 parent a453a90
commit fad897a
Show file tree

Hide file tree

Showing 4 changed files with 1,418 additions and 39 deletions.
diff --git a/components/head/NewRelicScript.tsx b/components/head/NewRelicScript.tsx
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "start": "NODE_OPTIONS='-r @newrelic/next' next start",
     "https:proxy": "local-ssl-proxy --source 3010 --target 3000 --cert localhost.pem --key localhost-key.pem",
     "lint": "next lint",
     "test": "jest",
@@ -25,13 +25,15 @@
     "@mui/icons-material": "^5.14.19",
     "@mui/lab": "^5.0.0-alpha.155",
     "@mui/material": "^5.14.20",
+    "@newrelic/next": "^0.7.0",
     "@reduxjs/toolkit": "^2.0.1",
     "@storyblok/react": "^3.0.0",
     "@vercel/analytics": "^1.1.1",
     "axios": "^1.6.2",
     "firebase": "^10.7.1",
     "gemoji": "^8.1.0",
     "js-cookie": "^3.0.1",
+    "newrelic": "^11.8.0",
     "next": "13.4.19",
     "next-intl": "^2.20.0",
     "next-pwa": "^5.6.0",
@@ -54,6 +56,7 @@
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.0.2",
     "@types/js-cookie": "^3.0.2",
+    "@types/newrelic": "^9.14.3",
     "@types/react": "18.2.43",
     "babel-jest": "^27.2.4",
     "cypress": "^13.2.0",

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,16 +1,19 @@
 import createEmotionServer from '@emotion/server/create-instance';
+import newrelic from 'newrelic';
 import { AppType } from 'next/app';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 import * as React from 'react';
 import GoogleTagManagerScript from '../components/head/GoogleTagManagerScript';
-import NewRelicScript from '../components/head/NewRelicScript';
 import OpenGraphMetadata from '../components/head/OpenGraphMetadata';
 import RollbarScript from '../components/head/RollbarScript';
 import createEmotionCache from '../config/emotionCache';
-import { ENVIRONMENT } from '../constants/enums';
 import { MyAppProps } from './_app';
 
-export default class MyDocument extends Document {
+type NewRelicProps = {
+  browserTimingHeader: string;
+};
+
+export default class MyDocument extends Document<NewRelicProps> {
   render() {
     return (
       <Html lang="en">
@@ -19,8 +22,11 @@ export default class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap"
             rel="stylesheet"
           />
+          <script
+            type="text/javascript"
+            dangerouslySetInnerHTML={{ __html: this.props.browserTimingHeader }}
+          />
           <OpenGraphMetadata />
-          {process.env.NEXT_PUBLIC_ENV === ENVIRONMENT.PRODUCTION && <NewRelicScript />}
           <GoogleTagManagerScript />
           <RollbarScript />
         </Head>
@@ -74,6 +80,13 @@ MyDocument.getInitialProps = async (ctx) => {
     });
 
   const initialProps = await Document.getInitialProps(ctx);
+
+  // Set New Relic browser script
+  // See https://newrelic.com/blog/how-to-relic/nextjs-monitor-application-data
+  const browserTimingHeader = newrelic.getBrowserTimingHeader({
+    hasToRemoveScriptWrapper: true,
+  });
+
   // This is important. It prevents Emotion to render invalid HTML.
   // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
   const emotionStyles = extractCriticalToChunks(initialProps.html);
@@ -88,6 +101,7 @@ MyDocument.getInitialProps = async (ctx) => {
 
   return {
     ...initialProps,
+    browserTimingHeader,
     styles: emotionStyleTags,
   };
 };