OpenTelemetry support for better observation

[github2023spring]

Open Telemetry support for better observation

[sergiodxa]

What exactly do you need Remix to support here? If this is for the server logs it shows on request, that's an Express middleware, if you want to customize it you need to change to a custom Express server.

[dmvianna]

We need to instrument client side. I've been having trouble with that too. It seems the library gets reinitialised at every page load, and twice. The browser console gets filled with complaints of double initialisations.

[dmvianna]

Doh. Just add it to app/entry.client.tsx. Problem solved.

import { HoneycombWebSDK } from "@honeycombio/opentelemetry-web"
import { getWebAutoInstrumentations } from "@opentelemetry/auto-instrumentations-web"
import { UserInteractionInstrumentation } from "@opentelemetry/instrumentation-user-interaction"
import { RemixBrowser } from "@remix-run/react"
import { startTransition } from "react"
import { hydrateRoot } from "react-dom/client"
/**
 * By default, Remix will handle hydrating your app on the client for you.
 * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
 * For more information, see https://remix.run/file-conventions/entry.client
 */

const configDefaults = {
  ignoreNetworkEvents: false,
  propagateTraceHeaderCorsUrls: [
    // Regex to match your backend URLs. Update
    // to the domains you wish to include.
    /.+\.mywebsite\.org/g,
    /localhost/g,
  ],
}

const sdk = new HoneycombWebSDK({
  // endpoint: "https://api.eu1.honeycomb.io/v1/traces", // Send to EU instance of Honeycomb. Defaults to sending to US instance.
  debug: false, // Set to false for production environment.
  apiKey: "myapikey", // Replace with your Honeycomb Ingest API Key.
  serviceName: "myservice", // Replace with your application name. Honeycomb uses this string to find your dataset when we receive your data. When no matching dataset exists, we create a new one with this name if your API Key has the appropriate permissions.
  instrumentations: [
    getWebAutoInstrumentations({
      // Loads custom configuration for xml-http-request instrumentation.
      "@opentelemetry/instrumentation-xml-http-request": configDefaults,
      // "@opentelemetry/instrumentation-fetch": configDefaults,
      "@opentelemetry/instrumentation-document-load": configDefaults,
    }),
    new UserInteractionInstrumentation({
      eventNames: ["submit", "click"],
      shouldPreventSpanCreation: (_event, element, span) => {
        span.setAttribute("target.id", element.id)
        // etc..
      },
    }),
  ],
})
sdk.start()

startTransition(() => {
  hydrateRoot(document, <RemixBrowser />)
})