Envy NextJS connector sometimes shows traces as happening more than they do

[kgpax]

Issue

Observed when using Envy on a NextJS 14 project, we have an API route which calls a 3rd party backend API once. E.g.,

// api/foo/route.ts

export async function GET() {
  const { data } = await axios.get('https://example.com/api/bar');
  return NextResponse.json(data);
}

When this API router is called from a web page, Envy shows both the call to the API route and the call to the backend API, as we would expect:

GET 200 http://localhost:3000/api/foo
GET 200 https://example.com/api/bar

All good 👍

However... if we reload the web page which makes this call, we notice that Envy shows two traces for the backend API:

GET 200 http://localhost:3000/api/foo
GET 200 https://example.com/api/bar
GET 200 https://example.com/api/bar

Wierd 🤔. What's more is that with enough page reloading or even maybe hot reloading during development, Envy will show that the API route makes many, many calls to the backend API for each call to the API route... even if hitting the API route directly. All this despite there only ever being one call actually being made to the backend API by the API route.

Interestingly, these are not even duplicate traces, since whilst almost all of the details are identical, the timings data differs, so something is legitimately treating these as separate traces to report to Envy.

Reproduction steps

I've created a branch bug/envy-nextjs-duplicate-traces which can demonstrate this issue. To see if for yourself:

• Checkout the bug/envy-nextjs-duplicate-traces branch
• Run the envy viewer by running yarn start in the /packages/envy directory
• Run the nextjs example app by running yarn dev in the /examples/next directory
• Open the envy viewer in one browser tab - http://localhost:9998
• Open the nextjs example app at the page demonstrating the bug - http://localhost:3000/next13app/bug
• Follow the instructions in the nextjs example app "bug" page

Video

Not got time for the above, I recorded myself doing it...

https://github.com/FormidableLabs/envy/assets/17857833/40bf1b0f-49cc-483d-a180-7b941cf7094c

What's going on?

• Open to suggestions
• It could be that reloading the page creates a duplicate connection between NextJS and Envy, and that the original one is not being closed?
• This does seem to only happen when using the withEnvy HoF from the @envyjs/nextjs package; if we use @envyjs/node we don't get this issue, but there doesn't seem to be a good place to bootstrap that for Next 13/14 API routes

[kgpax]

Update: the issue could be related to this code:

https://github.com/FormidableLabs/envy/blob/814605627ea1be5fa7566675fd9e1deffaa81670/packages/nextjs/src/tracing.ts#L33-L39

The intent here is that the node enableTracing call is only done once, but there are cases (on first page refresh and on hot reload) where this gets called twice, presumably due to a race condition over two calls trying to set this.

If I put a console log inside this if (!initialized) block, then on the occasions where I see that log written twice (which shouldn't happen, in theory), this is where the number of traces being shown increases.