fix: Add web component load error handling with a new onWebComponentLoadError prop to the DrivePicker component.

Author: jpoehnelt

packages/drive-picker-react/README.md

@@ -52,7 +52,9 @@ The available event handlers are:
 - `onPicked`
 - `onCanceled`
 - `onOauthError`
+- `onOauthError`
 - `onOauthResponse`
+- `onWebComponentLoadError`: Invoked if the underlying web component fails to load (e.g. network error).
 
 The event argument is a `CustomEvent` where the `detail` property contains the payload from the Google Picker API.
 

packages/drive-picker-react/src/DrivePicker.test.tsx

@@ -0,0 +1,55 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { DrivePicker } from "./DrivePicker";
+import * as LoaderModule from "./loader";
+
+describe("DrivePicker", () => {
+	it("should call onWebComponentLoadError if import fails", async () => {
+		const onWebComponentLoadError = vi.fn();
+		const consoleErrorSpy = vi
+			.spyOn(console, "error")
+			.mockImplementation(() => {});
+
+		// Mock loader failure
+		vi.spyOn(LoaderModule, "loadDrivePickerElement").mockRejectedValue(
+			new Error("Import failed"),
+		);
+
+		render(
+			<DrivePicker
+				client-id="test-client-id"
+				app-id="test-app-id"
+				onWebComponentLoadError={onWebComponentLoadError}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(onWebComponentLoadError).toHaveBeenCalledWith(expect.any(Error));
+		});
+
+		expect(onWebComponentLoadError).toHaveBeenCalledWith(
+			expect.objectContaining({
+				message: "Import failed",
+			}),
+		);
+
+		consoleErrorSpy.mockRestore();
+		vi.restoreAllMocks();
+	});
+});

packages/drive-picker-react/src/DrivePicker.tsx

@@ -23,6 +23,7 @@ import type {
 import type React from "react";
 import { useEffect, useRef } from "react";
 import type { DrivePickerDocsViewProps } from "./DrivePickerDocsView";
+import { loadDrivePickerElement } from "./loader";
 import {
 	type DrivePickerEventHandlers,
 	useDrivePickerEvents,
@@ -50,6 +51,10 @@ export interface DrivePickerProps
 	children?:
 		| React.ReactElement<DrivePickerDocsViewProps>
 		| React.ReactElement<DrivePickerDocsViewProps>[];
+	/**
+	 * Callback invoked if the underlying web component fails to load.
+	 */
+	onWebComponentLoadError?: (error: Error) => void;
 }
 
 /**
@@ -70,6 +75,7 @@ export const DrivePicker: React.FC<DrivePickerProps> = (props) => {
 		onOauthError,
 		onOauthResponse,
 		children,
+		onWebComponentLoadError,
 		...rest
 	} = props;
 	const ref = useRef<DrivePickerElement>(null);
@@ -82,8 +88,13 @@ export const DrivePicker: React.FC<DrivePickerProps> = (props) => {
 	});
 
 	useEffect(() => {
-		import("@googleworkspace/drive-picker-element");
-	}, []);
+		loadDrivePickerElement().catch((e) => {
+			console.error("Failed to load @googleworkspace/drive-picker-element", e);
+			if (onWebComponentLoadError) {
+				onWebComponentLoadError(e instanceof Error ? e : new Error(String(e)));
+			}
+		});
+	}, [onWebComponentLoadError]);
 
 	return (
 		<drive-picker ref={ref} {...rest}>

packages/drive-picker-react/src/loader.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const loadDrivePickerElement = () =>
+	import("@googleworkspace/drive-picker-element");