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
chaynHQ · Oct 8, 2024 · ec6a8c3 · ec6a8c3
1 parent 50dec7b
commit ec6a8c3
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 3 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 import GoogleTagManagerScript from '../components/head/GoogleTagManagerScript';
+import RollbarScript from '../components/head/RollbarScript';
 
 // Nextjs automatically includes for each route two default meta tags, charset and viewport
 // https://nextjs.org/docs/app/building-your-application/optimizing/metadata#default-fields
@@ -22,6 +23,7 @@ export default function RootLayout({
         but sending an event using sendGTMEvent requires an object rather than a list of arguments so the current gtag api function would need to be adapted
         */}
         <GoogleTagManagerScript />
+        <RollbarScript />
         {children}
       </body>
     </html>

diff --git a/components/head/RollbarScript.tsx b/components/head/RollbarScript.tsx
@@ -1,6 +1,11 @@
+import Script from 'next/script';
+
 const RollbarScript = () => {
   return (
-    <script
+    // eslint-disable-next-line @next/next/no-before-interactive-script-outside-document
+    <Script
+      id="rollbar"
+      strategy="beforeInteractive"
       dangerouslySetInnerHTML={{
         __html: `
 var _rollbarConfig = {

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -14,6 +14,7 @@ import { useEffect } from 'react';
 import { Provider } from 'react-redux';
 import CrispScript from '../components/crisp/CrispScript';
 import GoogleTagManagerScript from '../components/head/GoogleTagManagerScript';
+import RollbarScript from '../components/head/RollbarScript';
 import Consent from '../components/layout/Consent';
 import ErrorBoundary from '../components/layout/ErrorBoundary';
 import Footer from '../components/layout/Footer';
@@ -78,6 +79,7 @@ function MyApp(props: MyAppProps) {
           <meta name="viewport" content="initial-scale=1, width=device-width" />
         </Head>
         <GoogleTagManagerScript />
+        <RollbarScript />
         <CrispScript />
         <ThemeProvider theme={theme}>
           <CssBaseline />

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -4,7 +4,6 @@ import { AppType } from 'next/app';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 import * as React from 'react';
 import OpenGraphMetadata from '../components/head/OpenGraphMetadata';
-import RollbarScript from '../components/head/RollbarScript';
 import createEmotionCache from '../config/emotionCache';
 import { MyAppProps } from './_app';
 
@@ -26,7 +25,6 @@ export default class MyDocument extends Document<NewRelicProps> {
             rel="stylesheet"
           />
           <OpenGraphMetadata />
-          <RollbarScript />
         </Head>
         <body>
           <Main />