#21451 Fix WebGL disabled error message (#10589)

* #21451 Fix WebGl disabled error message * #21451 Fix WebGl disabled error message Signed-off-by: Rashmit Pankhania <rashmitpankhania@gmail.com> Signed-off-by: Rashmit Pankhania <raspankh@publicisgroupe.net> * Fix message Signed-off-by: Rashmit Pankhania <raspankh@publicisgroupe.net> * Fix ordering of cases in LocationShareErrors.ts Signed-off-by: Rashmit Pankhania <raspankh@publicisgroupe.net> * Fix linting LocationPicker.tsx Signed-off-by: Rashmit Pankhania <raspankh@publicisgroupe.net> * Fix eslint Signed-off-by: Rashmit Pankhania <raspankh@publicisgroupe.net> * Fix file encoding for i18n CI issue Signed-off-by: Rashmit Pankhania <raspankh@publicisgroupe.net> * Fix ts strict CI issue Signed-off-by: Rashmit Pankhania <raspankh@publicisgroupe.net> --------- Signed-off-by: Rashmit Pankhania <rashmitpankhania@gmail.com> Signed-off-by: Rashmit Pankhania <raspankh@publicisgroupe.net> Co-authored-by: Rashmit Pankhania <raspankh@publicisgroupe.net> Co-authored-by: Kerry <kerrya@element.io>
matrix-org · Apr 17, 2023 · 7751f9c · 7751f9c
1 parent 41c0b08
commit 7751f9c
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 4 deletions.
diff --git a/src/components/views/location/LocationPicker.tsx b/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 });
         }
     }

diff --git a/src/i18n/strings/en_EN.json b/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",

diff --git a/src/utils/location/LocationShareErrors.ts b/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(

diff --git a/src/utils/location/map.ts b/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;
     }
 };

diff --git a/test/components/views/location/LocationPicker-test.tsx b/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(() => {});