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

yarn dev locally doesn't work when using wrong API key type #14

Open
josephmarkus opened this issue Mar 9, 2023 · 4 comments
Open

yarn dev locally doesn't work when using wrong API key type #14

josephmarkus opened this issue Mar 9, 2023 · 4 comments

Comments

@josephmarkus
Copy link

Running yarn dev locally and then accessing localhost:3000 endlessly spins.

If you comment out the following code in _document.tsx:

// if (!newrelic.agent.collector.isConnected()) {
//   await new Promise((resolve) => {
//     newrelic.agent.on("connected", resolve);
//   });
// }

It loads ok, but <head> contains:

<script type="text/javascript"><!-- NREUM: (4) --></script>

How is this supposed to work?
@josephmarkus josephmarkus changed the title yarn dev locally doesn't work yarn dev locally doesn't work when using wrong API key type Mar 9, 2023
@josephmarkus
Copy link
Author

Turns out, using INGEST - BROWSER API key never even loads the page. It just hangs. If you replace that with INGEST - LICENSE, that works ok. Would be great to handle handshake with a timeout and by surfacing a useful error message.

@matewilk
Copy link
Contributor

matewilk commented Mar 9, 2023

Yes, that's correct, if New Relic errors out (bad config) then the project won't kick off the front end.
Described in this issue

Let me think of the best way of handling it.

@josephmarkus
Copy link
Author

As a user, the ideal scenario would be to see this error somewhere in the console. All I could see in the source code was <script><!--- NREUM: (4) ---></script> (or v similar syntax). It's only when I started to dig through the source code (node_modules/newrelic/api.js) I found this:

const RUM_ISSUES = [
  'NREUM: no browser monitoring headers generated; disabled',
  'NREUM: transaction ignored while generating browser monitoring headers',
  'NREUM: config.browser_monitoring missing, something is probably wrong',
  'NREUM: browser_monitoring headers need a transaction name',
  'NREUM: browser_monitoring requires valid application_id',
  'NREUM: browser_monitoring requires valid browser_key',
  'NREUM: browser_monitoring requires js_agent_loader script',
  'NREUM: browser_monitoring disabled by browser_monitoring.loader config'
]

Which suggested that NREUM: (4) === 'NREUM: browser_monitoring requires valid application_id',

This made me think why is it that the error isn't displayed anywhere, e.g. <script><!--- New Relic hasn't loaded due to the following error: browser_monitoring requires valid application_id. See [some link to docs] for how to set this id ---></script>

I then thought, have I missed something from newrelic.js in the root of the project. I thought, I have app_name, which is what the docs have suggested (ie copy node_modules/newrelic/newrelic.js to the root, modify as required).

It was by complete chance that I thought, what if I try an INGEST - LICENSE key instead. When you have the right key, everything works smoothly.

On the back of it, I thought there's some improvements that could be made:

  1. INGEST - BROWSER and INGEST - LICENSE key have different length. Perhaps the most basic way would be to check length and display an error "It appears you're using INGEST - BROWSER key. Make sure you use INGEST - LICENSE key instead. See [some link to docs] for more detail."
  2. Timeout + error on start in the example repo. "Couldn't start the project. This often happens when X key is used. Make sure you use Y key instead."
  3. I didn't know that application_id is set automatically when the correct key is used. So even RUM_ISSUES[4] didn't provide much help. Would be great if each error were to suggest what the user could do to remedy a given problem.
  4. There's some missing types (e.g. window.newrelic complains even though I have @types/newrelic installed)

Nice when you have tools that you can easily integrate. Even when it's multistep. If you can copy/paste some bits and when something doesn't go to plan, you can self-serve, that's the ideal.

Hope this helps 😄

@matewilk matewilk mentioned this issue May 9, 2023
Closed
@Toxiapo
Copy link

Toxiapo commented Apr 11, 2024

Hi @josephmarkus, thank you for the explanation, that made things much clearer for us.

One question I have is that I thought newrelic.js is only used for node agent config, for browser instruments, how do you load the correct configs for the frontend? (QA or PROD). One problem I am facing right now is that, when I use the newrelicgetBrowserTimingHeader as suggested from the this repo, it's loading a config with a totally application ID, and I am also seeing NREUM: (4) in my script tag unless I do a refresh on the page.

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
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@matewilk @josephmarkus @Toxiapo