Report handled frontend errors

Rhys Sullivan committed 6 months ago

Commit 2fdd0001 parent 2084be07 files · +235 −52Browse files

Unified · Split

7 files

apps/cloud/src/routes/__root.tsx +24 −6
packages/plugins/graphql/src/react/AddGraphqlSource.tsx +8 −12
packages/plugins/mcp/src/react/AddMcpSource.tsx +28 −16
packages/react/src/api/error-reporting.test.ts +48 −0
packages/react/src/api/error-reporting.tsx +89 −0
packages/react/src/api/provider.tsx +10 −4
packages/react/src/plugins/oauth-sign-in.tsx +28 −14

 import { AutumnProvider } from "autumn-js/react";
 import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
+import type { FrontendErrorReporter } from "@executor-js/react/api/error-reporting";
 import { ExecutorProvider } from "@executor-js/react/api/provider";
 import { Skeleton } from "@executor-js/react/components/skeleton";
 import { Toaster } from "@executor-js/react/components/sonner";
   });
 }
+const captureFrontendError: FrontendErrorReporter = (error, context) => {
+  Sentry.captureException(error, (scope) => {
+    scope.setTag("executor.ui.surface", context.surface);
+    scope.setTag("executor.ui.action", context.action);
+    scope.setTag("executor.ui.severity", context.severity ?? "error");
+    scope.setContext("executor.ui", {
+      surface: context.surface,
+      action: context.action,
+      message: context.message,
+      metadata: context.metadata,
+    });
+    return scope;
+  });
+};
 export const Route = createRootRoute({
   head: () => ({
     meta: [
   return (
     <AutumnProvider pathPrefix="/api/autumn">
-      <ExecutorProvider fallback={<ShellSkeleton />}>
+      <Sentry.ErrorBoundary fallback={<ShellSkeleton />} showDialog={false}>
-        <ExecutorPluginsProvider plugins={clientPlugins}>
+        <ExecutorProvider fallback={<ShellSkeleton />} onHandledError={captureFrontendError}>
-          <Shell />
+          <ExecutorPluginsProvider plugins={clientPlugins}>
-          <Toaster />
+            <Shell />
-        </ExecutorPluginsProvider>
+            <Toaster />
-      </ExecutorProvider>
+          </ExecutorPluginsProvider>
+        </ExecutorProvider>
+      </Sentry.ErrorBoundary>
     </AutumnProvider>
   );
 }

packages/plugins/graphql/src/react/AddGraphqlSource.tsx+8−12

 import { useCallback, useState } from "react";
 import { useAtomSet } from "@effect/atom-react";
 import * as Exit from "effect/Exit";
-import * as Option from "effect/Option";
-import * as Schema from "effect/Schema";
+import { useErrorMessageFromExit } from "@executor-js/react/api/error-reporting";
 import { useScope } from "@executor-js/react/api/scope-context";
 import { sourceWriteKeys } from "@executor-js/react/api/reactivity-keys";
 import {
 import { initialGraphqlCredentials } from "./defaults";
 import type { GraphqlCredentialInput } from "../sdk/types";
-const ErrorMessage = Schema.Struct({ message: Schema.String });
-const decodeErrorMessage = Schema.decodeUnknownOption(ErrorMessage);
-const errorMessageFromExit = (exit: Exit.Exit<unknown, unknown>, fallback: string): string =>
-  Option.match(Option.flatMap(Exit.findErrorOption(exit), decodeErrorMessage), {
-    onNone: () => fallback,
-    onSome: ({ message }) => message,
-  });
 type AuthMode = "none" | "oauth2";
 export default function AddGraphqlSource(props: {
   const [addError, setAddError] = useState<string | null>(null);
   const [authMode, setAuthMode] = useState<AuthMode>("none");
   const [tokens, setTokens] = useState<OAuthCompletionPayload | null>(null);
+  const errorMessageFromExit = useErrorMessageFromExit();
   const scopeId = useScope();
   const { credentialTargetScope: requestCredentialTargetScope } = useCredentialTargetScope();
       reactivityKeys: sourceWriteKeys,
     });
     if (Exit.isFailure(exit)) {
-      setAddError(errorMessageFromExit(exit, "Failed to add source"));
+      setAddError(
+        errorMessageFromExit(exit, "Failed to add source", {
+          surface: "graphql_source",
+          action: "add_source",
+        }),
+      );
       setAdding(false);
       return;
     }

packages/plugins/mcp/src/react/AddMcpSource.tsx+28−16

 import { useReducer, useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import { useAtomSet } from "@effect/atom-react";
 import * as Exit from "effect/Exit";
-import * as Option from "effect/Option";
-import * as Schema from "effect/Schema";
+import { useErrorMessageFromExit } from "@executor-js/react/api/error-reporting";
 import { useScope } from "@executor-js/react/api/scope-context";
 import { Button } from "@executor-js/react/components/button";
 import {
 import { mcpPresets, type McpPreset } from "../sdk/presets";
 import { MCP_OAUTH_CONNECTION_SLOT, type McpCredentialInput } from "../sdk/types";
-const ErrorMessage = Schema.Struct({ message: Schema.String });
-const decodeErrorMessage = Schema.decodeUnknownOption(ErrorMessage);
-const errorMessageFromExit = (exit: Exit.Exit<unknown, unknown>, fallback: string): string =>
-  Option.match(Option.flatMap(Exit.findErrorOption(exit), decodeErrorMessage), {
-    onNone: () => fallback,
-    onSome: ({ message }) => message,
-  });
 // ---------------------------------------------------------------------------
 // Preset lookup
 // ---------------------------------------------------------------------------
   const doAdd = useAtomSet(addMcpSourceOptimistic(scopeId), {
     mode: "promiseExit",
   });
+  const errorMessageFromExit = useErrorMessageFromExit();
   const secretList = useSecretPickerSecrets();
   const oauth = useOAuthPopupFlow<OAuthCompletionPayload>({
     popupName: "mcp-oauth",
     if (Exit.isFailure(exit)) {
       dispatch({
         type: "probe-fail",
-        error: errorMessageFromExit(exit, "Failed to connect"),
+        error: errorMessageFromExit(exit, "Failed to connect", {
+          surface: "mcp_source",
+          action: "probe_remote_source",
+        }),
       });
       return;
     }
     setRemoteAuthMode(exit.value.requiresOAuth ? "oauth2" : "none");
     dispatch({ type: "probe-ok", probe: exit.value });
-  }, [state.url, scopeId, doProbe, remoteCredentials]);
+  }, [state.url, scopeId, doProbe, remoteCredentials, errorMessageFromExit]);
   // Keep the latest handleProbe in a ref so the debounced effect can call it
   // without depending on its identity (which changes every render).
     if (Exit.isFailure(exit)) {
       dispatch({
         type: "add-fail",
-        error: errorMessageFromExit(exit, "Failed to add source"),
+        error: errorMessageFromExit(exit, "Failed to add source", {
+          surface: "mcp_source",
+          action: "add_remote_source",
+        }),
       });
       return;
     }
     doAdd,
     props,
     scopeId,
+    errorMessageFromExit,
     requestCredentialTargetScope,
     oauthCredentialTargetScope,
   ]);
       reactivityKeys: sourceWriteKeys,
     });
     if (Exit.isFailure(exit)) {
-      setStdioError(errorMessageFromExit(exit, "Failed to add source"));
+      setStdioError(
+        errorMessageFromExit(exit, "Failed to add source", {
+          surface: "mcp_source",
+          action: "add_stdio_source",
+        }),
+      );
       setStdioAdding(false);
       return;
     }
     props.onComplete();
-  }, [stdioCommand, stdioArgs, stdioEnv, stdioIdentity, doAdd, scopeId, props]);
+  }, [
+    stdioCommand,
+    stdioArgs,
+    stdioEnv,
+    stdioIdentity,
+    doAdd,
+    scopeId,
+    props,
+    errorMessageFromExit,
+  ]);
   // ---- Render ----

