LG-10457: Track unexpected WebAuthn errors

app/javascript/packages/webauthn/index.ts

@@ -1,6 +1,7 @@
 export { default as enrollWebauthnDevice } from './enroll-webauthn-device';
 export { default as extractCredentials } from './extract-credentials';
 export { default as verifyWebauthnDevice } from './verify-webauthn-device';
+export { default as isExpectedWebauthnError } from './is-expected-error';
 export * from './converters';
 
 export type { VerifyCredentialDescriptor } from './verify-webauthn-device';

app/javascript/packages/webauthn/is-expected-error.spec.ts

@@ -0,0 +1,24 @@
+import isExpectedWebauthnError from './is-expected-error';
+
+describe('isExpectedWebauthnError', () => {
+  it('returns false for any error other than DOMException', () => {
+    const error = new TypeError();
+    const result = isExpectedWebauthnError(error);
+
+    expect(result).to.be.false();
+  });
+
+  it('returns false for instance of DOMException of an unexpected name', () => {
+    const error = new DOMException('', 'UnknownError');
+    const result = isExpectedWebauthnError(error);
+
+    expect(result).to.be.false();
+  });
+
+  it('returns true for instance of DOMException of an expected name', () => {
+    const error = new DOMException('', 'NotAllowedError');
+    const result = isExpectedWebauthnError(error);
+
+    expect(result).to.be.true();
+  });
+});

app/javascript/packages/webauthn/is-expected-error.ts

@@ -0,0 +1,12 @@
+/**
+ * Set of expected DOM exceptions, which occur based on some user behavior that is not noteworthy,
+ * such as declining permissions or timeout due to inactivity.
+ *
+ * @see https://webidl.spec.whatwg.org/#idl-DOMException
+ */
+const EXPECTED_DOM_EXCEPTIONS: Set<string> = new Set(['NotAllowedError', 'TimeoutError']);
+
+const isExpectedWebauthnError = (error: Error): boolean =>
+  error instanceof DOMException && EXPECTED_DOM_EXCEPTIONS.has(error.name);
+
+export default isExpectedWebauthnError;

app/javascript/packages/webauthn/webauthn-verify-button-element.spec.ts

@@ -6,14 +6,17 @@ import type { WebauthnVerifyButtonDataset } from './webauthn-verify-button-eleme
 
 describe('WebauthnVerifyButtonElement', () => {
   const verifyWebauthnDevice = sinon.stub();
+  const trackError = sinon.stub();
 
   before(async () => {
     quibble('./verify-webauthn-device', verifyWebauthnDevice);
+    quibble('@18f/identity-analytics', { trackError });
     await import('./webauthn-verify-button-element');
   });
 
   beforeEach(() => {
     verifyWebauthnDevice.reset();
+    trackError.reset();
   });
 
   after(() => {
@@ -78,13 +81,33 @@ describe('WebauthnVerifyButtonElement', () => {
     });
   });
 
-  it('submits with error name as input on thrown error', async () => {
+  it('submits with error name as input on thrown expected error', async () => {
+    const { form } = createElement();
+
+    verifyWebauthnDevice.throws(new DOMException('', 'NotAllowedError'));
+
+    const button = screen.getByRole('button', { name: 'Authenticate' });
+    await userEvent.click(button);
+    await expect(form.submit).to.eventually.be.called();
+
+    expect(Object.fromEntries(new window.FormData(form))).to.deep.equal({
+      credential_id: '',
+      authenticator_data: '',
+      client_data_json: '',
+      signature: '',
+      webauthn_error: 'NotAllowedError',
+    });
+    expect(trackError).not.to.have.been.called();
+  });
+
+  it('submits with error name as input and logs on thrown unexpected error', async () => {
     const { form } = createElement();
 
     class CustomError extends Error {
       name = 'CustomError';
     }
-    verifyWebauthnDevice.throws(new CustomError());
+    const error = new CustomError();
+    verifyWebauthnDevice.throws(error);
 
     const button = screen.getByRole('button', { name: 'Authenticate' });
     await userEvent.click(button);
@@ -97,6 +120,7 @@ describe('WebauthnVerifyButtonElement', () => {
       signature: '',
       webauthn_error: 'CustomError',
     });
+    expect(trackError).to.have.been.calledWith(error);
   });
 
   it('submits with verify result on successful verification', async () => {

app/javascript/packages/webauthn/webauthn-verify-button-element.ts

@@ -1,5 +1,7 @@
+import { trackError } from '@18f/identity-analytics';
 import verifyWebauthnDevice from './verify-webauthn-device';
 import type { VerifyCredentialDescriptor } from './verify-webauthn-device';
+import isExpectedWebauthnError from './is-expected-error';
 
 export interface WebauthnVerifyButtonDataset extends DOMStringMap {
   credentials: string;
@@ -50,6 +52,10 @@ class WebauthnVerifyButtonElement extends HTMLElement {
       this.setInputValue('client_data_json', result.clientDataJSON);
       this.setInputValue('signature', result.signature);
     } catch (error) {
+      if (!isExpectedWebauthnError(error)) {
+        trackError(error);
+      }
+
       this.setInputValue('webauthn_error', error.name);
     }
 

app/javascript/packs/webauthn-setup.ts

@@ -1,4 +1,10 @@
-import { enrollWebauthnDevice, extractCredentials, longToByteArray } from '@18f/identity-webauthn';
+import {
+  enrollWebauthnDevice,
+  extractCredentials,
+  isExpectedWebauthnError,
+  longToByteArray,
+} from '@18f/identity-webauthn';
+import { trackError } from '@18f/identity-analytics';
 import { forceRedirect } from '@18f/identity-url';
 import type { Navigate } from '@18f/identity-url';
 
@@ -64,7 +70,13 @@ function webauthn() {
           result.transports.join();
         (document.getElementById('webauthn_form') as HTMLFormElement).submit();
       })
-      .catch((err) => reloadWithError(err.name, { force: true }));
+      .catch((error: Error) => {
+        if (!isExpectedWebauthnError(error)) {
+          trackError(error);
+        }
+
+        reloadWithError(error.name, { force: true });
+      });
   });
 }