ObserveNow
...
Integrations
Frontend Monitoring

Flutter Web Instrumentation

overview opsverse observe frontend monitoring can integrate with flutter web applications to bring in real user monitoring (rum) data from your flutter applications setup add the following snippet into the index html of your flutter web application in the \<head> section \<script> window\ init = () => { window\ grafanafarowebsdk initializefaro({ url "https //\<opsverse frontend monitoring endpoint>/collect", app { name "my flutter app", version "1 0 0", } }); }; // dynamically add the tracing instrumentation when the tracing bundle loads window\ addtracing = () => { window\ grafanafarowebsdk faro instrumentations add(new window\ grafanafarowebtracing tracinginstrumentation()); }; \</script> \<script src="https //unpkg com/@grafana/faro web sdk\@1 7 2/dist/bundle/faro web sdk iife js" onload="window\ init()">\</script> \<script src="https //unpkg com/@grafana/faro web tracing\@1 7 2/dist/bundle/faro web tracing iife js " onload="window\ addtracing()">\</script> 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 you can verify you see the logs from your application using the query {app="frontend logs"} 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