Inspector v2: Handle extension install errors (#16807)

ryantrem · web-flow · commit 36b4293e7f77 · 2025-06-25T02:38:51.000+02:00
A few people recently got hung up on extension install errors not currently being handled, particularly in the case where a previously installed extension can no longer be installed (such as the name changing). This PR adds error handling for these scenarios that works for our dev workflow as well as users. Also unrelated, but I updated the theme with a color ramp generated from the color used for icons in inspector v1. We can continue to tune of course, I just wanted to put something in place that is slightly closer to the Babylon colors. ![image](https://github.com/user-attachments/assets/e3d66afd-c4f0-472d-82d6-92cf5cb56caa)
diff --git a/packages/dev/inspector-v2/src/extensibility/extensionManager.ts b/packages/dev/inspector-v2/src/extensibility/extensionManager.ts
@@ -5,8 +5,6 @@ import type { IExtensionFeed, ExtensionMetadata, ExtensionModule } from "./exten
 
 import { Logger } from "core/Misc/logger";
 
-import { Assert } from "../misc/assert";
-
 /**
  * Represents a loaded extension.
  */
@@ -44,6 +42,21 @@ export interface IExtension {
     addStateChangedHandler(handler: () => void): IDisposable;
 }
 
+/**
+ * Provides information about an extension installation failure.
+ */
+export type InstallFailedInfo = {
+    /**
+     * The metadata of the extension that failed to install.
+     */
+    extension: ExtensionMetadata;
+
+    /**
+     * The error that occurred during the installation.
+     */
+    error: unknown;
+};
+
 type InstalledExtension = {
     metadata: ExtensionMetadata;
     feed: IExtensionFeed;
@@ -91,18 +104,24 @@ export class ExtensionManager implements IDisposable {
 
     private constructor(
         private readonly _serviceContainer: ServiceContainer,
-        private readonly _feeds: readonly IExtensionFeed[]
+        private readonly _feeds: readonly IExtensionFeed[],
+        private readonly _onInstallFailed: (info: InstallFailedInfo) => void
     ) {}
 
     /**
      * Creates a new instance of the ExtensionManager.
      * This will automatically rehydrate previously installed and enabled extensions.
      * @param serviceContainer The service container to use.
      * @param feeds The extension feeds to include.
+     * @param onInstallFailed A callback that is called when an extension installation fails.
      * @returns A promise that resolves to the new instance of the ExtensionManager.
      */
-    public static async CreateAsync(serviceContainer: ServiceContainer, feeds: readonly IExtensionFeed[]) {
-        const extensionManager = new ExtensionManager(serviceContainer, feeds);
+    public static async CreateAsync(
+        serviceContainer: ServiceContainer,
+        feeds: readonly IExtensionFeed[],
+        onInstallFailed: (info: InstallFailedInfo) => void
+    ): Promise<ExtensionManager> {
+        const extensionManager = new ExtensionManager(serviceContainer, feeds, onInstallFailed);
 
         // Rehydrate installed extensions.
         const installedExtensionNames = JSON.parse(localStorage.getItem(InstalledExtensionsKey) ?? "[]") as string[];
@@ -125,7 +144,17 @@ export class ExtensionManager implements IDisposable {
         // Load installed and enabled extensions.
         const enablePromises: Promise<void>[] = [];
         for (const extension of extensionManager._installedExtensions.values()) {
-            enablePromises.push(extensionManager._enableAsync(extension.metadata, false));
+            enablePromises.push(
+                (async () => {
+                    try {
+                        await extensionManager._enableAsync(extension.metadata, false, false);
+                    } catch {
+                        // If enabling the extension fails, uninstall it. The extension install fail callback will still be called,
+                        // so the owner of the ExtensionManager instance can decide what to do with the error.
+                        await extensionManager._uninstallAsync(extension.metadata, false);
+                    }
+                })()
+            );
         }
 
         await Promise.all(enablePromises);
@@ -215,6 +244,16 @@ export class ExtensionManager implements IDisposable {
             installedExtension.isStateChanging = true;
             this._installedExtensions.set(metadata.name, installedExtension);
 
+            try {
+                // Enable the extension.
+                await this._enableAsync(metadata, true, true);
+            } catch (error) {
+                this._installedExtensions.delete(metadata.name);
+                throw error;
+            } finally {
+                !isNestedStateChange && (installedExtension.isStateChanging = false);
+            }
+
             // Mark the extension as being installed.
             localStorage.setItem(
                 GetExtensionInstalledKey(GetExtensionIdentity(feed.name, metadata.name)),
@@ -227,16 +266,6 @@ export class ExtensionManager implements IDisposable {
                 InstalledExtensionsKey,
                 JSON.stringify(Array.from(this._installedExtensions.values()).map((extension) => GetExtensionIdentity(extension.feed.name, extension.metadata.name)))
             );
-
-            try {
-                // Enable the extension.
-                await this._enableAsync(metadata, true);
-            } catch (error) {
-                this._installedExtensions.delete(metadata.name);
-                throw error;
-            } finally {
-                !isNestedStateChange && (installedExtension.isStateChanging = false);
-            }
         }
 
         return installedExtension;
@@ -263,7 +292,7 @@ export class ExtensionManager implements IDisposable {
         }
     }
 
-    private async _enableAsync(metadata: ExtensionMetadata, isNestedStateChange: boolean): Promise<void> {
+    private async _enableAsync(metadata: ExtensionMetadata, isInitialInstall: boolean, isNestedStateChange: boolean): Promise<void> {
         const installedExtension = this._installedExtensions.get(metadata.name);
         if (installedExtension && (isNestedStateChange || !installedExtension.isStateChanging)) {
             try {
@@ -274,7 +303,9 @@ export class ExtensionManager implements IDisposable {
                     installedExtension.extensionModule = await installedExtension.feed.getExtensionModuleAsync(metadata.name);
                 }
 
-                Assert(installedExtension.extensionModule);
+                if (!installedExtension.extensionModule) {
+                    throw new Error(`Unable to load extension module for "${metadata.name}" from feed "${installedExtension.feed.name}".`);
+                }
 
                 // Register the ServiceDefinitions.
                 let servicesRegistrationToken: Nullable<IDisposable> = null;
@@ -288,6 +319,12 @@ export class ExtensionManager implements IDisposable {
                         servicesRegistrationToken?.dispose();
                     },
                 };
+            } catch (error: unknown) {
+                this._onInstallFailed({
+                    extension: metadata,
+                    error,
+                });
+                throw error;
             } finally {
                 !isNestedStateChange && (installedExtension.isStateChanging = false);
             }
diff --git a/packages/dev/inspector-v2/src/modularTool.tsx b/packages/dev/inspector-v2/src/modularTool.tsx
@@ -3,11 +3,27 @@ import type { IDisposable } from "core/index";
 
 import type { ComponentType, FunctionComponent } from "react";
 import type { IExtensionFeed } from "./extensibility/extensionFeed";
-import type { IExtension } from "./extensibility/extensionManager";
+import type { IExtension, InstallFailedInfo } from "./extensibility/extensionManager";
 import type { WeaklyTypedServiceDefinition } from "./modularity/serviceContainer";
 import type { IRootComponentService, ShellServiceOptions } from "./services/shellService";
 
-import { Button, Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, FluentProvider, makeStyles, Spinner } from "@fluentui/react-components";
+import {
+    Body1,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogBody,
+    DialogContent,
+    DialogSurface,
+    DialogTitle,
+    FluentProvider,
+    List,
+    ListItem,
+    makeStyles,
+    Spinner,
+    tokens,
+} from "@fluentui/react-components";
+import { ErrorCircleRegular } from "@fluentui/react-icons";
 import { createElement, Suspense, useCallback, useEffect, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { useTernaryDarkMode } from "usehooks-ts";
@@ -21,8 +37,7 @@ import { ServiceContainer } from "./modularity/serviceContainer";
 import { ExtensionListServiceDefinition } from "./services/extensionsListService";
 import { MakeShellServiceDefinition, RootComponentServiceIdentity } from "./services/shellService";
 import { ThemeSelectorServiceDefinition } from "./services/themeSelectorService";
-//import { DarkTheme, LightTheme } from "./themes/babylonTheme";
-import { webDarkTheme as DarkTheme, webLightTheme as LightTheme } from "@fluentui/react-components";
+import { DarkTheme, LightTheme } from "./themes/babylonTheme";
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const useStyles = makeStyles({
@@ -40,6 +55,15 @@ const useStyles = makeStyles({
             to: { opacity: 1 },
         },
     },
+    extensionErrorTitleDiv: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalS,
+    },
+    extensionErrorIcon: {
+        color: tokens.colorPaletteRedForeground1,
+    },
 });
 
 export type ModularToolOptions = {
@@ -78,6 +102,7 @@ export function MakeModularTool(options: ModularToolOptions): IDisposable {
         const { isDarkMode } = useTernaryDarkMode();
         const [requiredExtensions, setRequiredExtensions] = useState<string[]>();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState<Deferred<boolean>>();
+        const [extensionInstallError, setExtensionInstallError] = useState<InstallFailedInfo>();
 
         const [rootComponent, setRootComponent] = useState<ComponentType>();
 
@@ -116,7 +141,7 @@ export function MakeModularTool(options: ModularToolOptions): IDisposable {
                 await serviceContainer.addServicesAsync(...serviceDefinitions);
 
                 // Create the extension manager, passing along the registry for runtime changes to the registered services.
-                const extensionManager = await ExtensionManager.CreateAsync(serviceContainer, extensionFeeds);
+                const extensionManager = await ExtensionManager.CreateAsync(serviceContainer, extensionFeeds, setExtensionInstallError);
 
                 // Check query params for required extensions. This lets users share links with sets of extensions.
                 const queryParams = new URLSearchParams(window.location.search);
@@ -182,6 +207,10 @@ export function MakeModularTool(options: ModularToolOptions): IDisposable {
             requiredExtensionsDeferred?.resolve(false);
         }, [setRequiredExtensions, requiredExtensionsDeferred]);
 
+        const onAcknowledgedExtensionInstallError = useCallback(() => {
+            setExtensionInstallError(undefined);
+        }, [setExtensionInstallError]);
+
         // Show a spinner until a main view has been set.
         // eslint-disable-next-line @typescript-eslint/naming-convention
         const Content: ComponentType = rootComponent ?? (() => <Spinner className={classes.spinner} />);
@@ -209,6 +238,33 @@ export function MakeModularTool(options: ModularToolOptions): IDisposable {
                                 </DialogBody>
                             </DialogSurface>
                         </Dialog>
+                        <Dialog open={!!extensionInstallError} modalType="alert">
+                            <DialogSurface>
+                                <DialogBody>
+                                    <DialogTitle>
+                                        <div className={classes.extensionErrorTitleDiv}>
+                                            Extension Install Error
+                                            <ErrorCircleRegular className={classes.extensionErrorIcon} />
+                                        </div>
+                                    </DialogTitle>
+                                    <DialogContent>
+                                        <List>
+                                            <ListItem>
+                                                <Body1>{`Extension "${extensionInstallError?.extension.name}" failed to install and was removed.`}</Body1>
+                                            </ListItem>
+                                            <ListItem>
+                                                <Body1>{`${extensionInstallError?.error}`}</Body1>
+                                            </ListItem>
+                                        </List>
+                                    </DialogContent>
+                                    <DialogActions>
+                                        <Button appearance="primary" onClick={onAcknowledgedExtensionInstallError}>
+                                            Close
+                                        </Button>
+                                    </DialogActions>
+                                </DialogBody>
+                            </DialogSurface>
+                        </Dialog>
                         <Suspense fallback={<Spinner className={classes.spinner} />}>
                             <Content />
                         </Suspense>
diff --git a/packages/dev/inspector-v2/src/services/extensionsListService.tsx b/packages/dev/inspector-v2/src/services/extensionsListService.tsx
@@ -103,8 +103,21 @@ const ExtensionDetails: FunctionComponent<{ extension: IExtension }> = memo((pro
         return stateChangedHandlerRegistration.dispose;
     }, [props.extension]);
 
-    const install = useCallback(async () => await props.extension.installAsync(), [props.extension]);
-    const uninstall = useCallback(async () => await props.extension.uninstallAsync(), [props.extension]);
+    const install = useCallback(async () => {
+        try {
+            await props.extension.installAsync();
+        } catch {
+            // Ignore errors. Other parts of the infrastructure handle them and communicate them to the user.
+        }
+    }, [props.extension]);
+
+    const uninstall = useCallback(async () => {
+        try {
+            await props.extension.uninstallAsync();
+        } catch {
+            // Ignore errors. Other parts of the infrastructure handle them and communicate them to the user.
+        }
+    }, [props.extension]);
 
     return (
         <>
diff --git a/packages/dev/inspector-v2/src/themes/babylonTheme.ts b/packages/dev/inspector-v2/src/themes/babylonTheme.ts
@@ -4,37 +4,31 @@ import type { BrandVariants, Theme } from "@fluentui/react-components";
 
 import { createDarkTheme, createLightTheme } from "@fluentui/react-components";
 
-const babylonBrand: BrandVariants = {
-    10: "#000000",
-    20: "#1E0F11",
-    30: "#34181B",
-    40: "#4B1F24",
-    50: "#63272D",
-    60: "#7C2F36",
-    70: "#96373E",
-    80: "#AF4046",
-    90: "#C44F51",
-    100: "#D5625F",
-    110: "#E4766E",
-    120: "#F18A7F",
-    130: "#FBA092",
-    140: "#FFB8AA",
-    150: "#FFD1C6",
-    160: "#FFE8E2",
+// Generated from https://react.fluentui.dev/?path=/docs/theme-theme-designer--docs
+// Key color: #3A94FC
+const babylonRamp: BrandVariants = {
+    10: "#020305",
+    20: "#121721",
+    30: "#1A263A",
+    40: "#1F314F",
+    50: "#243E64",
+    60: "#294B7B",
+    70: "#2D5892",
+    80: "#3166AA",
+    90: "#3473C3",
+    100: "#3782DC",
+    110: "#3990F6",
+    120: "#5A9EFD",
+    130: "#7BACFE",
+    140: "#96BAFF",
+    150: "#AFC9FF",
+    160: "#C6D8FF",
 };
 
 export const LightTheme: Theme = {
-    ...createLightTheme(babylonBrand),
+    ...createLightTheme(babylonRamp),
 };
 
 export const DarkTheme: Theme = {
-    ...createDarkTheme(babylonBrand),
-    colorBrandForeground1: babylonBrand[110],
-    colorBrandForegroundLink: babylonBrand[110],
-    colorBrandForegroundLinkPressed: babylonBrand[110],
-    colorBrandForegroundLinkSelected: babylonBrand[110],
-    colorCompoundBrandBackgroundHover: babylonBrand[100],
-    colorCompoundBrandForeground1Pressed: babylonBrand[100],
-    colorCompoundBrandStrokePressed: babylonBrand[100],
-    colorNeutralForeground2BrandPressed: babylonBrand[100],
+    ...createDarkTheme(babylonRamp),
 };