packages/react/src/api/error-reporting.test.ts+48−0

@@ -0,0 +1,48 @@
	1	import { describe, expect, it } from "@effect/vitest";
	2	import * as Cause from "effect/Cause";
	3	import * as Exit from "effect/Exit";
	4	import {
	5	messageFromExit,
	6	messageFromUnknown,
	7	reportExitFailure,
	8	type FrontendErrorContext,
	9	} from "./error-reporting";
	10
	11	describe("frontend error reporting", () => {
	12	it("extracts stable messages from structured failures", () => {
	13	expect(messageFromUnknown({ message: "Saved connection failed" }, "Fallback")).toBe(
	14	"Saved connection failed",
	15	);
	16	expect(messageFromUnknown("Plain failure", "Fallback")).toBe("Plain failure");
	17	expect(messageFromUnknown({ reason: "unknown" }, "Fallback")).toBe("Fallback");
	18	});
	19
	20	it("extracts stable messages from Effect exits", () => {
	21	const exit = Exit.fail({ message: "Could not update source" });
	22
	23	expect(messageFromExit(exit, "Fallback")).toBe("Could not update source");
	24	expect(messageFromExit(Exit.fail({ reason: "unknown" }), "Fallback")).toBe("Fallback");
	25	});
	26
	27	it("reports failed exits with the provided context", () => {
	28	const exit = Exit.fail({ message: "Could not update source" });
	29	const calls: Array<{ error: unknown; context: FrontendErrorContext }> = [];
	30
	31	reportExitFailure(
	32	(error, context) => {
	33	calls.push({ error, context });
	34	},
	35	exit,
	36	{
	37	surface: "sources",
	38	action: "update",
	39	message: "Could not update source",
	40	},
	41	);
	42
	43	expect(calls).toHaveLength(1);
	44	expect(Cause.isCause(calls[0]!.error)).toBe(true);
	45	expect(calls[0]!.context.surface).toBe("sources");
	46	expect(calls[0]!.context.action).toBe("update");
	47	});
	48	});

