Improve error message when a request fails for an unknown reason

src/common/errors.js

@@ -11,3 +11,10 @@ export class AbortError extends Error {
     this.name = 'AbortError';
   }
 }
+
+export class UnknownNetworkError extends Error {
+  constructor (url) {
+    super(`Could not fetch ${url}`);
+    this.url = url;
+  }
+}

src/common/request.js

@@ -1,3 +1,5 @@
+import {UnknownNetworkError} from './errors';
+
 const clampProgress = (n) => Math.max(0, Math.min(1, n));
 
 const request = async (options) => {
@@ -21,7 +23,7 @@ const request = async (options) => {
     };
     xhr.onerror = () => {
       cleanup();
-      reject(new Error(`Couldn't fetch ${url}, are you offline?`));
+      reject(new UnknownNetworkError(url));
     };
   
     if (progressCallback) {

src/locales/en.json

@@ -25,6 +25,10 @@
     "errorMessage": {
       "string": "Message: {error}"
     },
+    "networkError": {
+      "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."
+    },
     "close": {
       "string": "Close"
     },

src/p4/Modals.svelte

@@ -1,7 +1,7 @@
 <script>
   import Section from './Section.svelte';
   import Button from './Button.svelte';
-  import {UserError} from '../common/errors';
+  import {UnknownNetworkError, UserError} from '../common/errors';
   import {error} from './stores';
   import {FEEDBACK_PRIMARY} from '../packager/brand';
   import {_} from '../locales/';
@@ -84,6 +84,11 @@
         <p>
           <Button on:click={closeModal} text={$_('p4.close')} />
         </p>
+      {:else if $error instanceof UnknownNetworkError}
+        <p>{$_('p4.networkError').replace('{url}', $error.url)}</p>
+        <p>
+          <Button on:click={closeModal} text={$_('p4.close')} />
+        </p>
       {:else}
         <p>
           {$_('p4.errorMessage').replace('{error}', $error)}