#21451 Fix WebGL disabled error message

src/components/views/location/LocationPicker.tsx

@@ -119,10 +119,13 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
             }
         } catch (e) {
             logger.error("Failed to render map", e);
-            const errorType =
-                (e as Error)?.message === LocationShareError.MapStyleUrlNotConfigured
-                    ? LocationShareError.MapStyleUrlNotConfigured
-                    : LocationShareError.Default;
+            const errorMessage = (e as Error)?.message;
+            let errorType;
+            if (errorMessage === LocationShareError.MapStyleUrlNotConfigured)
+                errorType = LocationShareError.MapStyleUrlNotConfigured;
+            else if (errorMessage.includes("Failed to initialize WebGL"))
+                errorType = LocationShareError.WebGLNotEnabled;
+            else errorType = LocationShareError.Default;
             this.setState({ error: errorType });
         }
     }

src/i18n/strings/en_EN.json

@@ -786,6 +786,7 @@
     "No media permissions": "No media permissions",
     "You may need to manually permit %(brand)s to access your microphone/webcam": "You may need to manually permit %(brand)s to access your microphone/webcam",
     "This homeserver is not configured to display maps.": "This homeserver is not configured to display maps.",
+    "WebGL is required to display maps, please enable it in your browser settings.": "WebGL is required to display maps, please enable it in your browser settings.",
     "This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.": "This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.",
     "Toggle attribution": "Toggle attribution",
     "Map feedback": "Map feedback",

src/utils/location/LocationShareErrors.ts

@@ -19,13 +19,16 @@ import { _t } from "../../languageHandler";
 export enum LocationShareError {
     MapStyleUrlNotConfigured = "MapStyleUrlNotConfigured",
     MapStyleUrlNotReachable = "MapStyleUrlNotReachable",
+    WebGLNotEnabled = "WebGLNotEnabled",
     Default = "Default",
 }
 
 export const getLocationShareErrorMessage = (errorType?: LocationShareError): string => {
     switch (errorType) {
         case LocationShareError.MapStyleUrlNotConfigured:
             return _t("This homeserver is not configured to display maps.");
+        case LocationShareError.WebGLNotEnabled:
+            return _t("WebGL is required to display maps, please enable it in your browser settings.");
         case LocationShareError.MapStyleUrlNotReachable:
         default:
             return _t(

src/utils/location/map.ts

@@ -57,6 +57,8 @@ export const createMap = (interactive: boolean, bodyId: string, onError?: (error
         return map;
     } catch (e) {
         logger.error("Failed to render map", e);
+        const errorMessage = (e as Error)?.message;
+        if (errorMessage.includes("Failed to initialize WebGL")) throw new Error(LocationShareError.WebGLNotEnabled);
         throw e;
     }
 };

test/components/views/location/LocationPicker-test.tsx

@@ -118,6 +118,20 @@ describe("LocationPicker", () => {
             expect(getByText("This homeserver is not configured to display maps.")).toBeInTheDocument();
         });
 
+        it("displays error when WebGl is not enabled", () => {
+            // suppress expected error log
+            jest.spyOn(logger, "error").mockImplementation(() => {});
+            mocked(findMapStyleUrl).mockImplementation(() => {
+                throw new Error("Failed to initialize WebGL");
+            });
+
+            const { getByText } = getComponent();
+
+            expect(
+                getByText("WebGL is required to display maps, please enable it in your browser settings."),
+            ).toBeInTheDocument();
+        });
+
         it("displays error when map setup throws", () => {
             // suppress expected error log
             jest.spyOn(logger, "error").mockImplementation(() => {});