Nathan L Smith smith

OpenTelemetry Demo - Elastic Style

In order to ensure Elastic Observability works the best with OpenTelemetry, we should run, maintain, and contribute to a fork of the OpenTelemetry demo.

This demo can be run with Docker Compose or on Kubernetes with the OpenTelemetry Demo Helm Chart.

Exploration steps

I did this a few months ago (see notes below) but am taking another crack at it in the hopes that we can use it to improve our product. It's also a good place to add the OpenTelmetry Host Metrics Receiver to assist us in making all of our apps show metrics collected by this method.

Clone https://github.com/open-telemetry/opentelemetry-demo-webstore
On an Elastic Cloud instance, add a new agent on your local machine
Enable the APM integration. curl http://localhost:8200 should respond with JSON indicating the APM server is running
Follow the instructions for modifying otelcol-config.yml, but make it:

  otlp:
    endpoint: host.docker.internal:8200
    tls:
 insecure: true

We want to instrument Remix apps with the Elastic APM Node.js Agent on the server and the Elastic APM Real User Monitoring JavaScript Agent on the client.

We want the server-rendered page to have the trace id and other data available to the client, so we can correlate the traces between server and client. Elastic's distributed tracing docs explain this.

I've been able to make this work with Remix on Express, but it's super hacky, so this gist shows what I'm doing so hopefully somebody can point me to a better way to do this.

These are instructions on how to use Elastic Observability with Remix.

The easiest way to get a working cluster is with Elastic Cloud. Create a new deployment. Once it's ready you'll want to copy the APM endpoint URL:

In your Remix app, install the Elastic RUM JavaScript agent:

npm install @elastic/apm-rum --save

Keybase proof

I hereby claim:

I am smith on github.
I am nlsmith (https://keybase.io/nlsmith) on keybase.
I have a public key whose fingerprint is 1D7D E99D 424F 651D 7C30 D888 ADE3 ABB3 5452 1F41

To claim this, I am signing this object:

Go Links

A list, in no particular order, of useful things I've read or watched about Go


	Set tone of responsesPreview

	More
	Creative

	More
	Balanced

	More

	{
	"type": "object",
	"required": ["name", "description", "identity", "trigraphs"],
	"description": "JSON schema for https://spellcaster.sh",
	"properties": {
	"name": {
	"type": "string",
	"description": "represents an intent, desired state, or outcome."
	},
	"description": {

	# List of installed extensions. These are not the friendly names on the marketplace, but you could figure it out,
	# and I think you can run `code --install-extension Orta.vsocde-jest`
	nsmith@nsmith ~/s/s/m/meatballs-ui> code --list-extensions (master=)
	DSKWRK.vscode-generate-getter-setter
	EditorConfig.EditorConfig
	Orta.vscode-jest
	Pendrica.Chef
	PeterJausovec.vscode-docker
	TeddyDD.fish
	Tyriar.sort-lines

	import React, { Component } from 'react'
	import cacheComponent from './cacheComponent'

	class AComponent extends Component {
	onClick = () => {
	this.props.set({ clicked: true });
	}

	render() {
	return <div>Have I been clicked? {this.props.cache.clicked ? "yes :)" : "no :("} <button onClick={this.onClick}>click me</button></div>;