在 Angular 中记录服务时使用装饰器的正确方法

Question

I have two services one is an Auth service and the other is an Analytics service and they exist in different libraries. The analytics service is used to do event logging. One obvious way I could use it to log the auth.service is injecting the analytics service in the auth service but I'd don't want to use this method, I'd like to use the decorator strategy. What is the correct approach to achieve this? Also is it possible to use a decorator without interfering with the auth.service codebase?

[update] : I've implemented this decorator as shown below (snippet A). The decorator is located @ libs/state/analytics/src/lib/decorators/analytics.decorator.ts I would like to use it on the Auth service as shown in (snippet B).

Then in the decorator there is an analytics function I will call from the analytics.service.ts ie the logEvent() function. How do I inject the logEvent() function from analytics.service in this decorator( The main idea behind this is to log the errors and send them to segment for analytics).

Snippet A

export const Log = () => {

    return function catchError(target: any, propertyName: any, descriptor: any) {
        const method = descriptor.value;

        descriptor.value = function (...args: any) {
            try {
                return method.apply(target, args);
            } catch (error) {
                throw new Error(`Special error message: ${error}`);
       
            }
        };
    }
}

Snippet B : The usecase would be something like this.

  @Log()
  public async loginWithEmailAndPassword(email: string, password: string)
  {
    return this.afAuth.signInWithEmailAndPassword(email, password)
              .then(() => {
                this._logger.log(() => `AuthService.signInWithEmailAndPassword: Successfully logged user in with Email and Password.`);
              })
              .catch((error) => {
                this._throwError(error);
              });
  }

Auth Service libs/state/analytics/src/lib/services/auth.service';

    @Injectable({ providedIn: 'root' })
    export class AuthService {
      constructor(private afAuth: AngularFireAuth,
                  private afs: AngularFirestore,
                  private router: Router,
                  private _toastService: ToastService,
                  @Inject('ENVIRONMENT') private _env: AuthEnvironment
                  )
      {
       }
    
      public getAuth() {
        return this.afAuth;
      }
    
      public async resetPassword(email: string, langCode: string = 'en' )
      {
    
        firebase.auth().languageCode = langCode;
       
        const actionCodeSettings : firebase.auth.ActionCodeSettings = {
          url: this._env.baseUrl
        }
    
        return firebase.auth()
                   .sendPasswordResetEmail( email, actionCodeSettings )
                   .then(() => this._toastService.doSimpleToast('A password reset link has been sent to your email address.'))
                   .catch(() => this._toastService.doSimpleToast('An error occurred while attempting to reset your password. Please contact support.'));
      }



  public async loginWithEmailAndPassword(email: string, password: string)
  {
    return this.afAuth.signInWithEmailAndPassword(email, password)
              .then(() => {
                this._logger.log(() => `AuthService.signInWithEmailAndPassword: Successfully logged user in with Email and Password.`);
              })
              .catch((error) => {
                this._throwError(error);
              });
  }
    
  public createUserWithEmailAndPassword(displayName: string, email: string, password: string, userProfile: UserProfile, roles: Roles)
      {
        return this.afAuth
                   .createUserWithEmailAndPassword(email, password)
                   .then((res) => {
                      this._checkUpdateUserData(res.user, displayName, userProfile, roles);
                      return <User> <unknown> res.user;
                   })
                   .catch((error) => {
                     this._throwError(error);
                   });
      }
...

Analytics libs/authentication/auth/src/lib/services/analytics.service';

export class AnalyticsService {

  user$: Observable<User>;

  constructor(
    private _analytics: SegmentService,
    private _cacheService: CacheService,
    private _userService: UserService<User>) {
    this.user$ = this._userService.getUser().pipe(take(1));
  }


  public logEvent(event: TrackEvent) {
    this.user$.subscribe(user => {
      const userId = user?user.id: null;
      const userEmail = user?user.email: null;
      const displayName = user?user.displayName: null;
      const roles = user?user.roles: null;
      this._analytics.track(event.name, {
        ...event,
        property_id: propID,
        user_id: userId,
        email: userEmail,
        displayName: displayName,
        roles: roles,
      })
    });
  }

  identifyUser() {
    this.user$.subscribe((user: User) => {
      if (user) {
        const cachedUser = this._cacheService.getValueByKey('ajs_user_id');
        if (!cachedUser) {
          const traits = { userId: user.id, email: user.email, displayName: user.displayName }
          this._analytics.identify(user.id, traits);
        }
      }
    });
  };

...


}

Answer 1

I wouldn't overcomplicate this. I would think of EventListeners . You dispatch a log event from one component and the other components listen for such events. You will create a single listener and by the properties they carry - you decide how to use them in analytics service.

You could look into different decorators (HookLogger, MethodLogging) etc. By the looks of your needs, I think Method Decorator to log method params or return value would be needed.

So we make a @Log logger decorator - which is a method decorator, it will log and emit an loggingEvent with the method's properties it was attached to.

Service will listen to loggingEvent , read the props and then call methods on service based on the item passed along.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  constructor(private analyticsService: AnalyticsService) {}

  user = { username: 'Amber', id: '123' };

  @Log({ type: 'info', inputs: true, outputs: true })
  onClick(user = this.user): any {
    //do stuff
    return user;
  }
}

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class AnalyticsService {
  
  constructor() {
    document.addEventListener('loggingEvent', (e) => {
      this.logEvent(e) 
    });
  }

  logEvent(event: any) {
    // do stuff
    console.log('anaylitics got logging event: ', event);
  }
}

