feat(core): track signin failed reason (#8746)

fix AF-1568

Author: forehalo

packages/frontend/core/src/modules/cloud/error.ts

@@ -1,3 +1,5 @@
+import type { UserFriendlyError } from '@affine/graphql';
+
 export class NetworkError extends Error {
   constructor(
     public readonly originError: Error,
@@ -14,7 +16,7 @@ export function isNetworkError(error: Error): error is NetworkError {
 
 export class BackendError extends Error {
   constructor(
-    public readonly originError: Error,
+    public readonly originError: UserFriendlyError,
     public readonly status?: number
   ) {
     super(`Server error: ${originError.message}`);

packages/frontend/core/src/modules/cloud/services/auth.ts

@@ -12,6 +12,7 @@ import { distinctUntilChanged, map, skip } from 'rxjs';
 
 import type { UrlService } from '../../url';
 import { type AuthAccountInfo, AuthSession } from '../entities/session';
+import { BackendError } from '../error';
 import type { AuthStore } from '../stores/auth';
 import type { FetchService } from './fetch';
 
@@ -111,7 +112,10 @@ export class AuthService extends Service {
         },
       });
     } catch (e) {
-      track.$.$.auth.signInFail({ method: 'magic-link' });
+      track.$.$.auth.signInFail({
+        method: 'magic-link',
+        reason: e instanceof BackendError ? e.originError.type : 'unknown',
+      });
       throw e;
     }
   }
@@ -129,7 +133,10 @@ export class AuthService extends Service {
       this.session.revalidate();
       track.$.$.auth.signedIn({ method: 'magic-link' });
     } catch (e) {
-      track.$.$.auth.signInFail({ method: 'magic-link' });
+      track.$.$.auth.signInFail({
+        method: 'magic-link',
+        reason: e instanceof BackendError ? e.originError.type : 'unknown',
+      });
       throw e;
     }
   }
@@ -166,7 +173,11 @@ export class AuthService extends Service {
 
       return url;
     } catch (e) {
-      track.$.$.auth.signInFail({ method: 'oauth', provider });
+      track.$.$.auth.signInFail({
+        method: 'oauth',
+        provider,
+        reason: e instanceof BackendError ? e.originError.type : 'unknown',
+      });
       throw e;
     }
   }
@@ -186,7 +197,11 @@ export class AuthService extends Service {
       track.$.$.auth.signedIn({ method: 'oauth', provider });
       return res.json();
     } catch (e) {
-      track.$.$.auth.signInFail({ method: 'oauth', provider });
+      track.$.$.auth.signInFail({
+        method: 'oauth',
+        provider,
+        reason: e instanceof BackendError ? e.originError.type : 'unknown',
+      });
       throw e;
     }
   }
@@ -212,7 +227,10 @@ export class AuthService extends Service {
       this.session.revalidate();
       track.$.$.auth.signedIn({ method: 'password' });
     } catch (e) {
-      track.$.$.auth.signInFail({ method: 'password' });
+      track.$.$.auth.signInFail({
+        method: 'password',
+        reason: e instanceof BackendError ? e.originError.type : 'unknown',
+      });
       throw e;
     }
   }

packages/frontend/graphql/src/error.ts

@@ -12,14 +12,17 @@ export interface UserFriendlyErrorResponse {
   stacktrace?: string;
 }
 
-export class UserFriendlyError implements UserFriendlyErrorResponse {
-  status = this.response.status;
-  code = this.response.code;
-  type = this.response.type;
-  name = this.response.name;
-  message = this.response.message;
-  args = this.response.args;
-  stacktrace = this.response.stacktrace;
+export class UserFriendlyError
+  extends Error
+  implements UserFriendlyErrorResponse
+{
+  readonly status = this.response.status;
+  readonly code = this.response.code;
+  readonly type = this.response.type;
+  override readonly name = this.response.name;
+  override readonly message = this.response.message;
+  readonly args = this.response.args;
+  readonly stacktrace = this.response.stacktrace;
 
   static fromAnyError(response: any) {
     if (response instanceof GraphQLError) {
@@ -51,7 +54,9 @@ export class UserFriendlyError implements UserFriendlyErrorResponse {
     });
   }
 
-  constructor(private readonly response: UserFriendlyErrorResponse) {}
+  constructor(private readonly response: UserFriendlyErrorResponse) {
+    super(response.message);
+  }
 }
 
 export class GraphQLError extends BaseGraphQLError {

packages/frontend/track/src/events.ts

@@ -382,7 +382,7 @@ export type EventArgs = {
   createWorkspace: { flavour: string };
   signIn: AuthArgs;
   signedIn: AuthArgs;
-  signInFail: AuthArgs;
+  signInFail: AuthArgs & { reason: string };
   viewPlans: PaymentEventArgs;
   checkout: PaymentEventArgs;
   subscribe: PaymentEventArgs;