NextJS 13 Bug: Tracing Instrumentation breaks `next/link` elements with prefetching

[angel1254mc]

Description

Enabling the Tracing Instrumentation in a Next13 project (App Router) with Faro breaks link that use prefetching (which is set to true for all links by default).

Steps to reproduce

I've included an example on CodeSandbox that you can fork to test it out on your own Faro Project :)

1. Fork this codesandbox project.

2. Create a Faro Project

3. Enter your project URL and project name into the corresponding environment variables in .env.local

4. Note that the <Link/> component on line 37 has it's prefetch set to true

5. Click on the Link

6. Note that the link has been clicked ('link clicked!' message in console) but no routing has occured (still on the same page)

7. Now set prefetch on the link on line 37 to false

8. Refresh the window

9. Click on the Link and notice that you are routed to the correct URL (now on test-route page)

Expected behavior

We expect that you are able to successfully route in both cases, with or without prefetching.

Actual behavior

Routing with next/link only works with TracingInstrumentation if prefetching is explicitly disabled for all <Link/> components

Environment

• SDK version: 1.1.2
• SDK instrumentations: WebInstrumentations, TracingInstrumentation
• Device type: Desktop
• Device name: ASUS ROG Zephyrus G14
• OS: Windows 11
• Browser: Google Chrome 116

Demo

CodeSandbox Link https://codesandbox.io/p/sandbox/crazy-matan-g5f27w?file=%2Fnext.config.js%3A1%2C1 Demo Video

https://github.com/grafana/faro-web-sdk/assets/59091763/aa8f3d1c-249d-496e-8e2b-7c738dc4852a

Context

Wasn't sure whether to report this on Faro repo, otel-js repo, or NextJS repo but if this is something that you all think belongs on there instead, I'll close this issue :)

[rawnly]

same happening here, it would be nice to have a suggested configuration for nextjs projects too

[riboher]

I was thinking of adding a new issue since I'm not having the problem in a NextJS application, but this is too happening to me in a common React app with ReactRouter.

The thing is we're using the loaders functionality together with Await and Suspense components, which I think is causing the same problems as the prefetch prop in NextJS

[clementduveau]

For future reference: related to #219 and apparently could also impact Svelte (not verified, rumored)