web: Normalize client-side error handling (#13595)

web: Clean up error handling. Prep for permission checks. - Add clearer reporting for API and network errors. - Tidy error checking. - Partial type safety for events.
2025-04-07 19:50:41 +02:00
parent e93b2a1a75
commit 363d655378
53 changed files with 901 additions and 493 deletions
--- a/web/src/admin/DebugPage.ts
+++ b/web/src/admin/DebugPage.ts
@ -1,4 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { parseAPIResponseError, pluckErrorDetail } from "@goauthentik/common/errors/network";
 import { MessageLevel } from "@goauthentik/common/messages";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/PageHeader";
@ -54,10 +55,12 @@ export class DebugPage extends AKElement {
                                                message: "Success",
                                            });
                                        })
-                                        .catch((exc) => {
+                                        .catch(async (error) => {
+                                            const parsedError = await parseAPIResponseError(error);
+
                                            showMessage({
                                                level: MessageLevel.error,
-                                                message: exc,
+                                                message: pluckErrorDetail(parsedError),
                                            });
                                        });
                                }}
--- a/web/src/admin/admin-overview/cards/AdminStatusCard.ts
+++ b/web/src/admin/admin-overview/cards/AdminStatusCard.ts
@ -1,13 +1,16 @@
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { PFSize } from "@goauthentik/common/enums.js";
+import {
+    APIError,
+    parseAPIResponseError,
+    pluckErrorDetail,
+} from "@goauthentik/common/errors/network";
 import { AggregateCard } from "@goauthentik/elements/cards/AggregateCard";

 import { msg } from "@lit/localize";
 import { PropertyValues, TemplateResult, html, nothing } from "lit";
 import { state } from "lit/decorators.js";

-import { ResponseError } from "@goauthentik/api";
-
 export interface AdminStatus {
    icon: string;
    message?: TemplateResult;
@ -29,7 +32,7 @@ export abstract class AdminStatusCard<T> extends AggregateCard {

    // Current error state if any request fails
    @state()
-    protected error?: string;
+    protected error?: APIError;

    // Abstract methods to be implemented by subclasses
    abstract getPrimaryValue(): Promise<T>;
@ -59,9 +62,9 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
                this.value = value; // Triggers shouldUpdate
                this.error = undefined;
            })
-            .catch((err: ResponseError) => {
+            .catch(async (error: unknown) => {
                this.status = undefined;
-                this.error = err?.response?.statusText ?? msg("Unknown error");
+                this.error = await parseAPIResponseError(error);
            });
    }

@ -79,9 +82,9 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
                    this.status = status;
                    this.error = undefined;
                })
-                .catch((err: ResponseError) => {
+                .catch(async (error: unknown) => {
                    this.status = undefined;
-                    this.error = err?.response?.statusText ?? msg("Unknown error");
+                    this.error = await parseAPIResponseError(error);
                });

            // Prevent immediate re-render if only value changed
@ -120,8 +123,8 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
     */
    private renderError(error: string): TemplateResult {
        return html`
-            <p><i class="fa fa-times"></i>&nbsp;${error}</p>
-            <p class="subtext">${msg("Failed to fetch")}</p>
+            <p><i class="fa fa-times"></i>&nbsp;${msg("Failed to fetch")}</p>
+            <p class="subtext">${error}</p>
        `;
    }

@ -146,7 +149,7 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
                    this.status
                        ? this.renderStatus(this.status) // Status available
                        : this.error
-                          ? this.renderError(this.error) // Error state
+                          ? this.renderError(pluckErrorDetail(this.error)) // Error state
                          : this.renderLoading() // Loading state
                }
            </p>
--- a/web/src/admin/admin-overview/cards/RecentEventsCard.ts
+++ b/web/src/admin/admin-overview/cards/RecentEventsCard.ts
@ -10,6 +10,7 @@ import "@goauthentik/elements/buttons/ModalButton";
 import "@goauthentik/elements/buttons/SpinnerButton";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { Table, TableColumn } from "@goauthentik/elements/table/Table";
+import { SlottedTemplateResult } from "@goauthentik/elements/types";

 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html } from "lit";
