About the Course
What am I going to learn in this course?
Do you want to understand what’s really happening inside your users’ browsers and how their interactions connect to backend systems? Maybe you want to pinpoint where slowdowns occur in your React app or see the complete picture of a user’s journey from click to API call.
Your frontend can tell you exactly what’s going on, and Honeycomb is the tool that helps you see it. But first, your browser data needs to make its way to Honeycomb through something called instrumentation.
The easiest and most reliable way to instrument your frontend is by using OpenTelemetry and the HoneycombWebSDK. This course will teach you how to instrument a React application for browser observability so you can send rich telemetry data to Honeycomb, view complete end-to-end traces, and understand how your frontend contributes to overall system performance.
How will I learn these things?
This course will teach you frontend instrumentation in 3 ways: videos, guided tutorials, and hands-on labs.
- Videos will explain concepts and demonstrate procedures.
- Guided tutorials walk you through how things work in practice.
- Labs and quizzes give you the opportunity to actually do it on your own with a sample application (or your own, if you'd like!)
What do I need before taking this course to be successful?
- An application where you have access to modify the source code. Click here for a sample application you can use for this course!
- A Honeycomb account and API key. Don't have one? Don't worry, we'll walk through creating one in this course.
Course Categories
Course Instructor
-
Prerequisites
- Make a Honeycomb Account & Get Your API Key
- Run the Sample Browser Application
-
Introduction to Frontend Observability
- Why Frontend Observability?
- How Frontend Tracing Works in Honeycomb
- Architecture of Honeycomb Frontend Instrumentation
-
Instrumentation for the Browser
- Automatic Instrumentation for OpenTelemetry in the Browser + HoneycombWebSDK
- Hands-On Lab: Automatic Instrumentation
- Can't See Your Full Trace? How Context Propagation Works
- Add Custom Resource Attributes to Spans
- Hands-On Lab: Add Custom Resource Attributes
- Define a Session ID
- Hands-On Lab: Define Session IDs
-
Survey
- Tell us what you thought!
About the Course
What am I going to learn in this course?
Do you want to understand what’s really happening inside your users’ browsers and how their interactions connect to backend systems? Maybe you want to pinpoint where slowdowns occur in your React app or see the complete picture of a user’s journey from click to API call.
Your frontend can tell you exactly what’s going on, and Honeycomb is the tool that helps you see it. But first, your browser data needs to make its way to Honeycomb through something called instrumentation.
The easiest and most reliable way to instrument your frontend is by using OpenTelemetry and the HoneycombWebSDK. This course will teach you how to instrument a React application for browser observability so you can send rich telemetry data to Honeycomb, view complete end-to-end traces, and understand how your frontend contributes to overall system performance.
How will I learn these things?
This course will teach you frontend instrumentation in 3 ways: videos, guided tutorials, and hands-on labs.
- Videos will explain concepts and demonstrate procedures.
- Guided tutorials walk you through how things work in practice.
- Labs and quizzes give you the opportunity to actually do it on your own with a sample application (or your own, if you'd like!)
What do I need before taking this course to be successful?
- An application where you have access to modify the source code. Click here for a sample application you can use for this course!
- A Honeycomb account and API key. Don't have one? Don't worry, we'll walk through creating one in this course.
-
Prerequisites
- Make a Honeycomb Account & Get Your API Key
- Run the Sample Browser Application
-
Introduction to Frontend Observability
- Why Frontend Observability?
- How Frontend Tracing Works in Honeycomb
- Architecture of Honeycomb Frontend Instrumentation
-
Instrumentation for the Browser
- Automatic Instrumentation for OpenTelemetry in the Browser + HoneycombWebSDK
- Hands-On Lab: Automatic Instrumentation
- Can't See Your Full Trace? How Context Propagation Works
- Add Custom Resource Attributes to Spans
- Hands-On Lab: Add Custom Resource Attributes
- Define a Session ID
- Hands-On Lab: Define Session IDs
-
Survey
- Tell us what you thought!