Decorator from: https://dev.to/gaetanrdn/logger-decorator-47ob

interface LoggerParams {
  type?: 'log' | 'trace' | 'warn' | 'info' | 'debug';
  inputs?: boolean;
  outputs?: boolean;
}

const defaultParams: Required<LoggerParams> = {
  type: 'debug',
  inputs: true,
  outputs: true,
};

export function Log(params?: LoggerParams) {

  const options: Required<LoggerParams> = {
    type: params?.type || defaultParams.type,
    inputs: params?.inputs === undefined ? defaultParams.inputs : params.inputs,
    outputs:
      params?.outputs === undefined ? defaultParams.outputs : params.outputs,
  };

  return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
    const original = descriptor.value;

    descriptor.value = function (...args: any[]) {
      if (options.inputs) {
        console[options.type]('Logged inputs:', args);
      }

      const result = original.apply(this, args);

      if (options.outputs) {
        console[options.type]('Logged outputs', result);
      }

      const event = new CustomEvent('loggingEvent', { detail: {args, result} });
      document.dispatchEvent(event);

      return result;
    };
  };
}

This could be further enhanced to disabled/enable console logging by getting environment.ts property prod (ie disable console logging when in production).

Working example: https://stackblitz.com/edit/angular-ivy-vibhq5?file=src%2Fapp%2Fanayltics.service.ts

Answer 2

I took some tries about this and ended with that result (simplified some classes of yours):

First, we have AnalyticalService (logs user and logged metod params)

@Injectable({providedIn: 'root'})
export class AnalyticsService {
  user$: Observable<User> = of({ name: 'Yoda' });

  constructor() {}

  public logEvent(event: any) {
    this.user$.subscribe(user => {
      console.log('event', event);
      console.log('user', user);
    });
  }
}

export interface User {
  name: string;
}

In AuthService we are using decorator

@Injectable({providedIn: 'root'})
export class AuthService {

  constructor(private as: AnalyticsService) {}

  @Log()
  public async loginWithEmailAndPassword(email: string, password: string) {
    console.log('logged in');
  }
}

The main challenge here is passing injectable service into decorator :

export function Log() {
  return (
    target: Object,
    propertyKey: string,
    descriptor: PropertyDescriptor
  ) => {
    const originalMethod = descriptor.value;

    descriptor.value = async function (...args) {
      const service = SharedModule.injector.get<AnalyticsService>(AnalyticsService);

      service.logEvent(args);
      const result = originalMethod.apply(this, args);
      return result;
    };
    return descriptor;
  };
}

To make this work we need additional tricky module which need to be imported in ie app.module

@NgModule({
  declarations: [],
  imports: [],
  providers: [AnalyticsService]
})
export class SharedModule {
  static injector: Injector;

  constructor(injector: Injector) {
    SharedModule.injector = injector;
  }
}

The trick of service injection in decorator comes from https://stackoverflow.com/a/66921030/2677292

Sample code of logging user along with method params by decorator is here