Add special error handling for build ID mismatch

src/common/errors.js

@@ -18,3 +18,7 @@ export class UnknownNetworkError extends Error {
     this.url = url;
   }
 }
+
+export class OutdatedPackagerError extends Error {
+
+}

src/locales/en.json

@@ -29,9 +29,17 @@
       "string": "Couldn't download {url}. Make sure you're connected to the internet and try disabling any browser extensions.",
       "context": "Error displayed when an attempt to download a file failed for an unknown reason."
     },
+    "outdated": {
+      "string": "This version of the packager appears to be outdated. Please refresh and try again.",
+      "context": "Error displayed when the packager detects that you are using an old version and that you must refresh to continue."
+    },
     "close": {
       "string": "Close"
     },
+    "refresh": {
+      "string": "Refresh",
+      "context": "Button in some error messages that refreshes the page"
+    },
     "reportBug": {
       "string": "Report Bug"
     },

src/p4/Modals.svelte

@@ -1,7 +1,7 @@
 <script>
   import Section from './Section.svelte';
   import Button from './Button.svelte';
-  import {UnknownNetworkError, UserError} from '../common/errors';
+  import {OutdatedPackagerError, UnknownNetworkError, UserError} from '../common/errors';
   import {error} from './stores';
   import {FEEDBACK_PRIMARY} from '../packager/brand';
   import {_} from '../locales/';
@@ -52,6 +52,8 @@
       closeModal();
     }
   };
+
+  const refresh = () => location.reload();
 </script>
 
 <style>
@@ -71,6 +73,9 @@
     background-color: rgba(0, 0, 0, 0.75);
     word-break: break-word;
   }
+  .technical {
+    font-style: italic;
+  }
 </style>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -89,10 +94,15 @@
         <p>
           <Button on:click={closeModal} text={$_('p4.close')} />
         </p>
-      {:else}
+      {:else if $error instanceof OutdatedPackagerError}
+        <p>{$_('p4.outdated')}</p>
+        <p class="technical">{$error}</p>
         <p>
-          {$_('p4.errorMessage').replace('{error}', $error)}
+          <Button on:click={refresh} text={$_('p4.refresh')} />
+          <Button secondary on:click={closeModal} text={$_('p4.close')} />
         </p>
+      {:else}
+        <p>{$_('p4.errorMessage').replace('{error}', $error)}</p>
         <p>
           <Button on:click={closeModal} text={$_('p4.close')} />
           <a href={FEEDBACK_PRIMARY.link}>{$_('p4.reportBug')}</a>

src/packager/packager.js

@@ -8,6 +8,7 @@ import {buildId, verifyBuildId} from './build-id';
 import {encode, decode} from './base85';
 import {parsePlist, generatePlist} from './plist';
 import {APP_NAME, WEBSITE, COPYRIGHT_NOTICE, ACCENT_COLOR} from './brand';
+import {OutdatedPackagerError} from '../common/errors';
 
 const PROGRESS_LOADED_SCRIPTS = 0.1;
 
@@ -182,7 +183,7 @@ class Packager extends EventTarget {
       });
     }
     if (asset.useBuildId && !verifyBuildId(buildId, result)) {
-      throw new Error('Detected an outdated version of the packager; please refresh and try again.');
+      throw new OutdatedPackagerError('Build ID does not match.');
     }
     if (asset.sha256) {
       const hash = await sha256(result);