midline-agent 0.3.0 → 0.4.0

package/README.md

@@ -1,6 +1,7 @@
 # midline-agent
 
 **The Node.js SDK for Midline** — request and error monitoring with security and threat detection.
+It also ships **`midline-agent/browser`** for web apps: see [Browser apps](#browser-apps).
 
 Midline itself is not tied to Node. Every event lands on the same stream through a plain JSON
 endpoint, so a Django, Rails, Laravel, Spring, Go or .NET service reports exactly what an Express
@@ -102,7 +103,8 @@ bootstrap();
 ```
 
 Nest handles exceptions in its own filters, so they rarely reach Express error middleware. The
-request middleware still records every 4xx/5xx response.
+request middleware still records every 4xx/5xx response, and Midline groups the 5xx responses into
+Issues by method, route and status.
 
 ### Plain Node `http`
 
@@ -283,8 +285,9 @@ TARGET_API_URL=http://localhost:4000
 ## Console output
 
 Set `captureConsole: true` (or `MIDLINE_CAPTURE_CONSOLE=true`) and whatever the process prints
-shows up on the dashboard's Logs page as `console` events, one per line, next to your requests. That
-covers `console.log`, Nest's logger, pino, winston: anything written to stdout or stderr.
+is sent as `console` events, one per line, and shows up on the dashboard's **Terminal** page. That
+covers `console.log`, Nest's logger, pino, winston: anything written to stdout or stderr. The Logs page
+stays request traffic.
 
 ```ts
 MidlineAgent.init({ apiKey: process.env.MIDLINE_API_KEY, captureConsole: true });
@@ -299,7 +302,7 @@ const app = await NestFactory.create(AppModule); // startup lines are captured f
   medium, and everything else is low.
 - Up to 100 lines a second are sent, with room for a 1,000-line burst such as Nest mapping its routes
   at startup. Lines past that still print but aren't sent.
-- Printed lines don't count towards request totals, error rates or latency.
+- Printed lines don't count towards request totals, error rates, latency or Issues.
 - It needs a Midline server that knows the `console` event type. An older server refuses the first
   line; the agent then turns console capture off, says so once, and keeps sending requests and errors.
 - The agent's own diagnostics are never captured.
@@ -372,6 +375,88 @@ app.get("/x", (req, res) => { logger.info({ requestId: getRequestContext(req)?.r
 
 ---
 
+## Browser apps
+
+`midline-agent/browser` monitors a web app from the page: uncaught errors and unhandled rejections,
+failed `fetch` and `XMLHttpRequest` calls, Web Vitals (LCP, INP, CLS, FCP, TTFB) and, if you ask,
+console output. It has no dependencies, no Node code, and works under React, Vue, Angular, Svelte,
+Next.js or no framework at all, because it instruments the page rather than a framework.
+
+```ts
+import * as Midline from "midline-agent/browser";
+
+Midline.init({
+  apiKey: import.meta.env.VITE_MIDLINE_BROWSER_KEY, // pk_… browser key
+  service: "checkout-web",
+  environment: import.meta.env.MODE,
+  release: import.meta.env.VITE_RELEASE,
+});
+```
+
+**Use a browser key, never a server key.** Anything in a bundle can be read by whoever loads the page,
+so browser keys (`pk_…`) are public by design and the Midline server accepts them only from the
+origins listed on the key (create one under **Project → API Keys → Browser**). Server keys (`ak_…`)
+are refused whenever a browser sends them, and the SDK won't start with one.
+
+Errors a framework catches itself never reach the window. Forward them:
+
+```tsx
+// React error boundary
+componentDidCatch(error: Error, info: ErrorInfo) {
+  Midline.captureException(error, { extra: { componentStack: info.componentStack } });
+}
+
+// Vue
+app.config.errorHandler = (error, _instance, info) => Midline.captureException(error, { extra: { info } });
+```
+
+**Linking a page to your backend.** Same-origin requests get a W3C `traceparent` header, which the
+Node agent on the backend turns into `traceId`/`spanId` (see above), so the page's failed call and
+the server request behind it share a trace id. For an API on another origin, list it in
+`tracePropagationTargets` and allow the `traceparent` header in that API's CORS configuration, or
+the browser will block the call's preflight.
+
+| Option | Default | |
+| --- | --- | --- |
+| `apiKey` | — | Browser key (`pk_…`). |
+| `endpoint` | `https://api.usemidline.com` | `http://` only for localhost. |
+| `service`, `environment`, `release` | — | Stamped on every event. |
+| `captureErrors` | `true` | Uncaught errors and unhandled rejections. |
+| `captureRequests` | `"failed"` | `"failed"` (4xx, 5xx, network errors), `"all"`, or `false`. Every call is a breadcrumb either way. |
+| `captureWebVitals` | `true` | Reported once, when the page is first hidden. |
+| `captureConsole` | `false` | `true` for `error` and `warn`, or a list of levels. Lines appear on the Terminal page. Opt-in because wrapped console calls show the SDK as their source in devtools. |
+| `tracePropagationTargets` | same origin | Strings match as URL prefixes (or path prefixes starting with `/`); RegExps match the full URL. |
+| `ignoreErrors`, `ignoreUrls` | `[]` | Strings match as substrings. |
+| `sampleRate` | `1` | Fraction of events sent. |
+| `maxEventsPerMinute` | `120` | So an error in a render loop can't flood the project. |
+| `beforeSend` | — | Return `null` to drop an event; edit `payload` and `metadata` freely. |
+| `redactFields` | — | Extra field names to redact. |
+| `enabled`, `debug` | `true`, `false` | |
+
+Also: `captureMessage(message, severity)`, `setUser({ id })`, `setTag(key, value)`,
+`addBreadcrumb(message)`, `flush()` and `close()`, which restores everything the SDK wrapped.
+
+What it will not do: it never sends cookies, query strings of the page URL, or request and response
+bodies; it redacts the same credential patterns as the Node agent before an event is queued; it
+never throws into your code; and if Midline is down it keeps a bounded queue and backs off. Pending
+events leave with `keepalive` when the tab is hidden. During server-side rendering, `init` does
+nothing.
+
+No bundler? Load the ES module build directly:
+
+```html
+<script type="module">
+  import * as Midline from "https://cdn.jsdelivr.net/npm/midline-agent@0.4.0/dist/esm/browser/index.js";
+  Midline.init({ apiKey: "pk_…", service: "web" });
+</script>
+```
+
+The Midline server must be recent enough to accept browser keys (it answers the CORS preflight on
+the ingest routes). Against an older server the SDK logs nothing unless `debug` is on and keeps
+retrying with backoff.
+
+---
+
 ## Any other backend
 
 The agent does two things: it turns a request or an error into an event, and it POSTs that event to

package/browser/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "midline-agent/browser",
+  "private": true,
+  "main": "../dist/browser/index.js",
+  "module": "../dist/esm/browser/index.js",
+  "types": "../dist/browser/index.d.ts",
+  "sideEffects": false
+}

package/dist/browser/client.d.ts

@@ -0,0 +1,59 @@
+import type { EventSeverity } from "../types.js";
+import type { CaptureContext, MidlineBrowserConfig, MidlineUser } from "./types.js";
+export declare class BrowserConfigError extends Error {
+}
+/** Accepts a base URL or the ingest URL, and returns the batch URL. */
+export declare function resolveBatchUrl(endpoint?: string): string;
+/**
+ * One installed SDK instance. Everything it does to the page — wrapped fetch,
+ * XHR, console and history, window listeners — is undone by `close()`.
+ */
+export declare class BrowserClient {
+    private readonly win;
+    private readonly config;
+    private readonly redactor;
+    private readonly transport;
+    private readonly teardowns;
+    private readonly breadcrumbs;
+    private readonly recentErrors;
+    private readonly sessionId;
+    private readonly originalConsole;
+    private traceId;
+    private user;
+    private tags;
+    private tokens;
+    private lastRefill;
+    private active;
+    private inConsoleHook;
+    private rateLimitNoted;
+    private constructor();
+    /** Returns undefined, after one console warning, when the SDK can't run. It never throws into the app. */
+    static create(config: MidlineBrowserConfig): BrowserClient | undefined;
+    private install;
+    captureException(error: unknown, context?: CaptureContext): void;
+    captureMessage(message: string, severity?: EventSeverity, context?: CaptureContext): void;
+    setUser(user: MidlineUser | null): void;
+    setTag(key: string, value: string): void;
+    addBreadcrumb(message: string, type?: string): void;
+    flush(): Promise<void>;
+    close(): Promise<void>;
+    private handleError;
+    private handleRequest;
+    private handleConsole;
+    private handleNavigation;
+    private handleVitals;
+    private propagation;
+    private base;
+    private emit;
+    private takeToken;
+    private breadcrumb;
+    private contextPayload;
+    private applyTags;
+    /** The page path, plus a `#/…` hash route when the app routes by hash. Never the query string. */
+    private currentRoute;
+    private pageUrl;
+    private guard;
+    private debug;
+}
+/** W3C ids: lowercase hex, never all zeros. */
+export declare function randomHex(bytes: number): string;