Traces

\n {children}\n

\n );\n};\n\nconst Page: FC<{ children: Child }> = ({ children }) => {\n return (\n \n \n \n \n \n Traces\n \n \n \n {html`\n \n `}\n \n \n

\n \n

\n \n \n );\n};\n\nconst Layout: FC<{ children: Child }> = ({ children }) => {\n const c = useRequestContext();\n const hx_target = c.req.header(\"hx-target\");\n switch (hx_target) {\n case undefined: {\n const page = ;\n return html`${page}`;\n }\n case \"main\": {\n return

;\n }\n default: {\n return <>{children};\n }\n }\n};\n\nconst BreadCrumbs: FC<{\n links: { href: string; text: string }[];\n}> = ({ links }) => {\n return (\n

\n {link.text}\n

\n );\n};\n\nconst Table: FC<\n { columns: string[]; rows: JSX.Element[][]; highlight?: number }\n> = ({\n columns,\n rows,\n highlight,\n}) => {\n return (\n \n \n \n {columns.map((column) => )}\n \n \n \n {rows.map((row, i) => (\n \n {row.map((cell) => )}\n \n ))}\n \n \n \n {columns.map((column) => )}\n \n \n

{column}
{cell}
{column}

\n );\n};\n\nconst app = new Hono();\n\napp.use(\n \"*\",\n jsxRenderer(({ children }) => , {\n docType: false,\n }),\n);\n\napp.get(\"/\", async (c) => {\n const traces = await db.select().from(tracing_spans)\n .where(\n isNull(tracing_spans.parent_span_id),\n )\n .orderBy(\n desc(tracing_spans.timestamp),\n );\n return c.render(\n

\n \n \n

\n [\n \n {span.service}\n ,\n \n {span.trace_id}\n ,\n {span.timestamp.toLocaleString()},\n \n {span.duration.toFixed(4).toString().padStart(10, \" \")} ms\n ,\n {span.status_code == 2 ? \"Error\" : \"Ok\"},\n ])}\n />\n

,\n );\n});\n\napp.get(\"/v\", (c) => {\n return c.redirect(`/`);\n});\n\napp.get(\"/v/:username\", (c) => {\n return c.redirect(`/`);\n});\n\napp.get(\"/v/:username/:val\", async (c) => {\n const username = c.req.param(\"username\");\n const val = c.req.param(\"val\");\n if (!username || !val) {\n return c.json({ error: \"Invalid username or val\" }, 400);\n }\n\n const traces = await db.select().from(tracing_spans)\n .where(\n and(\n eq(tracing_spans.service, username + \"/\" + val),\n isNull(tracing_spans.parent_span_id),\n ),\n )\n .orderBy(\n desc(tracing_spans.timestamp),\n );\n\n return c.render(\n

\n \n

,\n );\n});\n\napp.get(\"/v/:username/:val/t/:trace_id\", async (c) => {\n const username = c.req.param(\"username\");\n const val = c.req.param(\"val\");\n const trace_id = c.req.param(\"trace_id\");\n if (!username || !val || !trace_id) {\n return c.json({ error: \"Invalid username, val or trace_id\" }, 400);\n }\n\n const trace_data = await db.batch([\n db\n .select()\n .from(tracing_spans)\n .where(eq(tracing_spans.trace_id, trace_id)),\n db.select({\n span_id: tracing_span_events.span_id,\n name: tracing_span_events.name,\n timestamp: tracing_span_events.timestamp,\n }).from(tracing_span_events).innerJoin(\n tracing_spans,\n eq(\n tracing_span_events.span_id,\n tracing_spans.span_id,\n ),\n ).where(eq(tracing_spans.trace_id, trace_id))\n .orderBy(tracing_span_events.event_number),\n ]);\n\n const spans = trace_data[0];\n\n let root_span_id;\n const spans_by_id = new Map();\n const spans_by_parent_id = new Map();\n for (const span of spans) {\n spans_by_id.set(span.span_id, span);\n if (!span.parent_span_id) {\n root_span_id = span.span_id;\n } else {\n const parent_spans = spans_by_parent_id.get(span.parent_span_id) || [];\n parent_spans.push(span);\n spans_by_parent_id.set(span.parent_span_id, parent_spans);\n }\n }\n\n const root_span = spans_by_id.get(root_span_id!)!;\n\n const render_spans: SelectSpan[] = [];\n function push_span(span_id: string) {\n const span = spans_by_id.get(span_id)!;\n render_spans.push(span);\n const children = spans_by_parent_id.get(span_id) || [];\n children.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());\n for (const child of children) {\n push_span(child.span_id);\n }\n }\n push_span(root_span_id!);\n\n const events = trace_data[1];\n const events_by_span_id = new Map();\n\n for (const event of events) {\n const span_events = events_by_span_id.get(event.span_id) || [];\n span_events.push(event);\n events_by_span_id.set(event.span_id, span_events);\n }\n\n let vis = `\n gantt\n dateFormat x\n axisFormat %L\n todayMarker off\n `;\n\n for (const span of render_spans) {\n const start_time = span.timestamp.getTime() -\n root_span.timestamp.getTime();\n\n let style = \"\";\n if (span.status_code === 2) {\n style += \"crit, \";\n }\n\n vis += `\n section ${span.name}\n ${span.duration} ms :${style} ${span.span_id}, ${start_time}, ${span.duration}ms\n click ${span.span_id} href \"/v/${username}/${val}/t/${trace_id}/s/${span.span_id}\"\n `;\n\n for (const event of events_by_span_id.get(span.span_id) || []) {\n const event_time = event.timestamp.getTime() -\n root_span.timestamp.getTime();\n vis += `\n ${event.name} : milestone, ${event.name}, ${event_time}, 0ms\n `;\n }\n }\n\n return c.render(\n

\n \n

\n          {vis}\n

Spans

\n [\n \n {span.name}\n ,\n {span.timestamp.toLocaleString()},\n {span.duration.toFixed(4)} ms,\n {span.status_code == 2 ? \"Error\" : \"Ok\"},\n ])}\n />\n

Click a span to see details

,\n );\n});\n\napp.get(\"/v/:username/:val/t/:trace_id/s/:span_id\", async (c) => {\n const username = c.req.param(\"username\");\n const val = c.req.param(\"val\");\n const trace_id = c.req.param(\"trace_id\");\n const span_id = c.req.param(\"span_id\");\n if (!username || !val || !trace_id || !span_id) {\n return c.json(\n { error: \"Invalid username, val, trace_id or span_id\" },\n 400,\n );\n }\n\n const trace_data = await db.batch([\n db\n .select()\n .from(tracing_spans)\n .where(eq(tracing_spans.trace_id, trace_id)),\n db.select({\n span_id: tracing_span_events.span_id,\n name: tracing_span_events.name,\n timestamp: tracing_span_events.timestamp,\n }).from(tracing_span_events).innerJoin(\n tracing_spans,\n eq(\n tracing_span_events.span_id,\n tracing_spans.span_id,\n ),\n ).where(eq(tracing_spans.trace_id, trace_id))\n .orderBy(tracing_span_events.event_number),\n ]);\n\n const spans = trace_data[0];\n\n let root_span_id;\n const spans_by_id = new Map();\n const spans_by_parent_id = new Map();\n for (const span of spans) {\n spans_by_id.set(span.span_id, span);\n if (!span.parent_span_id) {\n root_span_id = span.span_id;\n } else {\n const parent_spans = spans_by_parent_id.get(span.parent_span_id) || [];\n parent_spans.push(span);\n spans_by_parent_id.set(span.parent_span_id, parent_spans);\n }\n }\n\n const root_span = spans_by_id.get(root_span_id!)!;\n\n const render_spans: SelectSpan[] = [];\n function push_span(span_id: string) {\n const span = spans_by_id.get(span_id)!;\n render_spans.push(span);\n const children = spans_by_parent_id.get(span_id) || [];\n children.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());\n for (const child of children) {\n push_span(child.span_id);\n }\n }\n push_span(root_span_id!);\n\n const events = trace_data[1];\n const events_by_span_id = new Map();\n\n for (const event of events) {\n const span_events = events_by_span_id.get(event.span_id) || [];\n span_events.push(event);\n events_by_span_id.set(event.span_id, span_events);\n }\n\n let vis = `\n gantt\n dateFormat x\n axisFormat %L\n todayMarker off\n `;\n\n for (const span of render_spans) {\n const start_time = span.timestamp.getTime() -\n root_span.timestamp.getTime();\n\n let style = \"\";\n if (span.status_code === 2) {\n style += \"crit, \";\n }\n if (span.span_id == span_id) {\n style += \"active, \";\n }\n\n vis += `\n section ${span.name}\n ${span.duration} ms :${style} ${span.span_id}, ${start_time}, ${span.duration}ms\n click ${span.span_id} href \"/v/${username}/${val}/t/${trace_id}/s/${span.span_id}\"\n `;\n\n for (const event of events_by_span_id.get(span.span_id) || []) {\n const event_time = event.timestamp.getTime() -\n root_span.timestamp.getTime();\n vis += `\n ${event.name} : milestone, ${event.name}, ${event_time}, 0ms\n `;\n }\n }\n\n const span_data = await db.batch([\n db\n .select()\n .from(tracing_spans)\n .where(eq(tracing_spans.span_id, span_id)),\n db.select().from(tracing_span_attributes).innerJoin(\n tracing_spans,\n eq(\n tracing_span_attributes.span_id,\n tracing_spans.span_id,\n ),\n ).where(eq(tracing_spans.span_id, span_id)),\n db.select(\n {\n name: tracing_span_events.name,\n timestamp: tracing_span_events.timestamp,\n attributes:\n sql`json_group_array(json_array(${tracing_span_event_attributes.name}, ${tracing_span_event_attributes.value}))`,\n },\n ).from(tracing_span_events).innerJoin(\n tracing_spans,\n eq(\n tracing_span_events.span_id,\n tracing_spans.span_id,\n ),\n )\n .innerJoin(\n tracing_span_event_attributes,\n and(\n eq(\n tracing_span_events.span_id,\n tracing_span_event_attributes.span_id,\n ),\n eq(\n tracing_span_events.event_number,\n tracing_span_event_attributes.event_number,\n ),\n ),\n ).where(eq(tracing_spans.span_id, span_id))\n .groupBy(tracing_span_events.span_id, tracing_span_events.event_number)\n .orderBy(tracing_span_events.event_number),\n ]);\n\n const span_index = render_spans.findIndex(\n (span) => span.span_id === span_id,\n );\n\n return c.render(\n

\n \n

\n          {vis}\n

Spans

\n [\n \n {span.name}\n ,\n {span.timestamp.toLocaleString()},\n {span.duration.toFixed(4)} ms,\n {span.status_code == 2 ? \"Error\" : \"Ok\"},\n ])}\n highlight={span_index}\n />\n

Attributes

\n [\n {attr.tracing_span_attributes.name},\n {attr.tracing_span_attributes.value},\n ])}\n />\n

Events

\n {\n const attribute_array: [string, AttributeValue][] = JSON.parse(\n event.attributes as string,\n );\n\n return [\n {event.name},\n \n {event.timestamp.toLocaleString()}\n ,\n

\n {attribute_array.map(([key, value]) => {\n return (\n

\n {key}:\n

{value}

\n );\n })}\n

,\n ];\n })}\n />\n

