Merge pull request #10883 from DestinyItemManager/incompatible-error

Show a more helpful error when the browser is too old to run DIM

config/i18n.json

@@ -142,6 +142,8 @@
     "Title": "Something went wrong"
   },
   "ErrorPanel": {
+    "BrowserTooOldTitle": "Incompatible browser",
+    "BrowserTooOld": "Your browser is too old to use DIM. Please update your browser to the latest version.",
     "Description": "Try loading your inventory in the Destiny 2 Companion App to see if Bungie.net is down.",
     "Troubleshooting": "Troubleshooting Guide",
     "SystemDown": "This affects all Destiny apps, and the DIM team cannot fix or bypass it.",
@@ -1524,4 +1526,4 @@
   },
   "wrong-level": "wrong-level",
   "no-space": "no-space"
-}
+}

docs/CHANGELOG.md

@@ -8,6 +8,8 @@
 
 ## 8.52.0 <span class="changelog-date">(2024-12-22)</span>
 
+* Minimum browser version for DIM has been raised to Chrome 126+ (or equivalent Chromium-based browsers) and iOS 16.4+. DIM may not load at all on older browsers. Firefox and Desktop Safari are still only supported on their most recent two versions. Note that Firefox 115 ESR is not supported, but may work if you're stuck on Windows 7.
+
 ## 8.51.0 <span class="changelog-date">(2024-12-15)</span>
 
 * Added a wishlist refresh button in Settings to help with wishlist development. Note that GitHub can take upwards of 10min to actually reflect your changes. Refreshing won't speed up GitHub.

src/app/shell/ErrorPanel.m.scss

@@ -2,7 +2,8 @@
 @use '../variables.scss' as *;
 
 .errorPanel {
-  margin: 16px 0;
+  margin: 16px auto;
+  max-width: 900px;
   padding: 0.85em;
   background: color.scale($red, $lightness: -90%);
   border-top: 4px solid $red;

src/app/shell/ErrorPanel.tsx

@@ -62,13 +62,19 @@ export default function ErrorPanel({
     }
   }
 
-  const name = underlyingError?.name || error?.name;
-  const message = error?.message || fallbackMessage;
+  let name = underlyingError?.name || error?.name;
+  let message = error?.message || fallbackMessage;
 
   const ourFault = !(
     underlyingError instanceof BungieError || underlyingError instanceof HttpStatusError
   );
 
+  if (message?.includes('toSorted')) {
+    title = t('ErrorPanel.BrowserTooOldTitle');
+    name = 'BrowserTooOld';
+    message = t('ErrorPanel.BrowserTooOld');
+  }
+
   const content = (
     <>
       <h2>

src/locale/en.json

@@ -141,6 +141,8 @@
     "Title": "Something went wrong"
   },
   "ErrorPanel": {
+    "BrowserTooOld": "Your browser is too old to use DIM. Please update your browser to the latest version.",
+    "BrowserTooOldTitle": "Incompatible browser",
     "Description": "Try loading your inventory in the Destiny 2 Companion App to see if Bungie.net is down.",
     "ReadTheGuide": "Read our User Guide (linked from the menu) for troubleshooting steps.",
     "SystemDown": "This affects all Destiny apps, and the DIM team cannot fix or bypass it.",