@krak-stack/registry 0.1.30 → 0.1.32

package/README.md

@@ -20,6 +20,8 @@ import {
 } from "@krak-stack/registry/httpapi-toolkit";
 import { ApiClient } from "@krak-stack/registry/httpapi/client";
 import { HttpApiSpec } from "@krak-stack/registry/httpapi/helpers";
+import { HttpApiOtlp } from "@krak-stack/registry/opentelemetry/api";
+import { BrowserOtlp } from "@krak-stack/registry/opentelemetry/browser";
 import { createDocsSource, makeDocs } from "@krak-stack/registry/docs";
 import { loadMdxDocsDirectory } from "@krak-stack/registry/docs/server";
 import {
@@ -42,6 +44,25 @@ import {
 import { NotificationService } from "@krak-stack/registry/service-notification";
 ```
 
+Inject API telemetry and browser proxy routes into the application HTTP layer:
+
+```ts
+const appLayer = appRoutes.pipe(Layer.provideMerge(HttpApiOtlp.layer));
+```
+
+Install browser telemetry globally on the Atom runtime used by the API client:
+
+```ts
+import { Atom } from "effect/unstable/reactivity";
+import { BrowserOtlp } from "@krak-stack/registry/opentelemetry/browser";
+
+const apiRuntime = Atom.context();
+
+if (!import.meta.env.SSR) {
+  apiRuntime.addGlobalLayer(BrowserOtlp.layer({ serviceName: "my-app-web" }));
+}
+```
+
 `@krak-stack/registry/service-notification` is the source-compatible direct
 dispatcher. Use the separate `@krak-stack/notifications` package for a durable
 inbox, package-owned migrations, persisted delivery jobs, retries, workers, and

package/dist/components/ui/data-table.d.ts

@@ -205,6 +205,10 @@ export type DataTablePaginationFeature = false | {
     pageSizes?: readonly number[];
 };
 export interface DataTableFeatures<TData> {
+    toolbar?: false | {
+        /** Additional `MenubarMenu` controls rendered at the start of the toolbar. */
+        items: ReactNode;
+    };
     search?: boolean;
     sorting?: boolean;
     pagination?: DataTablePaginationFeature;

package/dist/components/ui/data-table.js

@@ -2068,8 +2068,9 @@ var DataTableToolbar = ({
   const model = deriveModel(store);
   const selectedRows = getSelectedRows(store, model);
   const grouping = features.grouping;
+  const toolbar = features.toolbar;
   const bulkActions = features.selection && features.selection.bulkActions;
-  const hasToolbar = features.search !== false || features.sorting !== false || features.columnVisibility !== false || !!features.export || !!features.gallery || !!grouping || !!features.refresh || !!bulkActions && selectedRows.length > 0;
+  const hasToolbar = !!toolbar || features.search !== false || features.sorting !== false || features.columnVisibility !== false || !!features.export || !!features.gallery || !!grouping || !!features.refresh || !!bulkActions && selectedRows.length > 0;
   if (!hasToolbar)
     return null;
   const update = (next) => changeState(setStore, next);
@@ -2113,6 +2114,7 @@ var DataTableToolbar = ({
         children: /* @__PURE__ */ jsxs8(Menubar, {
           className: "h-auto w-max min-w-full justify-start bg-transparent shadow-none [&_[data-slot=menubar-trigger]]:gap-2 [&_[data-slot=menubar-trigger]_svg]:size-4",
           children: [
+            toolbar && toolbar.items,
             visibleBulkActions.length ? /* @__PURE__ */ jsxs8(MenubarMenu, {
               children: [
                 /* @__PURE__ */ jsxs8(MenubarTrigger, {

package/dist/services/opentelemetry/api.d.ts

@@ -0,0 +1,5 @@
+import { Config, Layer } from "effect";
+import { HttpRouter } from "effect/unstable/http";
+export declare class HttpApiOtlp {
+    static readonly layer: Layer.Layer<import("effect/FileSystem").FileSystem | import("effect/unstable/http/Etag").Generator | import("effect/unstable/http/HttpPlatform").HttpPlatform | import("effect/Path").Path, Config.ConfigError, HttpRouter.HttpRouter>;
+}

package/dist/services/opentelemetry/api.js

@@ -0,0 +1,44 @@
+// ../../src/services/opentelemetry/api.ts
+import { Config, Effect, Layer } from "effect";
+import {
+  FetchHttpClient,
+  HttpClient,
+  HttpClientRequest,
+  HttpMiddleware,
+  HttpRouter,
+  HttpServer,
+  HttpServerRequest,
+  HttpServerResponse
+} from "effect/unstable/http";
+import { Otlp, OtlpSerialization } from "effect/unstable/observability";
+var OpenTelemetryLive = Otlp.layerFromConfig().pipe(Layer.provide(OtlpSerialization.layerJson), Layer.provide(FetchHttpClient.layer));
+var otlpProxyPaths = [
+  "/api/otel/v1/traces",
+  "/api/otel/v1/metrics",
+  "/api/otel/v1/logs"
+];
+var proxyOtlp = (baseUrl, signal) => Effect.gen(function* () {
+  const incoming = yield* HttpServerRequest.HttpServerRequest;
+  const client = yield* HttpClient.HttpClient;
+  const contentType = incoming.headers["content-type"] ?? "application/json";
+  const body = new Uint8Array(yield* incoming.arrayBuffer);
+  const request = HttpClientRequest.get(baseUrl).pipe(HttpClientRequest.appendUrl(`/v1/${signal}`), HttpClientRequest.setMethod("POST"), HttpClientRequest.bodyUint8Array(body, contentType));
+  const upstream = yield* client.execute(request);
+  const responseBody = new Uint8Array(yield* upstream.arrayBuffer);
+  return HttpServerResponse.uint8Array(responseBody, {
+    status: upstream.status,
+    contentType: upstream.headers["content-type"],
+    headers: {
+      "retry-after": upstream.headers["retry-after"]
+    }
+  });
+}).pipe(Effect.withTracerEnabled(false), HttpMiddleware.withLoggerDisabled, Effect.catch((error) => Effect.logError("Failed to proxy browser telemetry", error).pipe(Effect.as(HttpServerResponse.empty({ status: 502 })))), Effect.provide(FetchHttpClient.layer));
+var otlpProxyLayer = Layer.unwrap(Effect.map(Config.url("OTEL_COLLECTOR_PROXY_URL").pipe(Config.withDefault(new URL("http://localhost:4318"))), (baseUrl) => Layer.mergeAll(HttpRouter.add("POST", otlpProxyPaths[0], proxyOtlp(baseUrl, "traces")), HttpRouter.add("POST", otlpProxyPaths[1], proxyOtlp(baseUrl, "metrics")), HttpRouter.add("POST", otlpProxyPaths[2], proxyOtlp(baseUrl, "logs")))));
+var serverServices = HttpServer.layerServices.pipe(Layer.provideMerge(HttpMiddleware.layerTracerDisabledForUrls(otlpProxyPaths)));
+
+class HttpApiOtlp {
+  static layer = Layer.mergeAll(OpenTelemetryLive, otlpProxyLayer, serverServices);
+}
+export {
+  HttpApiOtlp
+};

package/dist/services/opentelemetry/browser.d.ts

@@ -0,0 +1,10 @@
+import { Layer } from "effect";
+import { Otlp } from "effect/unstable/observability";
+export declare class BrowserOtlp {
+    static readonly layer: ({ attributes, baseUrl, serviceName, serviceVersion, ...options }: Omit<Parameters<typeof Otlp.layerJson>[0], "baseUrl" | "resource"> & {
+        readonly serviceName: string;
+        readonly serviceVersion?: string;
+        readonly attributes?: NonNullable<Parameters<typeof Otlp.layerJson>[0]["resource"]>["attributes"];
+        readonly baseUrl?: string;
+    }) => Layer.Layer<never, never, never>;
+}

package/dist/services/opentelemetry/browser.js

@@ -0,0 +1,59 @@
+// ../../src/services/opentelemetry/browser.ts
+import { Effect, Layer, Predicate, Schema, Stream } from "effect";
+import { FetchHttpClient } from "effect/unstable/http";
+import { Otlp } from "effect/unstable/observability";
+
+class BrowserReportedError extends Schema.TaggedError()("BrowserReportedError", {
+  type: Schema.Literals(["window.error", "unhandledrejection"]),
+  message: Schema.String,
+  stack: Schema.optional(Schema.String)
+}) {
+}
+var reportBrowserException = (exception) => Effect.fail(exception).pipe(Effect.withSpan("browser.exception", {
+  attributes: {
+    "exception.type": exception.type,
+    "exception.message": exception.message,
+    "exception.stacktrace": exception.stack ?? ""
+  }
+}), Effect.ignoreCause);
+var BrowserExceptionTrackingLive = Layer.effectDiscard(Stream.merge(Stream.fromEventListener(globalThis, "error", {
+  bufferSize: 100
+}).pipe(Stream.map((event) => {
+  const error = event.error;
+  return new BrowserReportedError({
+    type: "window.error",
+    message: event.message,
+    stack: Predicate.isError(error) ? error.stack : undefined
+  });
+})), Stream.fromEventListener(globalThis, "unhandledrejection", { bufferSize: 100 }).pipe(Stream.map((event) => {
+  const reason = event.reason;
+  return new BrowserReportedError(Predicate.isError(reason) ? {
+    type: "unhandledrejection",
+    message: reason.message,
+    stack: reason.stack
+  } : {
+    type: "unhandledrejection",
+    message: "Unhandled promise rejection"
+  });
+}))).pipe(Stream.runForEach(reportBrowserException), Effect.forkScoped));
+
+class BrowserOtlp {
+  static layer = ({
+    attributes,
+    baseUrl = "/api/otel",
+    serviceName,
+    serviceVersion,
+    ...options
+  }) => BrowserExceptionTrackingLive.pipe(Layer.provideMerge(Otlp.layerJson({
+    tracerExportInterval: "5 seconds",
+    metricsExportInterval: "30 seconds",
+    loggerExcludeLogSpans: true,
+    loggerMergeWithExisting: true,
+    ...options,
+    baseUrl,
+    resource: { attributes, serviceName, serviceVersion }
+  }).pipe(Layer.provide(FetchHttpClient.layer))));
+}
+export {
+  BrowserOtlp
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krak-stack/registry",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "description": "Tree-shakable KrakStack components and Effect services.",
   "license": "MIT",
   "repository": {
@@ -48,6 +48,14 @@
       "types": "./dist/lib/httpapi-mcp.d.ts",
       "import": "./dist/lib/httpapi-mcp.js"
     },
+    "./opentelemetry/api": {
+      "types": "./dist/services/opentelemetry/api.d.ts",
+      "import": "./dist/services/opentelemetry/api.js"
+    },
+    "./opentelemetry/browser": {
+      "types": "./dist/services/opentelemetry/browser.d.ts",
+      "import": "./dist/services/opentelemetry/browser.js"
+    },
     "./docs": {
       "types": "./dist/lib/docs.d.ts",
       "import": "./dist/lib/docs.js"