Can you transmit OpenTelemetry traces straight to Honeycomb.io from a web browser?

I am facing a challenge in developing an OpenTelemetry implementation that can efficiently send traces directly to Honeycomb.io.

// tracer.js
import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';

const HONEYCOMB_DATASET = '<DATA_SET>';
const HONEYCOMB_TEAM = '<API_KEY>';
const HONEYCOMB_URL = `https://api.honeycomb.io:443/v1/traces/`;
const exporter = new OTLPTraceExporter({
  url: HONEYCOMB_URL,
  headers: {
    'X-Honeycomb-Team': HONEYCOMB_TEAM,
    'X-Honeycomb-Dataset': HONEYCOMB_DATASET,
  },
});

const provider = new WebTracerProvider();
provider.addSpanProcessor(new SimpleSpanProcessor(exporter));

export const tracer = provider.getTracer('default tracer');

When I make the call:

tracer.startSpan('link click').setAttributes(attributes).end();

I receive a 501 response from

https://api.honeycomb.io/v1/traces/
stating:

{
  "message": "Invalid content-type. Only application/protobuf is supported."
}

I would like to know how I can successfully send my traces as Protobufs?

Answer №1

One effective way Honeycomb suggests addressing this issue is by utilizing an OpenTelemetry collector positioned between your application and their API.

The concept involves sending traces securely via HTTPS to your collector, implementing suitable security measures for your infrastructure, and then allowing the collector to process your data before forwarding it to Honeycomb (thus safeguarding your Honeycomb API key from browser exposure).

Reference:


I intend to revise this response as Honeycomb updates their API capabilities to support trace collection over HTTPS.

Answer №2

Hey there, great news! The latest update allows you to easily transmit OTLP/HTTP traces in JSON format to Honeycomb.io

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing a function from within a promise in JavaScript

Understanding the Code In this code snippet, there is a function named placeDecode that takes an HTML input element as a parameter. Inside this function, there is a promise used to convert the input value into a formatted address. The function placeDecod ...

Newbie in Web Development: What is the best way to transfer a complicated object between different PHP files?

As a native application developer primarily working with C++, I have unexpectedly found myself involved in a small business coding project for a friend. While I am accustomed to self-contained native applications, I am facing a challenge on this new projec ...

Tips on separating a function into two separate files in Node.js

Hey there! I am just starting to explore Node.js so bear with me if I make any mistakes. So, I have this file: exports.Client = function() { this.example = function(name, callback) { console.log(name); }; ...

Loop through an array that holds another array in javascript

After making a post request, I am receiving the following object: "{\"Success\":false,\"Errors\":{\"Name\":[\"The Name field is required.\"],\"Id\":[&b ...

What is the best method for eliminating empty links (i.e. empty tags with an href="x") from an HTML source code

There are empty links found on a webpage that I have pinpointed, and now I am looking to utilize JavaScript to eliminate them. The text is enclosed within anchor tags. ...

Unable to modify the title property of a link

Currently, I am in the process of transforming my website to support multiple languages. To achieve this, I have implemented a function using jQuery that dynamically changes text when a language button is clicked. While this method has been successful for ...

Launching a segment from a different page within a foundation reveal modal

With the goal of displaying a modal that contains content from a section on another page when a link is clicked, I encountered a specific issue. For instance: <a href="/otherpage" data-reveal-id="myModal" data-reveal-ajax="true"> Click Me For A Mod ...

Fetch image from database using Ajax when image name is clicked in CodeIgniter

I am currently working on creating a gallery using CodeIgniter. I have successfully retrieved a list of image names from the database and displayed them on the view page. Now, I would like to implement a feature where users can click on an image name and r ...

Analyzing the structure according to the month/week/year

My array consists of count and date values: day = [ { count: 1, date: '2022-07-07' }, { count: 1, date: '2022-08-14' }, { count: 2, date: '2022-07-19' }, { count: 4, date: '2022-07-19' }, { count: 2, date: ...

What is the best way to retrieve AWS secret values using JavaScript?

Having recently started using AWS, I have been able to manually obtain the secret I need. However, when attempting to utilize the code snippet provided by AWS to retrieve the secret value, all my attempts result in undefined. Can someone please point out ...

Container-wrapper unable to contain images, overflowing despite using overflow:hidden property

I am currently working on a unique section for a website that includes a .container-wrapper element consisting of text and multiple images. The container is set to have overflow: hidden; in order to prevent any overflow issues. However, the images within t ...

Transform the usual button into a jQuery button that requires a press and hold action

Within my code, there are two buttons in play. One button triggers the burger menu, while the second button adjusts the size of a div. I am looking to transform only the second button into a hold button that activates after a 3-second delay. code: $doc ...

Having difficulty creating the probot.github app due to an error: The removal of the programmatic API in npm version 8.0.0 causing failure

Currently, I am facing an issue while attempting to set up the probot.github app using the command npx create-probot-app my-first-app which can be found at: . My system is running on the latest node version v19.3.0 with npm version 9.2.0. However, upon exe ...

generate dynamic custom headers in an express application for accessibility by an Angular application

https://i.stack.imgur.com/6jyNE.pngRecently, I have started using Express and despite my extensive research, I haven't been able to find a solution to my issue. The problem is that I am receiving headers in my Express app, but when I attempt to make t ...

Learn the technique of coding HTML within inline JavaScript, along with implementing CSS inline styling

I'm looking for a way to incorporate HTML within inline JavaScript, along with CSS inline styles. Can someone provide guidance on how to achieve this? For example, something like the following code snippet: <p><span style="color: #00ff00;"&g ...

Tips for confining the draggable div within its container

I've been working with React and TypeScript, and I recently added the W3School drag div example to my React app. However, I'm facing an issue where the draggable div is moving outside of the container. Can someone please guide me on how to confin ...

Incorporating outside content into HTML

Currently, I am working on a project at my job which requires me to create a comprehensive help file with multiple chapters and extensive text all within one large HTML file. However, as the text will need to be translated into different languages, I am lo ...

Using JavaScript to extract data from JSON with differing value types

Struggling to format a String by parsing a JSON object. Here's an example of the data I'm working with: { "age": 35, "name": "", "time": { "24hr": true, "12hr": false } } The desired output should be: age - 35 n ...

What is the process for accessing and utilizing the value returned by a promise in a separate file?

I have developed a small project to demonstrate an issue. There are a total of 5 files in this project: - A container file that includes all the dependency injections. - A service file containing the necessary functions to be executed. - A controller fil ...

execute the function based on the given ID

I've been attempting to dynamically add content using a function. My goal is for the content with the same anchor ID as the clicked anchor to be added, but it seems like nothing is happening. Is there a more effective approach to achieve this? $(&a ...