Fallback for iOS

docs/index.html

@@ -11,7 +11,7 @@
                break-inside: avoid;
       }
     </style>
-  <script type="module" crossorigin src="assets/index.feb49b7d.js"></script>
+  <script type="module" crossorigin src="assets/index.afa733a7.js"></script>
   <link rel="modulepreload" href="assets/vendor.0d07671f.js">
   <link rel="stylesheet" href="assets/index.f44316bf.css">
 </head>

tester/src/testers/BasicInformation.jsx

@@ -54,27 +54,32 @@ const getConnectionInformation = async () => {
 
 const BasicInformation = ({ fn, value }) => {
     fn(async () => {
-        const devtools = devToolsOpened();
-        const stackLimit = await probeStackLimit();
-        const connection = await getConnectionInformation();
-        return {
+        let result = {
             navigator: {
                 deviceMemory: navigator.deviceMemory,
                 hardwareConcurrency: navigator.hardwareConcurrency,
             },
-            performance: {
-                "jsHeapSizeLimit": performance.memory.jsHeapSizeLimit,
-            },
-            stackLimit: stackLimit,
             window: {
                 innerHeight: window.innerHeight,
                 innerWidth: window.innerWidth,
                 outerHeight: window.outerHeight,
                 outerWidth: window.outerWidth,
             },
-            devtools,
-            connection,
         };
+        result.devtools = devToolsOpened();
+        result.stackLimit = await probeStackLimit();
+        result.connection = await getConnectionInformation();
+        try {
+            result.performance = {
+                jsHeapSizeLimit: performance.memory.jsHeapSizeLimit,
+            };
+        } catch (err) {}
+        try {
+            result.performance = {
+                jsHeapSizeLimit: performance.memory.jsHeapSizeLimit,
+            };
+        } catch (err) {}
+        return result;
     });
 
     if (!value) return null;

tester/src/testers/ResourceTiming.jsx

@@ -68,13 +68,17 @@ const TimelineVisualisation = ({ data }) => {
 const ResourceTiming = ({ fn, value }) => {
     fn(async () => {
         await new Promise((resolve) => setTimeout(resolve, 1000));
-        const performanceEntries = window.performance.getEntries();
-        const navigationTiming = performanceEntries.find((k) => k instanceof PerformanceNavigationTiming);
-        return {
-            navigationType: navigationTiming.type,
-            encodedBodySize: navigationTiming.encodedBodySize,
-            entriesCount: performanceEntries.length,
-            domainLookupTime: navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart,
+        try {
+            const performanceEntries = window.performance.getEntries();
+            const navigationTiming = performanceEntries.find((k) => k instanceof PerformanceNavigationTiming);
+            return {
+                navigationType: navigationTiming.type,
+                encodedBodySize: navigationTiming.encodedBodySize,
+                entriesCount: performanceEntries.length,
+                domainLookupTime: navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart,
+            }
+        } catch (err) {
+            return {};
         }
     });
 
@@ -87,9 +91,15 @@ const ResourceTiming = ({ fn, value }) => {
 
     return (
         <>
-            <Text my={4}>
-                You entered this page by <Code>{value.navigationType}</Code> action. Encoded body size of this page is <Code>{value.encodedBodySize}B</Code> (this can vary by encoding supported by your browser).
-            </Text>
+            {value.navigationType ? (
+                <Text my={4}>
+                    You entered this page by <Code>{value.navigationType}</Code> action. Encoded body size of this page is <Code>{value.encodedBodySize}B</Code> (this can vary by encoding supported by your browser).
+                </Text>
+            ) : (
+                <Text my={4}>
+                    Likely <Code>PerformanceNavigationTiming</Code> is not supported by your browser.
+                </Text>
+            )}
 
             {value.domainLookupTime < 1 && (
                 <Alert status="info" mb={4}>

tester/src/testers/tester.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {useDispatch, useSelector} from "react-redux";
-import {Box, Heading, Text, Spinner, Alert, AlertIcon} from "@chakra-ui/react";
+import {Box, Heading, Text, Spinner, Alert, AlertIcon, Code, Stack} from "@chakra-ui/react";
 import {statusSet} from "../state/actions";
 
 import mixpanel from 'mixpanel-browser';
@@ -16,6 +16,7 @@ export default (cls, config) => () => {
     const usePersisted = useSelector((state) => state.persisted);
     const storedValue = useSelector((state) => state.status[config.key]);
     const [status, setStatus] = React.useState(true);
+    const [error, setError] = React.useState(undefined);
     const dispatch = useDispatch();
     const assocTestFn = (fn) => React.useEffect(async () => {
         setStatus(TesterStatus.LOADING);
@@ -28,6 +29,8 @@ export default (cls, config) => () => {
             } catch (e) {
                 setStatus(TesterStatus.ERROR);
                 mixpanel.track('failed:' + key);
+
+                setError(e.toString());
             }
         } else {
            setStatus(TesterStatus.LOADED);
@@ -44,8 +47,17 @@ export default (cls, config) => () => {
 
             {status === TesterStatus.ERROR && (
                 <Alert status="error" mt={3}>
-                    <AlertIcon />
-                    There was a problem running test.
+                    <Stack>
+                        <Box>
+                            <AlertIcon />
+                            There was a problem running test.
+                        </Box>
+                        <Box>
+                            <Code>
+                                {error}
+                            </Code>
+                        </Box>
+                    </Stack>
                 </Alert>
             )}