Improve error messages for passkey errors (#2445)

We have users complaining about errors that are hard to diagnose because
we don't know the source (e.g. "internal error").

This PR adds helpful context to errors thrown out of passkey interactions.

src/frontend/src/utils/iiConnection.ts

@@ -28,6 +28,7 @@ import {
 } from "$generated/internet_identity_types";
 import { fromMnemonicWithoutValidation } from "$src/crypto/ed25519";
 import { features } from "$src/features";
+import { diagnosticInfo, unknownToString } from "$src/utils/utils";
 import {
   Actor,
   ActorSubclass,
@@ -235,7 +236,12 @@ export class Connection {
         return { kind: "webAuthnFailed" };
       }
 
-      throw e;
+      throw new Error(
+        `Failed to authenticate using passkey: ${unknownToString(
+          e,
+          "unknown error"
+        )}, ${await diagnosticInfo()}`
+      );
     }
 
     const actor = await this.createActor(delegationIdentity);

src/frontend/src/utils/utils.ts

@@ -20,6 +20,13 @@ export function unknownToString(obj: unknown, def: string): string {
   return def;
 }
 
+/** Collect information helpful to diagnose errors */
+export async function diagnosticInfo(): Promise<string> {
+  return `user-agent: "${
+    navigator.userAgent
+  }", is platform auth available: ${await window?.PublicKeyCredential?.isUserVerifyingPlatformAuthenticatorAvailable()}`;
+}
+
 // Helper to gain access to the event's target
 export const withInputElement = <E extends Event>(
   evnt: E,

src/frontend/src/utils/webAuthn.ts

@@ -5,6 +5,7 @@ import {
   DummyIdentity,
   IIWebAuthnIdentity,
 } from "$src/utils/iiConnection";
+import { diagnosticInfo, unknownToString } from "$src/utils/utils";
 import { WebAuthnIdentity } from "@dfinity/identity";
 import { isNullish } from "@dfinity/utils";
 
@@ -24,5 +25,14 @@ export const constructIdentity = async ({
     ? () => Promise.resolve(new DummyIdentity())
     : () => WebAuthnIdentity.create({ publicKey: opts });
 
-  return createIdentity();
+  try {
+    return createIdentity();
+  } catch (e: unknown) {
+    throw new Error(
+      `Failed to create passkey: ${unknownToString(
+        e,
+        "unknown error"
+      )}, ${await diagnosticInfo()}`
+    );
+  }
 };