,\n );\n});\n\nexport async function traceViewer(req: Request): Promise {\n await migrate();\n return await app.fetch(req);\n}\n","createdAt",["D",1713062687919],"version",24,"currentUserHasLiked","likeCount",6,"forkCount","referenceCount",10,"dependencyCount","commentCount","prCount","mergedPr",{"_132":133,"_134":135},"handle","saolsen","profileImageUrl","https://images.clerk.dev/oauth_github/img_2QtXHzN3gDPhKsBOvKsst8LTxC5.png","forkedVal","interval","slug","saolsen/telemetry","description","Telemetry For Vals. Telemetry is a library that lets you trace val town executions with opentelemetry. All traces are stored in val.town sqlite and there is an integrated trace viewer to see them. Quickstart Instrument an http val like this. import {\n init,\n tracedHandler,\n} from \"https://esm.town/v/saolsen/telemetry\";\n\n// Set up tracing by passing in `import.meta.url`.\n// be sure to await it!!!\nawait init(import.meta.url);\n\nasync function handler(req: Request): Promise {\n // whatever else you do.\n return \n \n}\n\nexport default tracedHandler(handler); This will instrument the http val and trace every request. Too add additional traces see this widgets example . Then, too see your traces create another http val like this. import { traceViewer } from \"https://esm.town/v/saolsen/telemetry\";\nexport default traceViewer; This val will serve a UI that lets you browse traces. For example, you can see my UI here . Tracing By wrapping your http handler in tracedHandler all your val executions will be traced. You can add additional traces by using the helpers. trace lets you trace a block of syncronous code. import { trace } from \"https://esm.town/v/saolsen/telemetry\";\n\ntrace(\"traced block\", () => {\n // do something\n}); traceAsync lets you trace a block of async code. import { traceAsync } from \"https://esm.town/v/saolsen/telemetry\";\n\nawait traceAsync(\"traced block\", await () => {\n // await doSomething();\n}); traced wraps an async function in tracing. import { traceAsync } from \"https://esm.town/v/saolsen/telemetry\";\n\nconst myTracedFunction: () => Promise = traced(\n \"myTracedFunction\",\n async () => {\n // await sleep(100);\n return \"something\";\n },\n); fetch is a traced version of the builtin fetch function that traces the request. Just import it and use it like you would use fetch . sqlite is a traced version of the val town sqlite client. Just import it and use it like you would use https://www.val.town/v/std/sqlite attribute adds an attribute to the current span, which you can see in the UI. event adds an event to the current span, which you can see in the UI.","versions",[144,147,151,155,159,163,167,171,175,179,183,187,191,195,199,202,206,210,214,217,221,225,229,232,236],{"_119":120,"_145":-5,"_117":146,"_114":112},"prId",["D",1713062687919],{"_119":148,"_145":-5,"_117":149,"_114":150},23,["D",1713061522855],"3efccf54-fa06-11ee-9d2d-cab58f78796a",{"_119":152,"_145":-5,"_117":153,"_114":154},22,["D",1713043946193],"527afeb2-f9dd-11ee-83e8-cab58f78796a",{"_119":156,"_145":-5,"_117":157,"_114":158},21,["D",1713043644742],"9ecd5680-f9dc-11ee-b1e6-cab58f78796a",{"_119":160,"_145":-5,"_117":161,"_114":162},20,["D",1713043246226],"b1449194-f9db-11ee-b8de-cab58f78796a",{"_119":164,"_145":-5,"_117":165,"_114":166},19,["D",1713043104100],"5c8dd1ec-f9db-11ee-a956-cab58f78796a",{"_119":168,"_145":-5,"_117":169,"_114":170},18,["D",1713042999294],"1e15c334-f9db-11ee-b211-cab58f78796a",{"_119":172,"_145":-5,"_117":173,"_114":174},17,["D",1713042986357],"165fac9a-f9db-11ee-b8de-cab58f78796a",{"_119":176,"_145":-5,"_117":177,"_114":178},16,["D",1713042819453],"b2e43758-f9da-11ee-b05a-cab58f78796a",{"_119":180,"_145":-5,"_117":181,"_114":182},15,["D",1713042818569],"b25d3956-f9da-11ee-a1c0-cab58f78796a",{"_119":184,"_145":-5,"_117":185,"_114":186},14,["D",1713042697227],"6a09f324-f9da-11ee-b54d-cab58f78796a",{"_119":188,"_145":-5,"_117":189,"_114":190},13,["D",1713042696220],"69704012-f9da-11ee-a683-cab58f78796a",{"_119":192,"_145":-5,"_117":193,"_114":194},12,["D",1713042257136],"63b978f6-f9d9-11ee-a359-cab58f78796a",{"_119":196,"_145":-5,"_117":197,"_114":198},11,["D",1713042252063],"60b34466-f9d9-11ee-b75d-cab58f78796a",{"_119":126,"_145":-5,"_117":200,"_114":201},["D",1713041995211],"c79ac4ac-f9d8-11ee-81cb-cab58f78796a",{"_119":203,"_145":-5,"_117":204,"_114":205},9,["D",1713040894460],"37818ed4-f9d6-11ee-b949-cab58f78796a",{"_119":207,"_145":-5,"_117":208,"_114":209},8,["D",1713040256033],"baf94c5e-f9d4-11ee-a854-cab58f78796a",{"_119":211,"_145":-5,"_117":212,"_114":213},7,["D",1713040138605],"74fb2132-f9d4-11ee-843a-cab58f78796a",{"_119":123,"_145":-5,"_117":215,"_114":216},["D",1713039958390],"09909cb0-f9d4-11ee-a1f6-cab58f78796a",{"_119":218,"_145":-5,"_117":219,"_114":220},5,["D",1713039850164],"c90e9660-f9d3-11ee-b912-cab58f78796a",{"_119":222,"_145":-5,"_117":223,"_114":224},4,["D",1713039768830],"9894185c-f9d3-11ee-bb12-cab58f78796a",{"_119":226,"_145":-5,"_117":227,"_114":228},3,["D",1713039768059],"981e618e-f9d3-11ee-bb12-cab58f78796a",{"_119":90,"_145":-5,"_117":230,"_114":231},["D",1713039587540],"2c85690e-f9d3-11ee-b92c-cab58f78796a",{"_119":233,"_145":-5,"_117":234,"_114":235},1,["D",1713039582779],"29aee7c8-f9d3-11ee-a47a-cab58f78796a",{"_119":31,"_145":-5,"_117":237,"_114":238},["D",1713039531372],"0b0ac56c-f9d3-11ee-bb12-cab58f78796a","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":246,"_247":248,"_94":249},"single","redirect","/v/saolsen/telemetry/versions",{"_114":154,"_115":250,"_119":152,"_117":251,"_252":99,"_100":101,"_109":110,"_132":133,"_11":96,"_253":-5,"_254":-5,"_255":-5,"_243":26,"_138":139},"/** @jsxImportSource npm:hono@4.2.2/jsx */\nimport \"https://deno.land/x/xhr@0.1.0/mod.ts\";\nimport \"node:async_hooks\";\nimport {\n AttributeValue,\n context,\n propagation,\n Span,\n SpanStatusCode,\n trace as otelTrace,\n Tracer,\n} from \"npm:@opentelemetry/api\";\nimport { ReadableSpan } from \"npm:@opentelemetry/sdk-trace-base\";\nimport {\n ExportResult,\n ExportResultCode,\n hrTimeToMicroseconds,\n} from \"npm:@opentelemetry/core\";\nimport { B3Propagator } from \"npm:@opentelemetry/propagator-b3\";\nimport { Resource } from \"npm:@opentelemetry/resources\";\nimport {\n SimpleSpanProcessor,\n WebTracerProvider,\n} from \"npm:@opentelemetry/sdk-trace-web\";\nimport { SEMRESATTRS_SERVICE_NAME } from \"npm:@opentelemetry/semantic-conventions\";\nimport { AsyncLocalStorageContextManager } from \"npm:@opentelemetry/context-async-hooks\";\n\nimport { and, desc, eq, isNull, sql } from \"npm:drizzle-orm@0.30.7\";\nimport {\n index,\n integer,\n primaryKey,\n sqliteTable,\n text,\n} from \"npm:drizzle-orm@0.30.7/sqlite-core\";\n\nimport { drizzle } from \"npm:drizzle-orm@0.30.7/libsql\";\nimport { BatchItem } from \"npm:drizzle-orm@0.30.7/batch\";\n\nimport { Hono } from \"npm:hono@4.2.2\";\nimport { Child, FC } from \"npm:hono@4.2.2/jsx\";\nimport { jsxRenderer, useRequestContext } from \"npm:hono@4.2.2/jsx-renderer\";\nimport { html } from \"npm:hono@4.2.2/html\";\n\nimport { type TransactionMode } from \"npm:@libsql/client\";\nimport {\n InStatement,\n ResultSet,\n sqlite as std_sqlite,\n} from \"https://esm.town/v/std/sqlite\";\nimport { extractValInfo } from \"https://esm.town/v/pomdtr/extractValInfo\";\n\nconst tracing_spans = sqliteTable(\n \"tracing_spans\",\n {\n span_id: text(\"span_id\").notNull().primaryKey(),\n trace_id: text(\"trace_id\").notNull(),\n parent_span_id: text(\"parent_span_id\"),\n service: text(\"service\").notNull(),\n name: text(\"name\").notNull(),\n timestamp: integer(\"timestamp\", { mode: \"timestamp_ms\" }).notNull(),\n duration: integer(\"duration\").notNull(),\n status_code: integer(\"status_code\"),\n },\n (table) => {\n return {\n spansTraceIdIdx: index(\"tracing_spans_trace_id\").on(\n table.trace_id,\n ),\n spansServiceIdx: index(\"tracing_spans_service\").on(\n table.service,\n ),\n spansTimestampIdx: index(\"tracing_spans_timestamp\").on(\n table.timestamp,\n ),\n };\n },\n);\n\ntype InsertSpan = typeof tracing_spans.$inferInsert;\ntype SelectSpan = typeof tracing_spans.$inferSelect;\n\nconst tracing_span_attributes = sqliteTable(\n \"tracing_span_attributes\",\n {\n span_id: text(\"span_id\").notNull().references(\n () => tracing_spans.span_id,\n { onDelete: \"cascade\" },\n ),\n name: text(\"name\").notNull(),\n value: text(\"value\", { mode: \"json\" }).notNull(),\n },\n (table) => {\n return {\n pk: primaryKey({ columns: [table.span_id, table.name] }),\n spanAttributesSpanIdIdx: index(\"tracing_span_attributes_span_id\").on(\n table.span_id,\n ),\n spanAttributesNameIdx: index(\"tracing_span_attributes_name\").on(\n table.name,\n ),\n };\n },\n);\n\ntype InsertSpanAttribute = typeof tracing_span_attributes.$inferInsert;\n\nconst tracing_span_events = sqliteTable(\n \"tracing_span_events\",\n {\n span_id: text(\"span_id\").notNull().references(\n () => tracing_spans.span_id,\n { onDelete: \"cascade\" },\n ),\n event_number: integer(\"event_number\").notNull(),\n name: text(\"name\").notNull(),\n timestamp: integer(\"timestamp\", { mode: \"timestamp_ms\" }).notNull(),\n },\n (table) => {\n return {\n pk: primaryKey({ columns: [table.span_id, table.event_number] }),\n spanEventsSpanIdIdx: index(\"tracing_span_events_span_id\").on(\n table.span_id,\n ),\n spanEventsNameIdx: index(\"tracing_span_events_name\").on(\n table.name,\n ),\n };\n },\n);\n\ntype InsertSpanEvent = typeof tracing_span_events.$inferInsert;\n\nconst tracing_span_event_attributes = sqliteTable(\n \"tracing_span_event_attributes\",\n {\n span_id: text(\"span_id\").notNull().references(\n () => tracing_spans.span_id,\n { onDelete: \"cascade\" },\n ),\n event_number: integer(\"event_number\").notNull(),\n name: text(\"name\").notNull(),\n value: text(\"value\", { mode: \"json\" }).notNull(),\n },\n (table) => {\n return {\n pk: primaryKey({\n columns: [table.span_id, table.event_number, table.name],\n }),\n spanEventAttributesSpanIdEventNumberIdx: index(\n \"tracing_span_event_attributes_span_id_event_number\",\n )\n .on(\n table.span_id,\n table.event_number,\n ),\n spanEventAttributesNameIdx: index(\"tracing_span_event_attributes_name\")\n .on(\n table.name,\n ),\n };\n },\n);\n\ntype InsertSpanEventAttribute =\n typeof tracing_span_event_attributes.$inferInsert;\n\nconst schema = {\n tracing_spans,\n tracing_span_attributes,\n tracing_span_events,\n tracing_span_event_attributes,\n};\n\nconst migrations: string[] = [\n `CREATE TABLE tracing_spans (\n span_id text PRIMARY KEY NOT NULL,\n trace_id text NOT NULL,\n parent_span_id text,\n service text NOT NULL,\n name text NOT NULL,\n timestamp integer NOT NULL,\n duration integer NOT NULL,\n status_code integer\n )`,\n `CREATE TABLE tracing_span_attributes (\n span_id text NOT NULL,\n name text NOT NULL,\n value text NOT NULL,\n PRIMARY KEY(name, span_id),\n FOREIGN KEY (span_id) REFERENCES tracing_spans(span_id) ON UPDATE no action ON DELETE cascade\n )`,\n `CREATE TABLE tracing_span_events (\n span_id text NOT NULL,\n event_number integer NOT NULL,\n name text NOT NULL,\n timestamp integer NOT NULL,\n PRIMARY KEY(event_number, span_id),\n FOREIGN KEY (span_id) REFERENCES tracing_spans(span_id) ON UPDATE no action ON DELETE cascade\n )`,\n `CREATE TABLE tracing_span_event_attributes (\n span_id text NOT NULL,\n event_number integer NOT NULL,\n name text NOT NULL,\n value text NOT NULL,\n PRIMARY KEY(event_number, name, span_id),\n FOREIGN KEY (span_id) REFERENCES tracing_spans(span_id) ON UPDATE no action ON DELETE cascade\n )`,\n `CREATE INDEX tracing_span_attributes_span_id ON tracing_span_attributes (span_id)`,\n `CREATE INDEX tracing_span_attributes_name ON tracing_span_attributes (name)`,\n `CREATE INDEX tracing_span_event_attributes_span_id_event_number ON tracing_span_event_attributes (span_id,event_number)`,\n `CREATE INDEX tracing_span_event_attributes_name ON tracing_span_event_attributes (name)`,\n `CREATE INDEX tracing_span_events_span_id ON tracing_span_events (span_id)`,\n `CREATE INDEX tracing_span_events_name ON tracing_span_events (name)`,\n `CREATE INDEX tracing_spans_trace_id ON tracing_spans (trace_id)`,\n `CREATE INDEX tracing_spans_service ON tracing_spans (service)`,\n `CREATE INDEX tracing_spans_timestamp ON tracing_spans (timestamp)`,\n];\n\nasync function migrate() {\n await std_sqlite.execute(`\n create table if not exists tracing_schema (\n id integer primary key autoincrement,\n name text not null,\n step integer not null\n ) strict;\n `);\n\n const rs = await std_sqlite.execute({\n sql: \"select step from migrations where name = :name\",\n args: { name: \"tracing\" },\n });\n let step: number = 0;\n if (rs.rows.length === 0) {\n await std_sqlite.execute({\n sql: \"insert into migrations(name, step) values (:name, :step)\",\n args: { name: \"tracing\", step: 0 },\n });\n } else {\n step = Number(rs.rows[0][0]);\n }\n\n const batch = [];\n let i = 0;\n for (i = 0; i < migrations.length; i++) {\n const migration = migrations[i];\n const migration_step = Number(i) + 1;\n if (migration_step > step) {\n batch.push(migration);\n }\n }\n batch.push({\n sql: `update migrations set step = :step where name = :name`,\n args: { name: \"tracing\", step: i },\n });\n await std_sqlite.batch(batch);\n}\n\n// deno-lint-ignore no-explicit-any\nconst db = drizzle(std_sqlite as any, { schema });\n\nclass ValTownSpanExporter {\n /**\n * Export spans.\n * @param spans\n * @param resultCallback\n */\n export(\n spans: ReadableSpan[],\n resultCallback: (result: ExportResult) => void,\n ): void {\n const new_tracing_spans: InsertSpan[] = [];\n const new_tracing_span_attributes: InsertSpanAttribute[] = [];\n const new_tracing_span_events: InsertSpanEvent[] = [];\n const new_tracing_span_event_attributes: InsertSpanEventAttribute[] = [];\n\n for (const span of spans) {\n const span_context = span.spanContext();\n\n new_tracing_spans.push({\n span_id: span_context.spanId,\n trace_id: span_context.traceId,\n parent_span_id: span.parentSpanId,\n service:\n span.resource.attributes[SEMRESATTRS_SERVICE_NAME]?.toString() ||\n \"val\",\n name: span.name,\n timestamp: new Date(hrTimeToMicroseconds(span.startTime) * 0.001),\n duration: hrTimeToMicroseconds(span.duration) * 0.001,\n status_code: span.status.code,\n });\n\n for (const [name, value] of Object.entries(span.attributes)) {\n new_tracing_span_attributes.push({\n span_id: span_context.spanId,\n name,\n value,\n });\n }\n\n for (let i = 0; i < span.events.length; i++) {\n const event = span.events[i];\n new_tracing_span_events.push({\n span_id: span_context.spanId,\n event_number: i,\n name: event.name,\n timestamp: new Date(hrTimeToMicroseconds(event.time) * 0.001),\n });\n\n if (event.attributes) {\n for (const [name, value] of Object.entries(event.attributes)) {\n new_tracing_span_event_attributes.push({\n span_id: span_context.spanId,\n event_number: i,\n name,\n value,\n });\n }\n }\n }\n\n console.log(\"spans\", new_tracing_spans);\n\n const _ = new Promise((resolve) => {\n const batch: [BatchItem<\"sqlite\">, ...BatchItem<\"sqlite\">[]] = [\n db.insert(tracing_spans).values(new_tracing_spans),\n ];\n if (new_tracing_span_attributes.length > 0) {\n batch.push(\n db.insert(tracing_span_attributes).values(\n new_tracing_span_attributes,\n ),\n );\n }\n if (new_tracing_span_events.length > 0) {\n batch.push(\n db.insert(tracing_span_events).values(new_tracing_span_events),\n );\n }\n if (new_tracing_span_event_attributes.length > 0) {\n batch.push(\n db.insert(tracing_span_event_attributes).values(\n new_tracing_span_event_attributes,\n ),\n );\n }\n resolve(\n db.batch(batch).catch((e) => {\n console.error(\"Error inserting tracing spans:\", e);\n }).then(() => {}),\n );\n });\n }\n\n return resultCallback({ code: ExportResultCode.SUCCESS });\n }\n\n /**\n * Shutdown the exporter.\n */\n shutdown(): Promise {\n console.log(\"shutdown\");\n return Promise.resolve();\n }\n\n /**\n * Exports any pending spans in exporter\n */\n forceFlush(): Promise {\n console.log(\"forceflush\");\n return Promise.resolve();\n }\n}\n\nexport async function init(\n url: string | URL,\n): Promise {\n const val_info = extractValInfo(url);\n\n await migrate();\n\n const provider = new WebTracerProvider({\n resource: new Resource({\n [SEMRESATTRS_SERVICE_NAME]: val_info.author + \"/\" + val_info.name,\n }),\n });\n\n provider.addSpanProcessor(\n new SimpleSpanProcessor(\n new ValTownSpanExporter(),\n ),\n );\n\n provider.register({\n contextManager: new AsyncLocalStorageContextManager(),\n propagator: new B3Propagator(),\n });\n}\n\nexport function tracer(): Tracer {\n return otelTrace.getTracer(\"val.town\");\n}\n\nexport function attribute(name: string, value: string): void {\n otelTrace.getActiveSpan()?.setAttribute(name, value);\n}\n\nexport function event(name: string, attrs: Record): void {\n otelTrace.getActiveSpan()?.addEvent(name, attrs);\n}\n\nexport function trace<\n // deno-lint-ignore no-explicit-any\n F extends (...args: any[]) => any,\n>(name: string, fn: F, ...args: Parameters): ReturnType {\n return tracer().startActiveSpan(name, (span: Span) => {\n try {\n const result = fn(...args);\n span.setStatus({ code: SpanStatusCode.OK });\n return result;\n } catch (error) {\n span.setStatus({\n code: SpanStatusCode.ERROR,\n message: error.message,\n });\n span.recordException(error);\n throw error;\n } finally {\n span.end();\n }\n });\n}\n\nexport async function traceAsync<\n // deno-lint-ignore no-explicit-any\n F extends (...args: any[]) => any,\n>(\n name: string,\n fn: F,\n ...args: Parameters\n): Promise>> {\n return await tracer().startActiveSpan(name, async (span: Span) => {\n try {\n const result = await fn(...args);\n span.setStatus({ code: SpanStatusCode.OK });\n return result;\n } catch (error) {\n span.setStatus({\n code: SpanStatusCode.ERROR,\n message: error.message,\n });\n span.recordException(error);\n throw error;\n } finally {\n span.end();\n }\n });\n}\n\nexport function traced<\n // deno-lint-ignore no-explicit-any\n F extends (...args: any[]) => any,\n>(name: string, f: F) {\n return async function (\n ...args: Parameters\n ): Promise>> {\n return await traceAsync(name, f, ...args);\n };\n}\n\n/**\n * Wrapper for fetch that traces the request. It also passes a propagation header\n * so if you are calling another val that uses traced_handler their traces will\n * be tied together.\n */\nexport async function fetch(\n input: string | URL,\n init?: RequestInit,\n): Promise {\n return await tracer().startActiveSpan(`fetch`, async (span) => {\n const prop_output: { b3: string } = { b3: \"\" };\n propagation.inject(context.active(), prop_output);\n try {\n const resp: Response = await globalThis.fetch(input, {\n ...init,\n headers: {\n b3: prop_output.b3,\n ...(init?.headers ?? {}),\n },\n });\n span.setAttributes({\n \"http.url\": resp.url,\n \"response.status_code\": resp.status,\n });\n if (resp.ok && resp.status >= 200 && resp.status < 400) {\n span.setStatus({ code: SpanStatusCode.OK });\n } else {\n span.setStatus({\n code: SpanStatusCode.ERROR,\n message: await resp.clone().text(),\n });\n }\n return resp;\n } catch (error) {\n span.setStatus({\n code: SpanStatusCode.ERROR,\n message: error.message,\n });\n span.recordException(error);\n throw error;\n } finally {\n span.end();\n }\n });\n}\n\nasync function tracedExecute(statement: InStatement): Promise {\n return await tracer().startActiveSpan(\n `sqlite:execute`,\n async (span) => {\n if (typeof statement === \"string\") {\n span.addEvent(\"sqlite.execute\", {\n \"sqlite.statement\": statement,\n });\n } else {\n const kind = statement.sql.split(\" \")[0];\n span.addEvent(\"sqlite.execute \" + kind, {\n \"sqlite.statement\": statement.sql,\n \"sqlite.args\": JSON.stringify(statement.args, null, 2),\n });\n }\n try {\n const result = await std_sqlite.execute(statement);\n span.setStatus({ code: SpanStatusCode.OK });\n return result;\n } catch (error) {\n span.setStatus({\n code: SpanStatusCode.ERROR,\n message: error.message,\n });\n throw new Error(error);\n } finally {\n span.end();\n }\n },\n );\n}\n\nasync function tracedBatch(\n statements: InStatement[],\n mode?: TransactionMode,\n): Promise {\n return await tracer().startActiveSpan(`sqlite:batch`, async (span) => {\n for (const statement of statements) {\n if (typeof statement === \"string\") {\n span.addEvent(\"sqlite.batch\", {\n statement: statement,\n });\n } else {\n const kind = statement.sql.split(\" \")[0];\n span.addEvent(\"sqlite.batch \" + kind, {\n \"sqlite.statement\": statement.sql,\n \"sqlite.args\": JSON.stringify(statement.args, null, 2),\n });\n }\n }\n try {\n const result = await std_sqlite.batch(statements, mode);\n span.setStatus({ code: SpanStatusCode.OK });\n return result;\n } catch (error) {\n span.setStatus({\n code: SpanStatusCode.ERROR,\n message: error.message,\n });\n throw new Error(error);\n } finally {\n span.end();\n }\n });\n}\n\nexport const sqlite = {\n /**\n * Executes a SQLite statement.\n *\n * @param {InStatement} statement - The SQLite statement to execute.\n * @example String query:\n * `sqlite.execute(\"SELECT 1;\")`\n * @example Query with arguments:\n * `sqlite.execute({sql: \"SELECT * from books WHERE year > ?;\", args: [2020]})`\n */\n execute: tracedExecute,\n\n /**\n * Executes a batch of SQLite statements.\n *\n * @param {InStatement[]} statements - An array of SQLite statements to execute.\n * @param {TransactionMode} [mode] - The transaction mode for the batch execution.\n */\n batch: tracedBatch,\n};\n\n/**\n * Takes an http handler and returns a new handler that\n * traces the request.\n * @returns {Function} A new handler that traces the request.\n */\nexport function tracedHandler(\n handler: (req: Request) => Promise,\n): (req: Request) => Promise {\n async function _tracedHandler(req: Request): Promise {\n let active_context = null;\n const prop_header = req.headers.get(\"b3\");\n if (prop_header) {\n active_context = propagation.extract(context.active(), {\n b3: prop_header,\n });\n }\n\n return await tracer().startActiveSpan(\n `${req.method} ${req.url}`,\n {},\n active_context!,\n async (span) => {\n try {\n console.log(\"before\");\n const resp: Response = await handler(req);\n console.log(\"after\");\n span.setAttributes({\n \"http.method\": req.method,\n \"http.url\": req.url,\n \"response.status_code\": resp.status,\n });\n if (resp.ok && resp.status >= 200 && resp.status < 400) {\n span.setStatus({ code: SpanStatusCode.OK });\n } else {\n span.setStatus({\n code: SpanStatusCode.ERROR,\n message: await resp.clone().text(),\n });\n }\n return resp;\n } catch (error) {\n span.setStatus({\n code: SpanStatusCode.ERROR,\n message: error.message,\n });\n span.recordException(error);\n throw error;\n } finally {\n console.log(\"ok\");\n span.end();\n console.log(\"done\");\n }\n },\n );\n }\n return _tracedHandler;\n}\n\n// viewer\nconst Main: FC<{ children: Child }> = ({ children }) => {\n return (\n

