show an error if the import goes badly

src/views/AccountViewView.vue

@@ -976,6 +976,7 @@ import { AxiosError } from "axios";
 import { Buffer } from "buffer/";
 import Dexie from "dexie";
 import "dexie-export-import";
+// @ts-ignore - they aren't exporting it but it's there
 import { ImportProgress } from "dexie-export-import";
 import { LeafletMouseEvent } from "leaflet";
 import * as R from "ramda";
@@ -1621,9 +1622,23 @@ export default class AccountViewView extends Vue {
    */
   async submitImportFile() {
     if (inputImportFileNameRef.value != null) {
-      await db.delete();
+      await db.delete()
+        .then(async () => {
           await Dexie.import(inputImportFileNameRef.value as Blob, {
             progressCallback: this.progressCallback,
+          })
+        })
+        .catch((error) => {
+          logger.error("Error importing file:", error);
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error Importing",
+              text: "There was an error importing that file. Your contacts may have been affected, so you may want to use the other import method.",
+            },
+            5000,
+          );
         });
     }
   }