Mastering Frontend Observability in React with Grafana Faro

In this video, we'll walk you through the steps to instrument a React application with Grafana Faro for comprehensive monitoring and insights.

00:00 - Introduction
00:30 - What is Frontend Observability?
01:30 - What is Grafana Faro?
02:19 - Instrumenting React with Grafana Faro
08:47 - Frontend Observability Overview in Grafana Cloud
10:15 - Investigating application errors
13:06 - Enhancing our application with additional events, logs, and error tracking
18:12 - Conclusion

🔗 Resources:

GitHub Repository

Grafana Frontend Observability Docs: Grafana Frontend Observability

Grafana Faro SDK React Docs

Make sure to check out the GitHub repository for the complete demo application and follow along with the video.

If you have any questions or need further assistance, feel free to leave a comment below.

-----

-----
👍 If you found this video useful, be sure to give it a thumbs up and subscribe to our channel for more helpful Grafana videos.

📱 Follow us for the latest and greatest on all things Grafana and our other OSS projects.

#Grafana #Observability #FrontendObservability #React

[ricgeorge]

I was looking for a video like this last week. The Observability Gods have answered! Great video!

[sahilbisht]

How to setup in next Js application, as we don’t have react router in that case

[iBer]

Thanks! In my project at least i only get WebVitals on the first page load and not on all route changes. Is this a known problem?

[rob_]

Great video, thanks! How does this work with Remix (and eventually React Router v7) that does not use a route config and instead uses file based routing?

[muzammilsarwar]

Great video! Can you please also include something on alerting/notifying when error occurs

[yurykiryaev]

great, thank you! p.s.: for the horde:)