Basic instrumentation of Cloudflare bindings (AI, KV, R2, D1)

[brettimus]

The UI does not handle this instrumentation in any special way yet. Let's reserve that for a follow-on PR, where we can add icons, and additional smarts.

Summary

This PR adds some automatic instrumentation for certain Cloudflare bindings:

• D1
• R2
• Workers AI
• Workers KV

It also introduces a sample application for testing this instrumentation, called goosify. To run the sample app, you'll need a Cloudflare account.

Running the Sample App

To run the sample app

pnpm i
cd examples/goosify
pnpm db:touch
pnpm db:migrate
pnpm dev

To make requests against the sample app:

cd examples/goosify
pnpx @fiberplane/studio@latest

If you want to use the Studio in this repo, instead of a published version:

cd api
FPX_WATCH_DIR=../examples/goosify pnpm dev

Attributes

The philosophy right now is to keep the attributes as uniform and bare-bones as possible, and make the frontend responsible for wrapping them up into something more user-friendly.

To that end, we just record the binding name, binding type, method invoked, and arguments. There can also be an (optional) error, if the function errored.

Measured methods of the cf bindings will have the following attributes:

type CfBindingAttributes = {
  /** The method called on the binding instance (e.g., "list" for an R2 binding) */
  "cf.binding.method": string;
  /** The name of the binding on the env (e.g., "APP_DB" for a database) */
  "cf.binding.name": string;
  /** The constructor name of the binding (e.g., "Ai", "R2Bucket", ...)*/
  "cf.binding.type": "Ai" | "R2Bucket" | "KvNamespace" | "D1Database";
  /** The arguments passed to this method (JSON serialized) */
  args: string;
  /** The JSON serialized result, it there was a successful result */
  "cf.binding.result"?: string;
  /** The JSON serialized error, if method threw */
  "cf.binding.error"?: string;
}

[pkg-pr-new]

commit: e7fac80

pnpm add https://pkg.pr.new/fiberplane/fpx/@fiberplane/studio@196

pnpm add https://pkg.pr.new/fiberplane/fpx/@fiberplane/hono-otel@196

Open in Stackblitz