\n {children}\n

\n );\n};\n\nconst Page: FC<{ children: Child }> = ({ children }) => {\n return (\n \n \n \n \n \n Traces\n \n \n \n {html`\n \n `}\n \n \n

\n \n

;\n }\n default: {\n return <>{children};\n }\n }\n};\n\nconst BreadCrumbs: FC<{\n links: { href: string; text: string }[];\n}> = ({ links }) => {\n return (\n

\n {link.text}\n

{column}
{cell}
{column}

\n \n \n

\n \n

\n          {vis}\n

Spans

\n [\n \n {span.name}\n ,\n {span.timestamp.toLocaleString()},\n {span.duration.toFixed(4)} ms,\n {span.status_code == 2 ? \"Error\" : \"Ok\"},\n ])}\n />\n

Click a span to see details

\n \n

\n          {vis}\n

Spans

\n [\n \n {span.name}\n ,\n {span.timestamp.toLocaleString()},\n {span.duration.toFixed(4)} ms,\n {span.status_code == 2 ? \"Error\" : \"Ok\"},\n ])}\n highlight={span_index}\n />\n

Attributes

\n [\n {attr.tracing_span_attributes.name},\n {attr.tracing_span_attributes.value},\n ])}\n />\n

Events

\n {\n const attribute_array: [string, AttributeValue][] = JSON.parse(\n event.attributes as string,\n );\n\n return [\n {event.name},\n \n {event.timestamp.toLocaleString()}\n ,\n

\n {attribute_array.map(([key, value]) => {\n return (\n

\n {key}:\n

{value}

\n );\n })}\n

,\n ];\n })}\n />\n

,\n );\n});\n\nexport async function traceViewer(req: Request): Promise {\n await migrate();\n return await app.fetch(req);\n}\n",["D",1713043946193],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

telemetry

Version 22