fix: Add fallback UI for webgl init failure

apps/info-dashboard/messages/en.json

@@ -120,5 +120,7 @@
 	"node_status_node_overview_table_warning_status": "Not-earning",
 	"coming_soon_metrics_card": "Coming soon",
 	"leaderboard_node_provider_table_wallet_id_copy_text": "Copy",
-	"node_status_node_overview_table_wallet_id_copy_text": "Copy"
+	"node_status_node_overview_table_wallet_id_copy_text": "Copy",
+	"good_patient_spider_amuse": "WebGL is not supported / enabled",
+	"tangy_stout_guppy_loop": "Please enable WebGL to view this map. Follow the instructions at "
 }

apps/info-dashboard/src/app/page.tsx

@@ -2,7 +2,11 @@
 import React from "react";
 import * as m from "@/paraglide/messages.js";
 import Head from "next/head";
-import { Badge } from "@lilypad/shared-components";
+import {
+	Badge,
+	ErrorBoundary,
+	WebGLFallback,
+} from "@lilypad/shared-components";
 import MetricsCard from "@/components/MetricsCard/MetricsCard";
 import HeadingSection from "@/components/HeadingSection";
 import { SectionContainer } from "@lilypad/shared-components";
@@ -35,7 +39,6 @@ import { DateTime } from "luxon";
 import EmptyState from "@/components/EmptyState/EmptyState";
 import ActiveNodesWorldMap from "@/components/ActiveNodesWorldMap/ActiveNodesWorldMap";
 import { fetchNodes, toGeoJson } from "@/lib/fetchers/nodes";
-
 export default function Home() {
 	const {
 		data: metricsData,
@@ -330,13 +333,34 @@ export default function Home() {
 								/>
 							</EmptyState>
 						) : (
-							<ActiveNodesWorldMap
-								geojson={toGeoJson(nodesData ?? [])}
-								protomapsApiKey={
-									process.env
-										.NEXT_PUBLIC_PROTOMAPS_API_KEY as string
+							<WebGLFallback
+								fallback={
+									<EmptyState
+										header={m.good_patient_spider_amuse()}
+										description={
+											<span>
+												{m.tangy_stout_guppy_loop()}
+												<a>https://get.webgl.org/</a>
+											</span>
+										}
+									>
+										<FeaturedIcon
+											spinIcon={false}
+											iconUrl={
+												alertAndFeedbackAlertCircle
+											}
+										/>
+									</EmptyState>
 								}
-							/>
+							>
+								<ActiveNodesWorldMap
+									geojson={toGeoJson(nodesData ?? [])}
+									protomapsApiKey={
+										process.env
+											.NEXT_PUBLIC_PROTOMAPS_API_KEY as string
+									}
+								/>
+							</WebGLFallback>
 						)}
 					</CardWithBorder>
 				</SectionContainer>

apps/info-dashboard/src/components/ActiveNodesWorldMap/ActiveNodesWorldMap.tsx

@@ -10,6 +10,7 @@ export default function ActiveNodesWorldMap({
 	return (
 		<div className="relative h-[60vh] w-full">
 			<Map
+				onError={(evt) => console.error(evt.error)}
 				initialViewState={{
 					latitude: 20,
 					longitude: 0,

apps/info-dashboard/src/components/EmptyState/EmptyState.tsx

@@ -1,12 +1,12 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, type ReactNode } from "react";
 
 export default function EmptyState({
 	children,
 	header,
 	description,
 }: PropsWithChildren<{
 	header: string;
-	description: string;
+	description: ReactNode;
 }>) {
 	return (
 		<div className="w-full h-[70vh] flex items-center flex-col justify-center space-y-uui-lg">

packages/shared-components/index.ts

@@ -1,4 +1,6 @@
 export * from "./lib/Badge/index";
 export * from "./lib/SectionContainer/index";
 export * from "./lib/Anchor/index";
+export * from "./lib/ErrorBoundary/index";
+export * from "./lib/WebGLFallback/index";
 export * from "./lib/types";

packages/shared-components/lib/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,40 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+
+interface Props {
+	children?: ReactNode;
+	fallback: (error: Error) => ReactNode;
+}
+
+interface State {
+	error: Error | undefined;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+	constructor(props: Props) {
+		super(props);
+		this.state = { error: undefined };
+	}
+
+	public state: State = {
+		error: undefined,
+	};
+
+	public static getDerivedStateFromError(error: Error): State {
+		// Update state so the next render will show the fallback UI.
+		return { error };
+	}
+
+	public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+		console.error("Uncaught error:", error, errorInfo);
+	}
+
+	public render() {
+		if (this.state.error) {
+			return this.props.fallback(this.state.error);
+		}
+
+		return this.props.children;
+	}
+}
+
+export default ErrorBoundary;

packages/shared-components/lib/ErrorBoundary/index.ts

@@ -0,0 +1 @@
+export { default as ErrorBoundary } from "./ErrorBoundary";

packages/shared-components/lib/WebGLFallback/WebGLFallback.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+
+function isWebglSupported() {
+	if (window.WebGLRenderingContext) {
+		const canvas = document.createElement("canvas");
+		try {
+			// Note that { failIfMajorPerformanceCaveat: true } can be passed as a second argument
+			// to canvas.getContext(), causing the check to fail if hardware rendering is not available. See
+			// https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext
+			// for more details.
+			const context =
+				canvas.getContext("webgl2") || canvas.getContext("webgl");
+			if (context && typeof context.getParameter == "function") {
+				return true;
+			}
+		} catch (e) {
+			// WebGL is supported, but disabled
+		}
+		return false;
+	}
+	// WebGL not supported
+	return false;
+}
+
+// webgl doesnt exist on server. so this can be a client side only component.
+export default function WebGLFallback({
+	fallback,
+	children,
+}: {
+	fallback: ReactNode;
+	children: ReactNode;
+}) {
+	if (isWebglSupported()) return children;
+	else return fallback;
+}

packages/shared-components/lib/WebGLFallback/index.ts

@@ -0,0 +1 @@
+export { default as WebGLFallback } from "./WebGLFallback";