@ -68,7 +69,7 @@ export class RecentEventsCard extends Table<Event> {
        </div>`;
    }

-    row(item: EventWithContext): TemplateResult[] {
+    row(item: EventWithContext): SlottedTemplateResult[] {
        return [
            html`<div><a href="${`#/events/log/${item.pk}`}">${actionToLabel(item.action)}</a></div>
                <small>${item.app}</small>`,
@ -81,7 +82,11 @@ export class RecentEventsCard extends Table<Event> {
        ];
    }

-    renderEmpty(): TemplateResult {
+    renderEmpty(inner?: SlottedTemplateResult): TemplateResult {
+        if (this.error) {
+            return super.renderEmpty(inner);
+        }
+
        return super.renderEmpty(
            html`<ak-empty-state header=${msg("No Events found.")}>
                <div slot="body">${msg("No matching events could be found.")}</div>
--- a/web/src/admin/applications/wizard/ApplicationWizardStep.ts
+++ b/web/src/admin/applications/wizard/ApplicationWizardStep.ts
@ -1,7 +1,7 @@
 import { styles } from "@goauthentik/admin/applications/wizard/ApplicationWizardFormStepStyles.css.js";
 import { WizardStep } from "@goauthentik/components/ak-wizard/WizardStep.js";
 import {
-    NavigationUpdate,
+    NavigationEventInit,
    WizardNavigationEvent,
    WizardUpdateEvent,
 } from "@goauthentik/components/ak-wizard/events";
@ -14,9 +14,9 @@ import { property, query } from "lit/decorators.js";
 import { ValidationError } from "@goauthentik/api";

 import {
+    ApplicationTransactionValidationError,
    type ApplicationWizardState,
    type ApplicationWizardStateUpdate,
-    ExtendedValidationError,
 } from "./types";

 export class ApplicationWizardStep extends WizardStep {
@ -48,7 +48,7 @@ export class ApplicationWizardStep extends WizardStep {
    }

    protected removeErrors(
-        keyToDelete: keyof ExtendedValidationError,
+        keyToDelete: keyof ApplicationTransactionValidationError,
    ): ValidationError | undefined {
        if (!this.wizard.errors) {
            return undefined;
@ -71,7 +71,7 @@ export class ApplicationWizardStep extends WizardStep {
    public handleUpdate(
        update?: ApplicationWizardStateUpdate,
        destination?: string,
-        enable?: NavigationUpdate,
+        enable?: NavigationEventInit,
    ) {
        // Inform ApplicationWizard of content state
        if (update) {
--- a/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts
+++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts
@ -1,9 +1,10 @@
 import "@goauthentik/admin/applications/wizard/ak-wizard-title.js";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
-import { parseAPIError } from "@goauthentik/common/errors";
+import { parseAPIResponseError } from "@goauthentik/common/errors/network";
 import { WizardNavigationEvent } from "@goauthentik/components/ak-wizard/events.js";
 import { type WizardButton } from "@goauthentik/components/ak-wizard/types";
+import { showAPIErrorMessage } from "@goauthentik/elements/messages/MessageContainer";
 import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
 import { P, match } from "ts-pattern";

@ -30,10 +31,11 @@ import {
    type TransactionApplicationRequest,
    type TransactionApplicationResponse,
    type TransactionPolicyBindingRequest,
+    instanceOfValidationError,
 } from "@goauthentik/api";

 import { ApplicationWizardStep } from "../ApplicationWizardStep.js";
-import { ExtendedValidationError, OneOfProvider } from "../types.js";
+import { OneOfProvider, isApplicationTransactionValidationError } from "../types.js";
 import { providerRenderers } from "./SubmitStepOverviewRenderers.js";

 const _submitStates = ["reviewing", "running", "submitted"] as const;
@ -131,39 +133,46 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio

        this.state = "running";

-        return (
-            new CoreApi(DEFAULT_CONFIG)
-                .coreTransactionalApplicationsUpdate({
-                    transactionApplicationRequest: request,
-                })
-                .then((_response: TransactionApplicationResponse) => {
-                    this.dispatchCustomEvent(EVENT_REFRESH);
-                    this.state = "submitted";
-                })
+        return new CoreApi(DEFAULT_CONFIG)
+            .coreTransactionalApplicationsUpdate({
+                transactionApplicationRequest: request,
+            })
+            .then((_response: TransactionApplicationResponse) => {
+                this.dispatchCustomEvent(EVENT_REFRESH);
+                this.state = "submitted";
+            })

-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                .catch(async (resolution: any) => {
-                    const errors = (await parseAPIError(
-                        await resolution,
-                    )) as ExtendedValidationError;
+            .catch(async (error) => {
+                const parsedError = await parseAPIResponseError(error);

-                    // THIS is a really gross special case; if the user is duplicating the name of
-                    // an existing provider, the error appears on the `app` (!) error object. We
-                    // have to move that to the `provider.name` error field so it shows up in the
-                    // right place.
-                    if (Array.isArray(errors?.app?.provider)) {
-                        const providerError = errors.app.provider;
-                        errors.provider = errors.provider ?? {};
-                        errors.provider.name = providerError;
-                        delete errors.app.provider;
-                        if (Object.keys(errors.app).length === 0) {
-                            delete errors.app;
+                if (!instanceOfValidationError(parsedError)) {
+                    showAPIErrorMessage(parsedError);
+
+                    return;
+                }
+
+                if (isApplicationTransactionValidationError(parsedError)) {
+                    // THIS is a really gross special case; if the user is duplicating the name of an existing provider, the error appears on the `app` (!) error object.
+                    // We have to move that to the `provider.name` error field so it shows up in the right place.
+                    if (Array.isArray(parsedError.app?.provider)) {
+                        const providerError = parsedError.app.provider;
+
+                        parsedError.provider = {
+                            ...parsedError.provider,
+                            name: providerError,
+                        };
+
+                        delete parsedError.app.provider;
+
+                        if (Object.keys(parsedError.app).length === 0) {
+                            delete parsedError.app;
                        }
                    }
-                    this.handleUpdate({ errors });
-                    this.state = "reviewing";
-                })
-        );
+                }
+
+                this.handleUpdate({ errors: parsedError });
+                this.state = "reviewing";
+            });
    }

    override handleButton(button: WizardButton) {
@ -225,22 +234,20 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio
    }

    renderError() {
-        if (Object.keys(this.wizard.errors).length === 0) {
-            return nothing;
-        }
+        const { errors } = this.wizard;
+
+        if (Object.keys(errors).length === 0) return nothing;

-        const navTo = (step: string) => () => this.dispatchEvent(new WizardNavigationEvent(step));
-        const errors = this.wizard.errors;
        return html` <hr class="pf-c-divider" />
-            ${match(errors as ExtendedValidationError)
+            ${match(errors)
                .with(
                    { app: P.nonNullable },
                    () =>
                        html`<p>${msg("There was an error in the application.")}</p>
                            <p>
-                                <a @click=${navTo("application")}
-                                    >${msg("Review the application.")}</a
-                                >
+                                <a @click=${WizardNavigationEvent.toListener(this, "application")}>
+                                    ${msg("Review the application.")}
+                                </a>
                            </p>`,
                )
                .with(
@ -248,13 +255,20 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio
                    () =>
                        html`<p>${msg("There was an error in the provider.")}</p>
                            <p>
-                                <a @click=${navTo("provider")}>${msg("Review the provider.")}</a>
+                                <a @click=${WizardNavigationEvent.toListener(this, "provider")}
+                                    >${msg("Review the provider.")}</a
+                                >
                            </p>`,
                )
                .with(
                    { detail: P.nonNullable },
                    () =>
-                        `<p>${msg("There was an error. Please go back and review the application.")}: ${errors.detail}</p>`,
+                        html`<p>
+                            ${msg(
+                                "There was an error. Please go back and review the application.",
+                            )}:
+                            ${errors.detail}
+                        </p>`,
                )
                .with(
                    {
@ -264,7 +278,7 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio
                        html`<p>${msg("There was an error:")}:</p>
                            <ul>
                                ${(errors.nonFieldErrors ?? []).map(
-                                    (e: string) => html`<li>${e}</li>`,
+                                    (reason) => html`<li>${reason}</li>`,
                                )}
                            </ul>
                            <p>${msg("Please go back and review the application.")}</p>`,
--- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-oauth.ts
+++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-oauth.ts
@ -9,7 +9,7 @@ import { customElement, state } from "lit/decorators.js";
 import { OAuth2ProviderRequest, SourcesApi } from "@goauthentik/api";
 import { type OAuth2Provider, type PaginatedOAuthSourceList } from "@goauthentik/api";

-import { ExtendedValidationError } from "../../types.js";
+import { ApplicationTransactionValidationError } from "../../types.js";
 import { ApplicationWizardProviderForm } from "./ApplicationWizardProviderForm.js";

@customElement("ak-application-wizard-provider-for-oauth")
@ -34,7 +34,7 @@ export class ApplicationWizardOauth2ProviderForm extends ApplicationWizardProvid
            });
    }

-    renderForm(provider: OAuth2Provider, errors: ExtendedValidationError) {
+    renderForm(provider: OAuth2Provider, errors: ApplicationTransactionValidationError) {
        const showClientSecretCallback = (show: boolean) => {
            this.showClientSecret = show;
        };
--- a/web/src/admin/applications/wizard/types.ts
+++ b/web/src/admin/applications/wizard/types.ts
@ -25,16 +25,30 @@ export type OneOfProvider =

 export type ValidationRecord = { [key: string]: string[] };

-// TODO: Elf, extend this type and apply it to every object in the wizard.  Then run
-// the type-checker again.
-
-export type ExtendedValidationError = ValidationError & {
+/**
+ * An error that occurs during the creation or modification of an application.
+ *
+ * @todo (Elf) Extend this type to include all possible errors that can occur during the creation or modification of an application.
+ */
+export interface ApplicationTransactionValidationError extends ValidationError {
    app?: ValidationRecord;
    provider?: ValidationRecord;
    bindings?: ValidationRecord;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    detail?: any;
-};
+    detail?: unknown;
+}
+
+/**
+ * Type-guard to determine if an API response is shaped like an {@linkcode ApplicationTransactionValidationError}.
+ */
+export function isApplicationTransactionValidationError(
+    error: ValidationError,
+): error is ApplicationTransactionValidationError {
+    if ("app" in error) return true;
+    if ("provider" in error) return true;
+    if ("bindings" in error) return true;
+
+    return false;
+}

 // We use the PolicyBinding instead of the PolicyBindingRequest here, because that gives us a slot
 // in which to preserve the retrieved policy, group, or user object from the SearchSelect used to
@ -49,7 +63,7 @@ export interface ApplicationWizardState {
    proxyMode: ProxyMode;
    bindings: PolicyBinding[];
    currentBinding: number;
-    errors: ExtendedValidationError;
+    errors: ValidationError | ApplicationTransactionValidationError;
 }

 export interface ApplicationWizardStateUpdate {
--- a/web/src/admin/events/EventListPage.ts
+++ b/web/src/admin/events/EventListPage.ts
@ -8,6 +8,7 @@ import "@goauthentik/components/ak-event-info";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import { SlottedTemplateResult } from "@goauthentik/elements/types";
 import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
@ -72,7 +73,7 @@ export class EventListPage extends TablePage<Event> {
        `;
    }

-    row(item: EventWithContext): TemplateResult[] {
+    row(item: EventWithContext): SlottedTemplateResult[] {
        return [
            html`<div>${actionToLabel(item.action)}</div>
                <small>${item.app}</small>`,
--- a/web/src/admin/events/utils.ts
+++ b/web/src/admin/events/utils.ts
@ -1,27 +1,31 @@
 import { EventWithContext } from "@goauthentik/common/events";
 import { truncate } from "@goauthentik/common/utils";
-import { KeyUnknown } from "@goauthentik/elements/forms/Form";
+import { SlottedTemplateResult } from "@goauthentik/elements/types";

 import { msg, str } from "@lit/localize";
-import { TemplateResult, html } from "lit";
+import { html, nothing } from "lit";

-export function EventGeo(event: EventWithContext): TemplateResult {
-    let geo: KeyUnknown | undefined = undefined;
-    if (Object.hasOwn(event.context, "geo")) {
-        geo = event.context.geo as KeyUnknown;
-        const parts = [geo.city, geo.country, geo.continent].filter(
-            (v) => v !== "" && v !== undefined,
-        );
-        return html`${parts.join(", ")}`;
-    }
-    return html``;
+/**
+ * Given event with a geographical context, format it into a string for display.
+ */
+export function EventGeo(event: EventWithContext): SlottedTemplateResult {
+    if (!event.context.geo) return nothing;
+
+    const { city, country, continent } = event.context.geo;
+
+    const parts = [city, country, continent].filter(Boolean);
+
+    return html`${parts.join(", ")}`;
 }

-export function EventUser(event: EventWithContext, truncateUsername?: number): TemplateResult {
-    if (!event.user.username) {
-        return html`-`;
-    }
-    let body = html``;
+export function EventUser(
+    event: EventWithContext,
+    truncateUsername?: number,
+): SlottedTemplateResult {
+    if (!event.user.username) return html`-`;
+
+    let body: SlottedTemplateResult = nothing;
+
    if (event.user.is_anonymous) {
        body = html`<div>${msg("Anonymous user")}</div>`;
    } else {
@ -33,12 +37,14 @@ export function EventUser(event: EventWithContext, truncateUsername?: number): T
            >
        </div>`;
    }
+
    if (event.user.on_behalf_of) {
-        body = html`${body}<small>
+        return html`${body}<small>
                <a href="#/identity/users/${event.user.on_behalf_of.pk}"
                    >${msg(str`On behalf of ${event.user.on_behalf_of.username}`)}</a
                >
            </small>`;
    }
+
    return body;
 }
--- a/web/src/admin/flows/FlowImportForm.ts
+++ b/web/src/admin/flows/FlowImportForm.ts
@ -1,5 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { SentryIgnoredError } from "@goauthentik/common/errors";
+import { SentryIgnoredError } from "@goauthentik/common/sentry";
 import "@goauthentik/components/ak-status-label";
 import "@goauthentik/elements/events/LogViewer";
 import { Form } from "@goauthentik/elements/forms/Form";
--- a/web/src/admin/flows/FlowViewPage.ts
+++ b/web/src/admin/flows/FlowViewPage.ts
@ -5,6 +5,7 @@ import { DesignationToLabel } from "@goauthentik/admin/flows/utils";
 import "@goauthentik/admin/policies/BoundPoliciesList";
 import "@goauthentik/admin/rbac/ObjectPermissionsPage";
 import { AndNext, DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { isResponseErrorLike } from "@goauthentik/common/errors/network";
 import "@goauthentik/components/events/ObjectChangelog";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/PageHeader";
@ -23,12 +24,7 @@ import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";

-import {
-    Flow,
-    FlowsApi,
-    RbacPermissionsAssignedByUsersListModelEnum,
-    ResponseError,
-} from "@goauthentik/api";
+import { Flow, FlowsApi, RbacPermissionsAssignedByUsersListModelEnum } from "@goauthentik/api";

@customElement("ak-flow-view")
 export class FlowViewPage extends AKElement {
@ -195,13 +191,15 @@ export class FlowViewPage extends AKElement {
                                                                )}`;
                                                                window.open(finalURL, "_blank");
                                                            })
-                                                            .catch((exc: ResponseError) => {
-                                                                // This request can return a HTTP 400 when a flow
-                                                                // is not applicable.
-                                                                window.open(
-                                                                    exc.response.url,
-                                                                    "_blank",
-                                                                );
+                                                            .catch(async (error: unknown) => {
+                                                                if (isResponseErrorLike(error)) {
+                                                                    // This request can return a HTTP 400 when a flow
+                                                                    // is not applicable.
+                                                                    window.open(
+                                                                        error.response.url,
+                                                                        "_blank",
+                                                                    );
+                                                                }
                                                            });
                                                    }}
                                                >
--- a/web/src/admin/groups/RelatedUserList.ts
+++ b/web/src/admin/groups/RelatedUserList.ts
@ -6,6 +6,7 @@ import "@goauthentik/admin/users/UserPasswordForm";
 import "@goauthentik/admin/users/UserResetEmailForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { PFSize } from "@goauthentik/common/enums.js";
+import { parseAPIResponseError, pluckErrorDetail } from "@goauthentik/common/errors/network";
 import { MessageLevel } from "@goauthentik/common/messages";
 import { me } from "@goauthentik/common/users";
 import { getRelativeTime } from "@goauthentik/common/utils";
@ -37,14 +38,7 @@ import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
 import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";

-import {
-    CoreApi,
-    CoreUsersListTypeEnum,
-    Group,
-    ResponseError,
-    SessionUser,
-    User,
-} from "@goauthentik/api";
+import { CoreApi, CoreUsersListTypeEnum, Group, SessionUser, User } from "@goauthentik/api";

@customElement("ak-user-related-add")
 export class RelatedUserAdd extends Form<{ users: number[] }> {
@ -319,14 +313,16 @@ export class RelatedUserList extends WithBrandConfig(WithCapabilitiesConfig(Tabl
                                                                  description: rec.link,
                                                              });
                                                          })
-                                                          .catch((ex: ResponseError) => {
-                                                              ex.response.json().then(() => {
-                                                                  showMessage({
-                                                                      level: MessageLevel.error,
-                                                                      message: msg(
-                                                                          "No recovery flow is configured.",
-                                                                      ),
-                                                                  });
+                                                          .catch(async (error: unknown) => {
+                                                              const parsedError =
+                                                                  await parseAPIResponseError(
+                                                                      error,
+                                                                  );
+
+                                                              showMessage({
+                                                                  level: MessageLevel.error,
+                                                                  message:
+                                                                      pluckErrorDetail(parsedError),
                                                              });
                                                          });
                                                  }}
--- a/web/src/admin/providers/saml/SAMLProviderImportForm.ts
+++ b/web/src/admin/providers/saml/SAMLProviderImportForm.ts
@ -1,6 +1,6 @@
 import "@goauthentik/admin/common/ak-flow-search/ak-flow-search-no-default";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { SentryIgnoredError } from "@goauthentik/common/errors";
+import { SentryIgnoredError } from "@goauthentik/common/sentry";
 import { Form } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/SearchSelect";
--- a/web/src/admin/stages/prompt/PromptForm.ts
+++ b/web/src/admin/stages/prompt/PromptForm.ts
@ -1,5 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { parseAPIError } from "@goauthentik/common/errors";
+import { parseAPIResponseError, pluckErrorDetail } from "@goauthentik/common/errors/network";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
@ -21,9 +21,8 @@ import {
    Prompt,
    PromptChallenge,
    PromptTypeEnum,
-    ResponseError,
    StagesApi,
-    ValidationError,
+    instanceOfValidationError,
 } from "@goauthentik/api";

 class PreviewStageHost implements StageHost {
@ -78,15 +77,22 @@ export class PromptForm extends ModelForm<Prompt, string> {
                return;
            }
        }
-        try {
-            this.preview = await new StagesApi(DEFAULT_CONFIG).stagesPromptPromptsPreviewCreate({
+
+        return new StagesApi(DEFAULT_CONFIG)
+            .stagesPromptPromptsPreviewCreate({
                promptRequest: prompt,
+            })
+            .then((nextPreview) => {
+                this.preview = nextPreview;
+                this.previewError = undefined;
+            })
+            .catch(async (error: unknown) => {
+                const parsedError = await parseAPIResponseError(error);
+
+                this.previewError = instanceOfValidationError(parsedError)
+                    ? parsedError.nonFieldErrors
+                    : [pluckErrorDetail(parsedError, msg("Failed to preview prompt"))];
            });
-            this.previewError = undefined;
-        } catch (exc) {
-            const errorMessage = parseAPIError(exc as ResponseError);
-            this.previewError = (errorMessage as ValidationError).nonFieldErrors;
-        }
    }

    getSuccessMessage(): string {
--- a/web/src/admin/users/UserActiveForm.ts
+++ b/web/src/admin/users/UserActiveForm.ts
@ -1,3 +1,4 @@
+import { parseAPIResponseError, pluckErrorDetail } from "@goauthentik/common/errors/network";
 import { MessageLevel } from "@goauthentik/common/messages";
 import "@goauthentik/elements/buttons/SpinnerButton";
 import { DeleteForm } from "@goauthentik/elements/forms/DeleteForm";
@ -16,10 +17,14 @@ export class UserActiveForm extends DeleteForm {
        });
    }

-    onError(e: Error): void {
-        showMessage({
-            message: msg(str`Failed to update ${this.objectLabel}: ${e.toString()}`),
-            level: MessageLevel.error,
+    onError(error: unknown): Promise<void> {
+        return parseAPIResponseError(error).then((parsedError) => {
+            showMessage({
+                message: msg(
+                    str`Failed to update ${this.objectLabel}: ${pluckErrorDetail(parsedError)}`,
+                ),
+                level: MessageLevel.error,
+            });
        });
    }

--- a/web/src/admin/users/UserDevicesTable.ts
+++ b/web/src/admin/users/UserDevicesTable.ts
@ -1,6 +1,6 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { SentryIgnoredError } from "@goauthentik/common/errors";
 import { deviceTypeName } from "@goauthentik/common/labels";
+import { SentryIgnoredError } from "@goauthentik/common/sentry";
 import { getRelativeTime } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/DeleteBulkForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
--- a/web/src/admin/users/UserListPage.ts
+++ b/web/src/admin/users/UserListPage.ts
@ -7,6 +7,7 @@ import "@goauthentik/admin/users/UserPasswordForm";
 import "@goauthentik/admin/users/UserResetEmailForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { PFSize } from "@goauthentik/common/enums.js";
+import { parseAPIResponseError } from "@goauthentik/common/errors/network";
 import { userTypeToLabel } from "@goauthentik/common/labels";
 import { MessageLevel } from "@goauthentik/common/messages";
 import { DefaultUIConfig, uiConfig } from "@goauthentik/common/ui/config";
@ -23,7 +24,7 @@ import "@goauthentik/elements/TreeView";
 import "@goauthentik/elements/buttons/ActionButton";
 import "@goauthentik/elements/forms/DeleteBulkForm";
 import "@goauthentik/elements/forms/ModalForm";
-import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
+import { showAPIErrorMessage, showMessage } from "@goauthentik/elements/messages/MessageContainer";
 import { getURLParam, updateURLParams } from "@goauthentik/elements/router/RouteMatch";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
@ -39,7 +40,7 @@ import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";

-import { CoreApi, ResponseError, SessionUser, User, UserPath } from "@goauthentik/api";
+import { CoreApi, SessionUser, User, UserPath } from "@goauthentik/api";

 export const requestRecoveryLink = (user: User) =>
    new CoreApi(DEFAULT_CONFIG)
@ -57,16 +58,7 @@ export const requestRecoveryLink = (user: User) =>
                }),
            ),
        )
-        .catch((ex: ResponseError) =>
-            ex.response.json().then(() =>
-                showMessage({
-                    level: MessageLevel.error,
-                    message: msg(
-                        "The current brand must have a recovery flow configured to use a recovery link",
-                    ),
-                }),
-            ),
-        );
+        .catch((error: unknown) => parseAPIResponseError(error).then(showAPIErrorMessage));

 export const renderRecoveryEmailRequest = (user: User) =>
    html`<ak-forms-modal .closeAfterSuccessfulSubmit=${false} id="ak-email-recovery-request">