SvelteKit SSR

[brahima]

Hello,

I've just started playing around with Faro SDK and it's working great so Far(o) :-)
The main problem is have is that i'm using SvelteKit and some events and logs need to be pushed server side (to have the complete story of what's really going on).
I saw that this is something implemented for React via faro-react.

Obviously when someone tries to initialize Faro on Server Side, it crashes telling that 'window' is undefined. This behavior is expected because it's only working browser side right now.

Is there something planned for Svelte or someone can give some advices of what can i do to push events and logs from SSR code (+server.[ts|js], +page.server.[ts|js] ...)

At the end of the day, these are just fetch calls (with default transport) :-)
I however understand that server side (often the code is run via serverless funnction), these http calls need to be done before the end of the processing and have to be treated as not 'vital' so even if they fail, the 'business' process should be considered ok.

Side note : My adblocker was blocking all my faro request when i started to use it. I think that's because i'm using Grafana Cloud and the url to push via Faro is https://faro-collector-prod-eu-west-0.grafana.net/collect/{app_key}.
Does not seem a good idea to have the collector word in the url.
This does not seem related directly to the Faro web sdk but if someone can tell me who i can pass this info up to ?

Any help would be greatly appreciated,
Thanks

[codecapitano]

Hey @brahima 👋

I've just started playing around with Faro SDK and it's working great so Far(o) :-)

Thanks a lot that's great to hear :)

Is there something planned for Svelte

Not yet and also not on the roadmap at the moment.

can give some advices of what can i do to push events and logs from SSR code (+server.[ts|js], +page.server.[ts|js] ...)

With Faro it;s not possible because it need the window object.
I fear you would need to implement your own logic to push sever side signals.

Cheers,
Marco

[mindcurv-jerald]

Hey @codecapitano and @brahima

We are running into an issues implementing faro on a client.
In Svelte the goto client side routing mechanism.. as adding filter values to the URL breaks the site when importing:
import { TracingInstrumentation } from '@grafana/faro-web-tracing';
We already have open-telemetry working on the frontend server side but when trying to add TracingInstrumentation on browser side, website breaks.
we found similar unresolved github issues #219 & #260

Can you help us here ?

[codecapitano]

Hi @mindcurv-jerald
do you see the same error as in the issues you linked?

Would you mind posting the error message / the stacktrace?

Thanks,
Marco

[mindcurv-jerald]

Hi @codecapitano

We do not see any errors in the logs or even inn the browser. One of developer investigated into the issue and found the reason why the filter wasn't working when TracingInstrumentation is imported.

The main reason is that Faro prevents the default update of the SvelteKit's own $page.url store and only executes it asynchronously after it has done some internal work.

However, since we used it in SvelteKit's own callback function afterNavigate (which is not called asynchronously), we always got the old URL, which led to corresponding misbehavior. Luckily we were able to access the new URL differently, so he was able to fix the problem.