importing @grafana/faro-web-tracing breaks nuxt app

[DanielYatali]

Description

I have a pretty simple plugin setup for grafana using @grafana/faro-web-sdk

import {getWebInstrumentations, initializeFaro} from '@grafana/faro-web-sdk';
export default defineNuxtPlugin(nuxtApp => {
    const config = useRuntimeConfig()

    let instrumentation = [...getWebInstrumentations()]
    const faro = initializeFaro({
        url: config.public.grafanaUrl,
        instrumentations: instrumentation,
        app: {
            name: "test-app",
            version: config.public.version,
            environment: config.public.environment
        },
    });
    console.log('Faro initialized')
    nuxtApp.provide('faro', faro)
})

When trying to implement tracing however.

import {getWebInstrumentations, initializeFaro} from '@grafana/faro-web-sdk';
import {TracingInstrumentation} from '@grafana/faro-web-tracing';

export default defineNuxtPlugin(nuxtApp => {
    const config = useRuntimeConfig()

    let instrumentation = [...getWebInstrumentations()]
    instrumentation.push(new TracingInstrumentation({
        instrumentationOptions: {
            propagateTraceHeaderCorsUrls: [new RegExp('https://example/*'), new RegExp('https://test-example/*')]
        }
    }))
    const faro = initializeFaro({
        url: config.public.grafanaUrl,
        instrumentations: instrumentation,
        app: {
            name: "test-app",
            version: config.public.version,
            environment: config.public.environment
        },
    });
    console.log('Faro initialized')
    nuxtApp.provide('faro', faro)
})

The app breaks, see error message:

I removed the instrumentation code and left the import for @grafana/faro-web-tracing and although I'm not using it, the app returns the same error message

Steps to reproduce

Setup fresh nuxt app https://nuxt.com/docs/getting-started/installation
Install @grafana/faro-web-sdk and @grafana/faro-web-tracing
Create plugin inside the plugins directory called grafana.js and copy the code above.

Environment

• SDK version: 1.7.3
• SDK instrumentations: Web SDK, Web Tracing
• Device type: desktop
• OS: Windows
• Browser: Chrome
• **Nuxt version: ** 3.11.2

[codecapitano]

Hi @DanielYatali

It's working for me without any issues.

Only thing I changed is to rename grafana.js to grafana.client.js.
This is because Faro is client side only and does not work on the server.
So have to tell Nuxt to load the plugin only in the client.

For that you can use a .client suffix in the file name to load a plugin on client only. See docs for the plugins directory.

TLDR:

Cheers

[DanielYatali]

We only use client-side in our project, so we set ssr=false in our Nuxt.js configuration.
After some debugging found the problem.
When the pages directory is introduced (which is essential for routing between pages) it throws that error.
I pinpointed the problem to a new feature introduced in Nuxt.js version 3.8.0 specifically the App Manifest feature. To resolve the issue, I followed the Nuxt documentation and disabled this feature in our configuration:

export default defineNuxtConfig({
  experimental: {
    appManifest: false
  }
});

Disabling the App Manifest resolved the error.

[codecapitano]

Awesome thanks so much for the update @DanielYatali

[Gazoon007]

Hi @DanielYatali

It's working for me without any issues.

Only thing I changed is to rename grafana.js to grafana.client.js. This is because Faro is client side only and does not work on the server. So have to tell Nuxt to load the plugin only in the client.

For that you can use a .client suffix in the file name to load a plugin on client only. See docs for the plugins directory.

TLDR:

Cheers

Genuinely asking, Grafana Faro can't log any error that happened on server-side, so it is pointless for me to use Faro if my project using SSR?