packages/react/src/api/error-reporting.tsx+89−0

@@ -0,0 +1,89 @@
	1	import * as React from "react";
	2	import * as Cause from "effect/Cause";
	3	import * as Data from "effect/Data";
	4	import * as Exit from "effect/Exit";
	5	import * as Option from "effect/Option";
	6	import * as Schema from "effect/Schema";
	7
	8	export type FrontendErrorContext = {
	9	readonly surface: string;
	10	readonly action: string;
	11	readonly message?: string;
	12	readonly severity?: "error" \| "warning";
	13	readonly metadata?: Record<string, string \| number \| boolean \| null \| undefined>;
	14	};
	15
	16	export type FrontendErrorReporter = (error: unknown, context: FrontendErrorContext) => void;
	17
	18	class FrontendHandledError extends Data.TaggedError("FrontendHandledError")<{
	19	readonly cause: unknown;
	20	readonly context: FrontendErrorContext;
	21	}> {}
	22
	23	const ErrorMessage = Schema.Struct({ message: Schema.String });
	24	const decodeErrorMessage = Schema.decodeUnknownOption(ErrorMessage);
	25
	26	const defaultFrontendErrorReporter: FrontendErrorReporter = (error, context) => {
	27	if (typeof globalThis.reportError !== "function") return;
	28	globalThis.reportError(new FrontendHandledError({ cause: error, context }));
	29	};
	30
	31	const FrontendErrorReporterContext = React.createContext<FrontendErrorReporter>(
	32	defaultFrontendErrorReporter,
	33	);
	34
	35	export const FrontendErrorReporterProvider = (
	36	props: React.PropsWithChildren<{ reporter?: FrontendErrorReporter }>,
	37	) => (
	38	<FrontendErrorReporterContext.Provider value={props.reporter ?? defaultFrontendErrorReporter}>
	39	{props.children}
	40	</FrontendErrorReporterContext.Provider>
	41	);
	42
	43	export const useReportHandledError = (): FrontendErrorReporter =>
	44	React.useContext(FrontendErrorReporterContext);
	45
	46	export const messageFromUnknown = (error: unknown, fallback: string): string =>
	47	Option.match(decodeErrorMessage(error), {
	48	onNone: () => (typeof error === "string" && error.length > 0 ? error : fallback),
	49	onSome: ({ message }) => message,
	50	});
	51
	52	export const messageFromExit = (exit: Exit.Exit<unknown, unknown>, fallback: string): string =>
	53	Option.match(Option.flatMap(Exit.findErrorOption(exit), decodeErrorMessage), {
	54	onNone: () => fallback,
	55	onSome: ({ message }) => message,
	56	});
	57
	58	export const reportExitFailure = (
	59	report: FrontendErrorReporter,
	60	exit: Exit.Exit<unknown, unknown>,
	61	context: FrontendErrorContext,
	62	): void => {
	63	if (!Exit.isFailure(exit)) return;
	64	report(exit.cause, context);
	65	};
	66
	67	export const useErrorMessageFromExit = (): ((
	68	exit: Exit.Exit<unknown, unknown>,
	69	fallback: string,
	70	context: Omit<FrontendErrorContext, "message"> & { readonly message?: string },
	71	) => string) => {
	72	const report = useReportHandledError();
	73	return React.useCallback(
	74	(exit, fallback, context) => {
	75	const message = messageFromExit(exit, fallback);
	76	reportExitFailure(report, exit, { ...context, message: context.message ?? message });
	77	return message;
	78	},
	79	[report],
	80	);
	81	};
	82
	83	export const reportCauseFailure = (
	84	report: FrontendErrorReporter,
	85	cause: Cause.Cause<unknown>,
	86	context: FrontendErrorContext,
	87	): void => {
	88	report(cause, context);
	89	};

packages/react/src/api/provider.tsx+10−4

 import { RegistryProvider } from "@effect/atom-react";
 import * as React from "react";
