localhost: Cannot read properties of undefined (reading 'isNew')

[samuelcole]

In localhost I get this error, which produces an annoying popup in Next.js

It's failing on this line: https://github.com/newrelic/newrelic-browser-agent/blob/d20d2894b4b11662db1f93513da99694ffa3bc5c/src/features/session_trace/aggregate/index.js#L67

Because this.agentRuntime.session is undefined.

[workato-integration[bot]]

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

[arthens]

We are getting this same error sporadically, but in production (we don't run NR in dev).

We haven't been able to reproduce it so far. We tried using an adblocker (uBlock origin) to see if that might be blocking the creation of a valid session, but we couldn't trigger the same error.

According to our error stats, this issue doesn't seem to be related to a specific environment. We've seen it happen on a combination of:

• Chrome, Chrome mobile, Edge, Opera
• Windows, Mac OS, IOS, Android

We tried upgrading from 1.257.0 to 1.260.1, but that didn't make a difference.

[BogdanMihalca]

It is the same issue for me too

[patrickhousley]

Hi @samuelcole et al. I am taking a look at this issue today and hope to have an update soon.

[patrickhousley]

@samuelcole @arthens @BogdanMihalca It looks like you might be using the node package for the browser agent. Could you please provide the snippet of code where you are importing and initializing the agent? Are all three of you also using Next.js?

[samuelcole]

useEffect(() => {
    if (typeof window !== "undefined") {
      (async () => {
        const { BrowserAgent } = await import(
          "@newrelic/browser-agent/loaders/browser-agent"
        );
        new BrowserAgent({
          init: {
            distributed_tracing: { enabled: true },
            spa: { enabled: true },
            privacy: { cookies_enabled: true },
            ajax: { deny_list: ["bam.nr-data.net"] },
          },
          loader_config: {
            accountID: "REDACTED",
            trustKey: "REDACTED",
            agentID: "REDACTED",
            licenseKey: "REDACTED",
            applicationID: "REDACTED",
          },
          info: {
            beacon: "bam.nr-data.net",
            errorBeacon: "bam.nr-data.net",
            licenseKey: "REDACTED",
            applicationID: "REDACTED",
            sa: 1,
          },
        });
      })();
    }
  }, []);

[arthens]

We are not using Next.js. Our application is frontend only and doesn't have a backend

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'

export const initNewRelic = () => {
  const options = {
    init: {
      distributed_tracing: {
        enabled: true,
      },
      privacy: {
        cookies_enabled: true,
      },
      ajax: {
        deny_list: ['bam.nr-data.net'],
      },
    }, // NREUM.init
    info: {
      accountID: 'REDACTED',
      trustKey: 'REDACTED',
      agentID: 'REDACTED',
      licenseKey: 'REDACTED',
      applicationID: 'REDACTED',
    }, // NREUM.info
    loader_config: {
      beacon: 'bam.nr-data.net',
      errorBeacon: 'bam.nr-data.net',
      licenseKey: 'REDACTED',
      applicationID: 'REDACTED',
      sa: 1,
    },
  }

  new BrowserAgent(options)
}

[patrickhousley]

Could any of you provide a URL to your site if it is public? If not, we may need to move this to New Relic Support so we can get account and app details.

[samuelcole]

Our's is https://www.foodhelpline.org

Also I assume those ids aren't actually private, because they are sent in code that runs on the client.

[patrickhousley]

Thanks @samuelcole . Technically none of the IDs or keys in the agent settings is private because they are transmitted in clear text but your account details are. We dont like asking for any of it in such a public place but will never ask for your NR account details here and you should never provide them.

As an update to the issue, I am still having trouble reproducing the issue. The issue seems impossible because the session manager script is always loaded before any of the features aggregate files are. The session manager is responsible for creating the session. Even if it cant store the session in local storage, it will still create a session in memory.

[patrickhousley]

I was able to reproduce the issue using the vite-react-wrapper test build in the project. You can also reproduce by blocking just the session manager chunk in your app using browser dev tools. A fix PR is open to prevent the unhandled exception and failure of the agent. However, in networks where that chunk gets blocked, there isn't much else we can do.

[workato-integration[bot]]

Work has been completed on this issue.

[patrickhousley]

The fix has been merged in and we will begin the release process shortly.

[patrickhousley]

The fix has been release to npm as version 1.261.1. Please try it out in your apps and let us know in a new ticket if you are still having issues. Keep in mind, based on how you have caching setup for your app, it may take some time for your customers to get the new code.