web: Throw an error when reference types are unsupported

Author: danielhjacobs

web/packages/core/src/internal/player/inner.tsx

@@ -26,6 +26,7 @@ import { showPanicScreen } from "../ui/panic";
 import { createRuffleBuilder } from "../../load-ruffle";
 import { lookupElement } from "../register-element";
 import { configureBuilder } from "../builder";
+import { referenceTypes } from "wasm-feature-detect";
 
 const DIMENSION_REGEX = /^\s*(\d+(\.\d+)?(%)?)/;
 
@@ -844,6 +845,16 @@ export class InnerPlayer {
                     this.loadedConfig.backgroundColor;
             }
 
+            // We may theoretically need to check everything listed on https://github.com/rust-lang/rust/blob/master/src/doc/rustc/src/platform-support/wasm32-unknown-unknown.md#enabled-webassembly-features
+            // but this is the only extension I know completely breaks our WASM module if unsupported
+            const necessaryExtensionsSupported: boolean = await referenceTypes();
+            if (!necessaryExtensionsSupported) {
+                const baseError = new Error("Necessary WebAssembly extensions unsupported");
+                const loadError = new LoadRuffleWasmError(baseError);
+                this.panic(loadError);
+                return;
+            }
+
             await this.ensureFreshInstance();
 
             if ("url" in options) {

web/packages/core/src/internal/ui/panic.tsx

@@ -308,6 +308,19 @@ function createPanicError(error: Error | null): {
             };
         }
 
+        if (message === "necessary webassembly extensions unsupported") {
+            // Self hosted: User has a browser without support for necessary WebAssembly extensions
+            return {
+                body: textAsParagraphs("error-wasm-unsupported-browser"),
+                actions: [
+                    CommonActions.openWiki(
+                        "#web",
+                    ),
+                    CommonActions.ShowDetails,
+                ],
+            };
+        }
+
         // Self hosted: Cannot load `.wasm` file - file not found
         return {
             body: textAsParagraphs("error-wasm-not-found"),

web/packages/core/texts/en-US/messages.ftl

@@ -68,6 +68,10 @@ error-wasm-disabled-on-edge =
     To fix this, try opening your browser's settings, clicking "Privacy, search, and services", scrolling down, and turning off "Enhance your security on the web".
     This will allow your browser to load the required ".wasm" files.
     If the issue persists, you might have to use a different browser.
+error-wasm-unsupported-browser =
+    The browser you are using does not support the WebAssembly extensions Ruffle requires to run.
+    Please switch to a supported browser.
+    You can find a list of supported browsers on the Wiki.
 error-javascript-conflict =
     Ruffle has encountered a major issue whilst trying to initialize.
     It seems like this page uses JavaScript code that conflicts with Ruffle.