+import { FrontendErrorReporterProvider, type FrontendErrorReporter } from "./error-reporting";
 import { ScopeProvider } from "./scope-context";
 export const ExecutorProvider = (
-  props: React.PropsWithChildren<{ fallback?: React.ReactNode }>,
+  props: React.PropsWithChildren<{
+    fallback?: React.ReactNode;
+    onHandledError?: FrontendErrorReporter;
+  }>,
 ) => (
-  <RegistryProvider>
+  <FrontendErrorReporterProvider reporter={props.onHandledError}>
-    <ScopeProvider fallback={props.fallback}>{props.children}</ScopeProvider>
+    <RegistryProvider>
-  </RegistryProvider>
+      <ScopeProvider fallback={props.fallback}>{props.children}</ScopeProvider>
+    </RegistryProvider>
+  </FrontendErrorReporterProvider>
 );

packages/react/src/plugins/oauth-sign-in.tsx+28−14

 import { useCallback, useEffect, useRef, useState } from "react";
 import { useAtomSet } from "@effect/atom-react";
+import * as Data from "effect/Data";
 import * as Effect from "effect/Effect";
 import * as Exit from "effect/Exit";
-import * as Option from "effect/Option";
-import * as Schema from "effect/Schema";
 import { cancelOAuth, startOAuth } from "../api/atoms";
+import { messageFromUnknown, useReportHandledError } from "../api/error-reporting";
 import { openOAuthPopup, reserveOAuthPopup, type OAuthPopupResult } from "../api/oauth-popup";
 import { Button } from "../components/button";
 import {
   readonly authorizationUrl: string | null;
 };
+class OAuthAuthorizationStartError extends Data.TaggedError("OAuthAuthorizationStartError")<{
+  readonly cause: unknown;
+}> {}
 export type StartOAuthAuthorizationInput<TPayload extends OAuthCompletionPayload> = {
   readonly tokenScope: string;
   readonly run: () => Promise<OAuthAuthorizationStartResult>;
   readonly onSuccess: (payload: TPayload) => void | Promise<void>;
   readonly onError?: (error: string) => void;
   readonly onAuthorizationStarted?: (result: OAuthAuthorizationStartResult) => void;
+  readonly reportMetadata?: Record<string, string | number | boolean | null | undefined>;
 };
 export function oauthCallbackUrl(path = "/api/oauth/callback"): string {
   scopeId: ScopeId.make(String(tokenScope)),
 });
-const ErrorMessage = Schema.Struct({ message: Schema.String });
-const decodeErrorMessage = Schema.decodeUnknownOption(ErrorMessage);
-const oauthPersistenceErrorMessage = (cause: unknown): string =>
-  Option.match(decodeErrorMessage(cause), {
-    onNone: () =>
-      typeof cause === "string" && cause.length > 0 ? cause : "Failed to save connection",
-    onSome: ({ message }) => message,
-  });
 export function useOAuthPopupFlow<
   TPayload extends OAuthCompletionPayload = OAuthCompletionPayload,
 >(options: {
   } = options;
   const doStartOAuth = useAtomSet(startOAuth, { mode: "promiseExit" });
   const doCancelOAuth = useAtomSet(cancelOAuth, { mode: "promiseExit" });
+  const reportHandledError = useReportHandledError();
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const cleanupRef = useRef<(() => void) | null>(null);
       const startExit = await Effect.runPromiseExit(
         Effect.tryPromise({
           try: input.run,
-          catch: (cause) => cause,
+          catch: (cause) => new OAuthAuthorizationStartError({ cause }),
         }),
       );
       if (Exit.isFailure(startExit)) {
         const message = startErrorMessage ?? "Failed to start sign-in";
+        reportHandledError(startExit.cause, {
+          surface: "oauth",
+          action: "start",
+          message,
+          metadata: input.reportMetadata,
+        });
         reservedPopup.popup.close();
         setBusy(false);
         setError(message);
             (cause: unknown) => cause,
           );
           if (persistenceError !== null) {
-            const message = oauthPersistenceErrorMessage(persistenceError);
+            const message = messageFromUnknown(persistenceError, "Failed to save connection");
+            reportHandledError(persistenceError, {
+              surface: "oauth",
+              action: "persist_connection",
+              message,
+              metadata: input.reportMetadata,
+            });
             setBusy(false);
             setError(message);
             input.onError?.(message);
       popupBlockedMessage,
       popupClosedMessage,
       popupName,
+      reportHandledError,
       startErrorMessage,
     ],
   );
         onSuccess: input.onSuccess,
         onError: input.onError,
         onAuthorizationStarted: input.onAuthorizationStarted,
+        reportMetadata: {
+          pluginId: input.payload.pluginId,
+          connectionId: input.payload.connectionId,
+          tokenScope: input.payload.tokenScope,
+        },
         run: () =>
           doStartOAuth({
             params: oauthRouteParamsForTokenScope(input.payload.tokenScope),