autotel-devtools 14.0.0 → 16.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +3 -4
  2. package/skills/autotel-devtools/SKILL.md +0 -125
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "autotel-devtools",
3
- "version": "14.0.0",
3
+ "version": "16.0.0",
4
4
  "description": "Standalone OTLP receiver with web UI for local development",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -32,8 +32,7 @@
32
32
  "main": "./dist/index.js",
33
33
  "types": "./dist/index.d.ts",
34
34
  "files": [
35
- "dist",
36
- "skills"
35
+ "dist"
37
36
  ],
38
37
  "keywords": [
39
38
  "opentelemetry",
@@ -91,7 +90,7 @@
91
90
  "vitest-mock-extended": "^5.1.0"
92
91
  },
93
92
  "peerDependencies": {
94
- "autotel": "5.0.0"
93
+ "autotel": "6.1.0"
95
94
  },
96
95
  "peerDependenciesMeta": {
97
96
  "autotel": {
package/skills/autotel-devtools/SKILL.md DELETED
@@ -1,125 +0,0 @@
1
- ---
2
- name: autotel-devtools
3
- description: >
4
- Standalone OTLP receiver with a Svelte web UI for local-dev observability. Use when a developer wants to see OpenTelemetry traces, logs, metrics, and service maps streaming from a running app without setting up Jaeger/Tempo/Prometheus — either as a CLI dashboard or an embedded `<autotel-devtools>` widget.
5
- ---
6
-
7
- # autotel-devtools
8
-
9
- Local-dev OTLP receiver with a browser UI. Think TanStack Devtools for OpenTelemetry. Runs as CLI or embeds as a Shadow-DOM-isolated widget in any web app.
10
-
11
- ## Quick Start: pick an approach
12
-
13
- ### Standalone dashboard
14
-
15
- ```bash
16
- npx autotel-devtools
17
- # → OTLP receiver on :4318, UI at http://localhost:4318
18
- ```
19
-
20
- Point any OTel-instrumented app at it. The endpoints accept **both OTLP/JSON and
21
- OTLP/protobuf**, chosen from the request `Content-Type`, so protobuf-default SDKs
22
- (Python/Java/Go) work with no extra config:
23
-
24
- ```bash
25
- # JS (defaults to JSON, or set http/protobuf — both work)
26
- OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318 node app.js
27
-
28
- # Python/Java/Go (default to http/protobuf)
29
- OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318 python app.py
30
- ```
31
-
32
- ### Embedded widget
33
-
34
- ```html
35
- <script src="http://localhost:4318/widget.js"></script>
36
- <autotel-devtools></autotel-devtools>
37
- ```
38
-
39
- Shadow-DOM-isolated. Never leaks styles into the host page.
40
-
41
- ### Programmatic (Node + autotel)
42
-
43
- ```typescript
44
- import { init, withTracing } from 'autotel';
45
- import { createDevtools } from 'autotel-devtools';
46
-
47
- const { exporter, close } = createDevtools({ port: 4318, verbose: true });
48
-
49
- init({
50
- service: 'my-app',
51
- endpoint: 'http://localhost:4318',
52
- spanProcessors: [exporter], // stream spans to the devtools UI
53
- });
54
-
55
- export const loadUser = withTracing({ name: 'user.load' })(
56
- (ctx) => async (id: string) => {
57
- // ... span shows up live in devtools
58
- },
59
- );
60
- ```
61
-
62
- ## Package Entry Points
63
-
64
- | Import | What |
65
- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
66
- | `autotel-devtools` | `createDevtools()`, `DevtoolsServer`, exporters, types |
67
- | `autotel-devtools/server` | `DevtoolsServer`, OTLP parsing (`parseOtlpTraces`, `parseOtlpLogs`), HTTP routes (`attachDevtoolsRoutes`, `createDevtoolsHttpServer`), telemetry-limit helpers |
68
- | `autotel-devtools/exporter` | `DevtoolsSpanExporter` (standalone) |
69
-
70
- ## Server Endpoints
71
-
72
- | Route | What |
73
- | ---------------------------------------------- | -------------------------------------------------------------------- |
74
- | `POST /v1/traces` · `/v1/logs` · `/v1/metrics` | OTLP receivers: JSON or protobuf (`application/x-protobuf`) |
75
- | `GET /` | Dashboard UI (traces, logs, metrics, errors, resources, service map) |
76
- | `GET /widget.js` | Embeddable widget bundle (IIFE) |
77
- | `GET /healthz` | Health check |
78
- | `WS /ws` | WebSocket stream (history replay on connect) |
79
-
80
- ## Views in the UI
81
-
82
- - **Traces**: waterfall + flame graph, search with 300 ms debounce
83
- - **Logs**: severity/resource filtering
84
- - **Metrics**: per-metric time series
85
- - **Errors**: aggregated and grouped by fingerprint
86
- - **Resources**: derived from ingested telemetry
87
- - **Service map**: visualises call graph
88
-
89
- ## Environment Variables
90
-
91
- | Variable | Default | Purpose |
92
- | -------------------------- | ----------- | ----------------------------- |
93
- | `AUTOTEL_DEVTOOLS_PORT` | `4318` | Server port |
94
- | `AUTOTEL_DEVTOOLS_HOST` | `127.0.0.1` | Bind host |
95
- | `AUTOTEL_DEVTOOLS_TITLE` | — | Dashboard title |
96
- | `AUTOTEL_MAX_TRACE_COUNT` | `100` | Max traces retained in memory |
97
- | `AUTOTEL_MAX_LOG_COUNT` | `100` | Max logs retained |
98
- | `AUTOTEL_MAX_METRIC_COUNT` | `100` | Max metric points retained |
99
-
100
- ## CLI
101
-
102
- ```bash
103
- npx autotel-devtools 4319 # port as bare positional
104
- npx autotel-devtools --port 4319 --host 0.0.0.0 --title "My App"
105
- ```
106
-
107
- | Arg / Flag | Short | Purpose |
108
- | ---------- | ----- | ------------------------------------------------------------ |
109
- | `[port]` | — | Listen port shorthand for `--port` (explicit `--port` wins) |
110
- | `--port` | `-p` | Listen port (default 4318); walks to next free port if taken |
111
- | `--host` | `-H` | Bind host (default 127.0.0.1) |
112
- | `--title` | `-t` | Dashboard title |
113
-
114
- ## Works With
115
-
116
- - **autotel**: pass `exporter` into `spanProcessors` for live streaming
117
- - **Standard OpenTelemetry SDK**: any OTLP exporter targeting `http://localhost:4318` works; autotel is not required
118
- - **Browser apps**: the widget is a custom element with Shadow DOM, so drop it in without CSS conflicts
119
-
120
- ## Common Mistakes
121
-
122
- - Do NOT use the widget in Node: it's a browser-only IIFE bundle. Use `createDevtools()` server-side instead.
123
- - Do NOT set a production OTLP endpoint at `localhost:4318`: devtools is in-memory only (no persistence, caps at 100 items per signal by default). Bump `AUTOTEL_MAX_*_COUNT` for longer local sessions.
124
- - Do NOT embed the widget into pages served via strict CSP without allowing `http://localhost:4318`: the WebSocket connection and script load both need the devtools origin allowed.
125
- - Do NOT confuse the two builds: the **server** uses tsup (Node ESM + CJS), the **widget** uses Vite's IIFE build. Don't import `autotel-devtools/server` into widget code; it pulls in Node APIs.