Web application Instrumentation

overview opsverse observe frontend monitoring provides a seamless way to collect logs, traces and metrics from web application frontends and bring them into your observenow instance this allows complete visibility into all aspects of your stack, and ensures you can use a single software stack to provide end to end observability setup opsverse frontend monitoring works seamlessly with the grafana faro sdk so to enable frontend monitoring, you can use the faro sdk install the faro web sdk package using the following command npm i s @grafana/faro web sdk or yarn add @grafana/faro web sdk import and initialize the package by including the following code snippet to your application for html and javascript based application import { initializefaro, getwebinstrumentations } from '@grafana/faro web sdk'; const faro = initializefaro({ url 'https //\<opsverse frontend monitoring collector endpoint>/collect', app { name '\<your webapp name>', }, instrumentations \[ getwebinstrumentations({captureconsole true, captureconsoledisabledlevels \[loglevel debug]})] }); enable tracing to enable frontend tracing support, you can use the grafana faro tracing sdk using the following command npm i s @grafana/faro web tracing or yarn add @grafana/faro web tracing and then update the initialization to also enable tracinginstrumentation import { tracinginstrumentation } from '@grafana/faro web tracing'; import { initializefaro, getwebinstrumentations } from '@grafana/faro web sdk'; const faro = initializefaro({ url 'https //\<opsverse frontend monitoring collector endpoint>/collect', app { name '\<your webapp name>', }, instrumentations \[ getwebinstrumentations({captureconsole true, captureconsoledisabledlevels \[loglevel debug]}), new tracinginstrumentation()] }); once you run your application you should see application logs and traces being exported to the provided collector url in the console/network tab of the browser developer tools note for more advanced, granular controls, please refer to the grafana faro sdk documentation https //github com/grafana/faro web sdk/blob/main/docs/sources/tutorials/quick start browser md#advanced visualization opsverse observenow comes pre baked with a frontend monitoring dashboard that you can use as a starting point to visualize your frontend performance frontend monitoring dashboard