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

Jump to bottom

Nextjs App Router integration not working: Build command time out error #306

Closed
mike-rambil opened this issue Dec 31, 2024 · 3 comments
Closed

Nextjs App Router integration not working: Build command time out error #306

mike-rambil opened this issue Dec 31, 2024 · 3 comments

Comments

@mike-rambil
Copy link

mike-rambil commented Dec 31, 2024 •
edited
Loading

Description

Next.js integration with new relic isn't working at all. The build command throws timeout error(screenshot provided below).

image

Steps to Reproduce

I am following example from this repo app-router-example.

  1. Setup .env variables for new relic
NEW_RELIC_APP_NAME='redacted'
NEW_RELIC_LICENSE_KEY='redacted'
  1. Setup next.config.js
'use strict';

const nrExternals = require('newrelic/load-externals');

module.exports = {
  experimental: {
    // Without this setting, the Next.js compilation step will routinely
    // try to import files such as `LICENSE` from the `newrelic` module.
    // See https://nextjs.org/docs/app/api-reference/next-config-js/serverComponentsExternalPackages.
    serverComponentsExternalPackages: ['newrelic'],
  },
  // In order for newrelic to effectively instrument a Next.js application,
  // the modules that newrelic supports should not be mangled by webpack. Thus,
  // we need to "externalize" all of the modules that newrelic supports.
  webpack: (config) => {
    nrExternals(config);
    return config;
  },
  poweredByHeader: false,
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Frame-Options',
            value: '', // Leave empty to disable or set to 'ALLOW-FROM <URL>' for specific cases
          },
          {
            key: 'Cache-Control',
            value: 'no-store',
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin', // Recommended policy
          },
          {
            key: 'Permissions-Policy',
            value: 'camera=()', // Adjust the policy directives as needed
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
        ],
      },
    ];
  },
};

  1. Setup newrelic.js using this file

  2. Setup the scripts to inject the .env in the build, dev and start commands(i am using windows) using this file as a reference

"scripts": {
    "dev": "cross-env NODE_OPTIONS=\"-r dotenv/config --loader newrelic/esm-loader.mjs -r newrelic\" next dev --experimental-https -p 4001",
    "build": "cross-env NODE_OPTIONS=\"-r dotenv/config\"  next build --debug",
    "start": "cross-env NODE_OPTIONS=\"--loader newrelic/esm-loader.mjs -r newrelic\" next start",
    "lint": "next lint"
  },
  1. Initialize the layout.tsx file.
import MSAL_Provider from '@/components/AzureAuth/MSAL_Provider';
import MobileClient from '@/components/sidebar/MobileClient';
import { inter } from '@/lib/font';
import newrelic from 'newrelic';
import { Metadata } from 'next';
import Script from 'next/script';
import './globals.css';

export const metadata: Metadata = {
  title: <<redacted>>,
  description: <<redacted>>,
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  if (newrelic.agent.collector.isConnected() === false) {
    await new Promise((resolve) => {
      newrelic.agent.on('connected', resolve);
    });
  }

  const browserTimingHeader = newrelic.getBrowserTimingHeader({
    hasToRemoveScriptWrapper: true,
    allowTransactionlessInjection: true,
  });

  return (
    <html lang='en'>
      <MSAL_Provider>
        <head>
          <script
            defer
            id='jira-widget'
            data-jsd-embedded
            data-key='e005f781-0635-4cef-9ae3-c2a5c6ab21fb'
            data-base-url='https://jsd-widget.atlassian.com'
            src='https://jsd-widget.atlassian.com/assets/embed.js'
          />
        </head>
        <body className={`${inter.className} antialiased bg-[#dadadc]`}>
          <main className=' min-h-screen h-full'>
            {children}
            <MobileClient />
          </main>
          <Script
            // We have to set an id for inline scripts.
            // See https://nextjs.org/docs/app/building-your-application/optimizing/scripts#inline-scripts
            id='nr-browser-agent'
            // By setting the strategy to "beforeInteractive" we guarantee that
            // the script will be added to the document's `head` element.
            strategy='beforeInteractive'
            dangerouslySetInnerHTML={{ __html: browserTimingHeader }}
          />
        </body>
      </MSAL_Provider>
    </html>
  );
}

Expected Behavior

New Relic starts to emit errors to its dashboard when the integration is complete with next.js.

Relevant Logs / Console output

Scripts.

image

Build error message.

image

tsconfig.json

image

Your Environment

  • Operating System and version: Windows 11

Additional context

  • The npm run dev commands throws this warning message.
    image
@mike-rambil mike-rambil added the bug Something isn't working label Dec 31, 2024
@workato-integration
Copy link

https://new-relic.atlassian.net/browse/NR-354249

@newrelic-node-agent-team newrelic-node-agent-team moved this to Triage Needed: Unprioritized Features in Node.js Engineering Board Dec 31, 2024
@mike-rambil mike-rambil changed the title Nextjs App Router integration not working: Build command not working Nextjs App Router integration not working: Build command time out error Dec 31, 2024
@jsumners-nr
Copy link
Contributor

Have you defined a _not-found file? Can you provide a repository that reproduces the problem?

@kmudduluru kmudduluru removed the bug Something isn't working label Jan 2, 2025
@bizob2828
Copy link
Member

bizob2828 commented Jan 3, 2025 •
edited
Loading

@mike-rambil those warnings are just stating that the way the esm loader is loaded is experimental. I don't see an issue, it says the server starts just fine.

The error on the production build is because it appears to expect a _not-found layout. Lastly, this example you call out works, we do not intend to support you modifying it for your own use. It's here to demonstrate the instrumentation New Relic provides for Next.js, I'm going to close this issue.

@github-project-automation github-project-automation bot moved this from Triage Needed: Unprioritized Features to Done: Issues recently completed in Node.js Engineering Board Jan 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
Node.js Engineering Board
Archived in project
Milestone
No milestone
Development

No branches or pull requests
4 participants
@bizob2828 @mike-rambil @jsumners-nr @kmudduluru