@protobase/ui 0.12.3 → 0.12.5

package/dist/app/app.js

@@ -11,6 +11,7 @@ import { useRecord } from "../data/use-record.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { ToastProvider } from "../toasts/toast-provider.js";
+import { startErrorReporting } from "./error-reporting.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { AssistantButton, AssistantPanel } from "./assistant-shell.js";
 import { bottomBarFromMeta } from "./bottom-bar-from-meta.js";
@@ -101,6 +102,10 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		page: params.size > 0 ? `${path}?${params}` : path,
 		onClose: () => setAssistantOpen(false)
 	});
+	const errorReporting = meta.errorReporting;
+	useEffect(() => {
+		if (errorReporting) startErrorReporting(errorReporting);
+	}, [errorReporting]);
 	const runtimeUrl = meta.runtime?.url;
 	const runtimeButton = runtimeUrl && /* @__PURE__ */ jsx(RuntimeUpdateButton, {
 		url: runtimeUrl,

package/dist/app/error-reporting.js

@@ -0,0 +1,25 @@
+import { redactSecrets } from "@protobase/schema";
+//#region src/app/error-reporting.ts
+let loading;
+let capture;
+/**
+* Sends the app's uncaught errors to the error tracker `/meta` names, from the first call on; the Sentry SDK loads only
+* then, so an app without a DSN never loads it. Errors only, with no performance tracing and no session tracking,
+* every event without its secrets (see `redactSecrets`).
+*/
+const startErrorReporting = ({ dsn, environment }) => {
+	loading ??= import("@sentry/browser").then((sentry) => {
+		sentry.init({
+			dsn,
+			...environment && { environment },
+			integrations: (defaults) => defaults.filter((integration) => integration.name !== "BrowserSession"),
+			beforeSend: (event) => redactSecrets(event)
+		});
+		capture = (error, componentStack) => sentry.captureException(error, componentStack ? { contexts: { react: { componentStack } } } : void 0);
+	});
+	return loading;
+};
+/** Reports an error a boundary caught while drawing, with the components it was drawn in; nothing before error reporting started. */
+const reportRenderError = (error, componentStack) => capture?.(error, componentStack ?? void 0);
+//#endregion
+export { reportRenderError, startErrorReporting };

package/dist/app/pages/custom-boundary.js

@@ -1,3 +1,4 @@
+import { reportRenderError } from "../error-reporting.js";
 import { Problem } from "./problem.js";
 import { Component } from "react";
 import { jsxs } from "react/jsx-runtime";
@@ -8,6 +9,9 @@ var CustomBoundary = class extends Component {
 	static getDerivedStateFromError() {
 		return { failed: true };
 	}
+	componentDidCatch(error, info) {
+		reportRenderError(error, info.componentStack);
+	}
 	render() {
 		if (!this.state.failed) return this.props.children;
 		return this.props.fallback === void 0 ? /* @__PURE__ */ jsxs(Problem, { children: [this.props.name, " could not be drawn."] }) : this.props.fallback;

package/dist/app/record-page.js

@@ -114,6 +114,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	const permissions = usePermissions(model.name);
 	const restore = useRestore(model);
 	const canUpdate = can(permissions, "update") && stored.permissions?.update !== false;
+	const canDelete = can(permissions, "delete") && stored.permissions?.delete !== false;
 	const remove = useDeleteFlow({
 		model,
 		view,
@@ -210,7 +211,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 			onClick: editor.discard,
 			children: "Discard"
 		}),
-		can(permissions, "delete") && stored.permissions?.delete !== false && /* @__PURE__ */ jsx(Button, {
+		canDelete && /* @__PURE__ */ jsx(Button, {
 			variant: "danger",
 			className: "max-md:min-h-11",
 			onClick: () => void remove.start({
@@ -231,122 +232,125 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		})
 	] });
 	return /* @__PURE__ */ jsxs("div", {
-		className: "min-h-0 flex-1 overflow-y-auto",
+		className: "flex min-h-0 flex-1 flex-col",
 		children: [
 			remove.dialogs,
-			/* @__PURE__ */ jsxs("div", {
-				className: "mx-auto max-w-[1100px] px-4 pb-28 pt-6 md:px-10 md:py-8",
-				children: [
-					/* @__PURE__ */ jsx(RecordHeader, {
-						collection: view?.names?.plural ?? humanize(model.name),
-						title,
-						status: {
-							label: status ? enumLabel(status, hint("status")?.valueLabels) : singular,
-							tone: status ? toneFor(status) : "neutral"
-						},
-						lastEditedBy: { ago: updated === void 0 ? "recently" : formatRelativeTime(updated) },
-						actions: /* @__PURE__ */ jsx("div", {
-							className: "hidden items-center gap-4 md:flex",
-							children: saveControls
-						})
-					}),
-					editor.message && /* @__PURE__ */ jsx("div", {
-						className: "mt-4",
-						children: /* @__PURE__ */ jsx(ErrorBanner, {
-							title: "Not saved",
-							error: new Error(editor.message)
-						})
-					}),
-					editor.linesConflict && /* @__PURE__ */ jsx("div", {
-						className: "mt-4",
-						children: /* @__PURE__ */ jsx(ErrorBanner, {
-							title: "The lines were changed by someone else",
-							error: /* @__PURE__ */ new Error("The lines were reloaded. Your new order is kept: Save again to apply it, or Discard to drop it.")
-						})
-					}),
-					editor.restored && /* @__PURE__ */ jsxs("div", {
-						className: "mt-4 flex items-center justify-between gap-3 rounded-lg border bg-surface px-3 py-2 text-[13px]",
-						role: "status",
-						children: [/* @__PURE__ */ jsx("span", { children: "Your unsaved changes were restored." }), /* @__PURE__ */ jsxs("span", {
-							className: "flex gap-2",
-							children: [/* @__PURE__ */ jsx(Button, {
-								size: "sm",
-								onClick: editor.dismissRestored,
-								children: "Keep"
-							}), /* @__PURE__ */ jsx(Button, {
-								size: "sm",
-								onClick: editor.discard,
-								children: "Discard"
+			/* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1 overflow-y-auto",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "mx-auto max-w-[1100px] px-4 pb-8 pt-6 md:px-10 md:py-8",
+					children: [
+						/* @__PURE__ */ jsx(RecordHeader, {
+							collection: view?.names?.plural ?? humanize(model.name),
+							title,
+							status: {
+								label: status ? enumLabel(status, hint("status")?.valueLabels) : singular,
+								tone: status ? toneFor(status) : "neutral"
+							},
+							lastEditedBy: { ago: updated === void 0 ? "recently" : formatRelativeTime(updated) },
+							actions: /* @__PURE__ */ jsx("div", {
+								className: "hidden items-center gap-4 md:flex",
+								children: saveControls
+							})
+						}),
+						editor.message && /* @__PURE__ */ jsx("div", {
+							className: "mt-4",
+							children: /* @__PURE__ */ jsx(ErrorBanner, {
+								title: "Not saved",
+								error: new Error(editor.message)
+							})
+						}),
+						editor.linesConflict && /* @__PURE__ */ jsx("div", {
+							className: "mt-4",
+							children: /* @__PURE__ */ jsx(ErrorBanner, {
+								title: "The lines were changed by someone else",
+								error: /* @__PURE__ */ new Error("The lines were reloaded. Your new order is kept: Save again to apply it, or Discard to drop it.")
+							})
+						}),
+						editor.restored && /* @__PURE__ */ jsxs("div", {
+							className: "mt-4 flex items-center justify-between gap-3 rounded-lg border bg-surface px-3 py-2 text-[13px]",
+							role: "status",
+							children: [/* @__PURE__ */ jsx("span", { children: "Your unsaved changes were restored." }), /* @__PURE__ */ jsxs("span", {
+								className: "flex gap-2",
+								children: [/* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									onClick: editor.dismissRestored,
+									children: "Keep"
+								}), /* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									onClick: editor.discard,
+									children: "Discard"
+								})]
 							})]
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "grid grid-cols-1 gap-8 md:grid-cols-[minmax(0,1fr)_300px] md:gap-12",
-						children: [/* @__PURE__ */ jsxs("main", {
-							className: "divide-y divide-border",
-							children: [layout.flatMap((item, index) => {
-								if (item.kind === "related") return [/* @__PURE__ */ jsx(RelatedSection, {
-									item,
-									recordKey
-								}, `related:${item.title}`)];
-								if (item.kind === "custom") return item.sidebar ? [] : [/* @__PURE__ */ jsx(CustomSection, {
-									item,
-									scope
-								}, `custom:${index}`)];
-								if (item.kind !== "section") return [];
-								const fields = item.fields.filter((name) => model.fields[name] && visible(name));
-								if (fields.length === 0) return [];
-								return [/* @__PURE__ */ jsx(Section, {
-									title: item.title,
-									help: item.help,
-									children: /* @__PURE__ */ jsx("div", {
-										className: "grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2",
-										children: fields.map(fieldView)
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "grid grid-cols-1 gap-8 md:grid-cols-[minmax(0,1fr)_300px] md:gap-12",
+							children: [/* @__PURE__ */ jsxs("main", {
+								className: "divide-y divide-border",
+								children: [layout.flatMap((item, index) => {
+									if (item.kind === "related") return [/* @__PURE__ */ jsx(RelatedSection, {
+										item,
+										recordKey
+									}, `related:${item.title}`)];
+									if (item.kind === "custom") return item.sidebar ? [] : [/* @__PURE__ */ jsx(CustomSection, {
+										item,
+										scope
+									}, `custom:${index}`)];
+									if (item.kind !== "section") return [];
+									const fields = item.fields.filter((name) => model.fields[name] && visible(name));
+									if (fields.length === 0) return [];
+									return [/* @__PURE__ */ jsx(Section, {
+										title: item.title,
+										help: item.help,
+										children: /* @__PURE__ */ jsx("div", {
+											className: "grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2",
+											children: fields.map(fieldView)
+										})
+									}, item.title)];
+								}), linesModel && /* @__PURE__ */ jsx(RecordLines, {
+									lines: linesModel,
+									draft: linesDraft,
+									vatRate: Number(stored.record.vatRate ?? 21) / 100,
+									saving: editor.saving
+								})]
+							}), /* @__PURE__ */ jsxs("aside", {
+								className: "space-y-4 md:pt-8",
+								children: [
+									/* @__PURE__ */ jsx(RecordActions, {
+										model,
+										stored,
+										recordKey
+									}),
+									firstSidebar === -1 && summary,
+									layout.map((item, index) => item.kind === "custom" && item.sidebar ? /* @__PURE__ */ jsx(CustomSection, {
+										item,
+										scope
+									}, `custom:${index}`) : index === firstSidebar ? /* @__PURE__ */ jsx(Fragment, { children: summary }, "summary") : null),
+									/* @__PURE__ */ jsx(MetadataCard, {
+										title: "Details",
+										rows: [auditField(model, "created"), updatedAt].flatMap((name) => {
+											const field = name ? model.fields[name] : void 0;
+											return name && field && visible(name) ? [{
+												label: hint(name)?.label ?? humanize(name),
+												value: displayValue(field, stored.record[name], hint(name))
+											}] : [];
+										})
+									}),
+									related.records.length > 0 && /* @__PURE__ */ jsx(SidebarCard, {
+										title: "Related records",
+										children: /* @__PURE__ */ jsx(RelatedRecords, {
+											records: related.records,
+											onNavigate: open
+										})
 									})
-								}, item.title)];
-							}), linesModel && /* @__PURE__ */ jsx(RecordLines, {
-								lines: linesModel,
-								draft: linesDraft,
-								vatRate: Number(stored.record.vatRate ?? 21) / 100,
-								saving: editor.saving
+								]
 							})]
-						}), /* @__PURE__ */ jsxs("aside", {
-							className: "space-y-4 md:pt-8",
-							children: [
-								/* @__PURE__ */ jsx(RecordActions, {
-									model,
-									stored,
-									recordKey
-								}),
-								firstSidebar === -1 && summary,
-								layout.map((item, index) => item.kind === "custom" && item.sidebar ? /* @__PURE__ */ jsx(CustomSection, {
-									item,
-									scope
-								}, `custom:${index}`) : index === firstSidebar ? /* @__PURE__ */ jsx(Fragment, { children: summary }, "summary") : null),
-								/* @__PURE__ */ jsx(MetadataCard, {
-									title: "Details",
-									rows: [auditField(model, "created"), updatedAt].flatMap((name) => {
-										const field = name ? model.fields[name] : void 0;
-										return name && field && visible(name) ? [{
-											label: hint(name)?.label ?? humanize(name),
-											value: displayValue(field, stored.record[name], hint(name))
-										}] : [];
-									})
-								}),
-								related.records.length > 0 && /* @__PURE__ */ jsx(SidebarCard, {
-									title: "Related records",
-									children: /* @__PURE__ */ jsx(RelatedRecords, {
-										records: related.records,
-										onNavigate: open
-									})
-								})
-							]
-						})]
-					})
-				]
+						})
+					]
+				})
 			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "fixed inset-x-0 bottom-0 z-30 flex items-center gap-2 border-t bg-background p-3 md:hidden",
+			(editor.dirty || canDelete || canUpdate) && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-2 border-t bg-background p-3 md:hidden",
 				children: saveControls
 			})
 		]

package/dist/assistant-dock/widget-view.js

@@ -1,4 +1,5 @@
 import { ActionCard } from "../action-card/action-card.js";
+import { reportRenderError } from "../app/error-reporting.js";
 import { useProjectUi } from "../app/pages/project-ui.js";
 import { Component } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -20,6 +21,9 @@ var WidgetBoundary = class extends Component {
 	static getDerivedStateFromError() {
 		return { failed: true };
 	}
+	componentDidCatch(error, info) {
+		reportRenderError(error, info.componentStack);
+	}
 	render() {
 		return this.state.failed ? /* @__PURE__ */ jsx(Fallback, {
 			part: this.props.part,

package/dist/data/meta-data.d.ts

@@ -20,6 +20,11 @@ export type MetaData = {
   runtime?: {
     url: string;
   };
+  /** The error tracker the app sends its errors to, when the app reports them (see `startErrorReporting`). */
+  errorReporting?: {
+    dsn: string;
+    environment?: string;
+  };
   /** The plugins the app loads for the user (see `PluginGate`). */
   plugins?: PluginRef[];
   /** The other APIs the app draws resources from for the user, and how far their `/meta` has loaded (see `withSources`). */

package/dist/data/use-meta.js

@@ -34,6 +34,7 @@ const useMeta = () => {
 				...result.meta.bottomBar && { bottomBar: result.meta.bottomBar },
 				...result.meta.assistant && { assistant: result.meta.assistant },
 				...result.meta.runtime && { runtime: result.meta.runtime },
+				...result.meta.errorReporting && { errorReporting: result.meta.errorReporting },
 				...result.meta.plugins && { plugins: result.meta.plugins },
 				...result.meta.sources && { sources: result.meta.sources.map((source) => ({
 					source,

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.12.3";
+var version = "0.12.5";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };