course
Instrumentation for OpenTelemetry in the Browser with the HoneycombWebSDK
Instrumentation for OpenTelemetry in the Browser with the HoneycombWebSDK
Instrumentation for OpenTelemetry in the Browser with the HoneycombWebSDK

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

Frontend Observability
Instrumentation

Course Instructor

Tyler Wilson
Tyler Wilson
Course Progress
Not started
Enroll
Course Outline
  1. Prerequisites
    1. Make a Honeycomb Account & Get Your API Key
    2. Run the Sample Browser Application
  2. Introduction to Frontend Observability
    1. Why Frontend Observability?
    2. How Frontend Tracing Works in Honeycomb
    3. Architecture of Honeycomb Frontend Instrumentation
  3. Instrumentation for the Browser
    1. Automatic Instrumentation for OpenTelemetry in the Browser + HoneycombWebSDK
    2. Hands-On Lab: Automatic Instrumentation
    3. Can't See Your Full Trace? How Context Propagation Works
    4. Add Custom Resource Attributes to Spans
    5. Hands-On Lab: Add Custom Resource Attributes
    6. Define a Session ID
    7. Hands-On Lab: Define Session IDs
  4. Survey
    1. Tell us what you thought!
course
Instrumentation for OpenTelemetry in the Browser with the HoneycombWebSDK
Instrumentation for OpenTelemetry in the Browser with the HoneycombWebSDK
Course Progress
Not started
Enroll

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 Outline
  1. Prerequisites
    1. Make a Honeycomb Account & Get Your API Key
    2. Run the Sample Browser Application
  2. Introduction to Frontend Observability
    1. Why Frontend Observability?
    2. How Frontend Tracing Works in Honeycomb
    3. Architecture of Honeycomb Frontend Instrumentation
  3. Instrumentation for the Browser
    1. Automatic Instrumentation for OpenTelemetry in the Browser + HoneycombWebSDK
    2. Hands-On Lab: Automatic Instrumentation
    3. Can't See Your Full Trace? How Context Propagation Works
    4. Add Custom Resource Attributes to Spans
    5. Hands-On Lab: Add Custom Resource Attributes
    6. Define a Session ID
    7. Hands-On Lab: Define Session IDs
  4. Survey
    1. Tell us what you thought!

Course Categories

Frontend Observability
Instrumentation

Course Instructor

Tyler Wilson
Tyler Wilson