Forem: Vincent Jang

How to make Useful Decorator in NestJS

Vincent Jang — Mon, 22 Jul 2024 08:16:15 +0000

Hello devs!
I'm backend Developer Phantola (pandora)!
I wanna share a how to make a decorator in NestJS.

First of all, In my opinion, NestJS is more close NodeJS(also TS) DI framework. As you can see a official document in NestJS, They insist agnosticism about framework.

So if you want to a software use DI, NestJS will be attractive option for you.

If you have a little bit of experience using NestJS, Decorator is very powerful and important feature for NestJS.

Personally, I worked in 3yr in web3 platform, I made and manage a few servers, I just want to share a experience about make a decorator more useful.

Let's do this.

This article provide a contents with few steps. and We make a provider decorator(Class decorator)

Decide a Decorator name and Symbol.
Make a module
Implement OnModuleInit
Apply Decorator in your code

Step 1. Decide a Decorator name and Symbol.

In this example, I will make a error catch decorator.
So, Decorator Name will be @CatchError and internal symbol will be CATCH_ERROR_DECORATOR.

// catch-error.decorator.ts
import { SetMetadata } from '@nestjs/common';

export const CatchErrorDecoratorSymbol = Symbol('CATCH_ERROR_DECORATOR')
export const CatchError = () => SetMetadata(CatchErrorDecoratorSymbol, true);

Then you can use @CatchError Decorator in your logics.

Step 2. Make a module for decorator

We make a module for CatchError decorator.
As you know, typescript decorator is work like function composition in math.

You can see a detail description in here

Decorator is more like wrapper function. So we need to define how to our decorator works.

Then, Let's Make a module

// catch-error.module.ts

@Module({
  imports: [DiscoveryModule],
  providers: [],
  exports: [],
})
export class CatchErrorModule implements OnModuleInit {
  constructor() {}

  onModuleInit() {}
}

After make a module, You can import a module which you want.

Step3. Implement `OnModuleInit`

After this step, Our decorator will be define when module init lifecycle

Before we implement a lifecycle function, we need to Inject few services.

// catch-error.module.ts

@Module({
  imports: [DiscoveryModule],
  providers: [],
  exports: [],
})
export class CatchErrorModule implements OnModuleInit {
  constructor(
    private readonly discoveryService: DiscoveryService,
    private readonly metadataScanner: MetaDataScanner,
    private readonly reflector: Reflector

  ) {}

  onModuleInit() {}
}

I talk a services briefly.

DiscoveryService, MetaDataScanner, Reflector is very important for useful metadata.

DiscoveryService can find a provider and controller instances.

MetaDataScanner provide a function for get list of class methods.

At Last, Reflector can use globally, It provides a get/set metadata

Then, start again.

// inside a CatchErrorModule

onModuleInit() {

 return this.discoveryService
      .getProviders() // Find all providers
      .filter((wrapper) => wrapper.isDependencyTreeStatic())
      .filter(({ instance }) => instance && Object.getPrototypeOf(instance))
      .forEach(({ instance }) => {

        // Find and filtering decorator applied classes
        const isDecoratorApplied = this.reflector.get(CatchErrorDecoratorSymbol, instance.constructor)

        if(!isDecoratorApplied) return;

        const providerMetaKeys = Reflect.getOwnMetadataKeys(
          instance.constructor,
        );
        const providerMetaDatas = providerMetaKeys.map((k) => [
          k,
          Reflect.getMetadata(k, instance.constructor),
        ]);


        // Get all methods in provider which decorator applied
       this.metadataScanner.getAllMethodNames(instance).forEach((method) => {

          const methodRef = instance[method];
          const methodMetaKeys = Reflect.getOwnMetadataKeys(methodRef);
          const methodMetaDatas = methodMetaKeys.map((k) => [
            k,
            Reflect.getMetadata(k, methodRef),
          ]);


          // wrapping code here


          // Preserve exist metadatas for method
          methodMetaDatas.forEach(([k, v]) =>
            Reflect.defineMetadata(k, v, instance[method]),
          );

      })

      // Preserve exist metadatas for provider
      providerMetaDatas.forEach(([k, v]) =>
        Reflect.defineMetadata(k, v, instance.constructor),
      );
   })
}

So, In this step, We implement a decorator initializing code use onModuleInit lifecycle. then, If your Nest Application start, and module initialized, your decorator will be decorate a methods.

4. Apply Decorator in your code.


// your provider
@Injectable()
@CatchError()
export class ExampleService {
  constructor() {}

  pong() {
    return {
      code: 200,
      message: 'pong',
    };
  }

  async decoratorTest() {
    throw new Error('Error occurred')
  }
}

Thanks for reading.

This decorator evaluation mechanism is very helpful if you want inject another services, or another dependencies.

I hope a your application more dynamically.
also, I hope this helps even a little bit.

NestJS + Prisma Testing with Test database

Vincent Jang — Sun, 11 Dec 2022 04:52:14 +0000

Hello! My Dev friends!

I found a job few month ago, I took a back-office project, It was very good opportunity to make test environment and write a test code.

So, I want to archiving personal experience and share with you how did I implemented testing environment.

I made NestJS + PrismaORM for back-office server, But This structure was major challenge for me when make test environment.

First of all, NestJS official docs recommend using TypeORM.

TypeORM can mocking in test code, But Prisma is not.
Prisma also supported unit testing and mocking, but it's little lack something.

For example, my service logic(business logic) has Prisma Service (Wrapped PrismaClient with @Injectable decorator) dependency, But it cannot inject inside business logic in test code.

NestJS with @nestjs/testing library allow to make a test module in test code.

Here's my code

auth.service.ts

@Injectable()
export class AuthService {
  constructor(
    private backofficePrisma: PrismaBackofficeService,
    private jwtService: JwtService
  ) {}

// AuthService has a Prisma service dependency.

...

auth.service.spec.ts


describe("AuthService", () => {
  let service: AuthService;

  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      imports: [AuthModule, ServiceModule],
      providers: [AuthService, JwtService],
    }).compile();

    service = module.get<AuthService>(AuthService);
  });

  it("Auth Service should be defined", () => {
    expect(service).toBeDefined();
  });
});

I want to simple test auth service.
So I wrote a code like this.

it("Sign up should be return User model without password", async() => {
    const userCreateDto = {
      email : "user@example.com",
      password : "abcdef1234"
    }

    const userCreatedDate = new Date();
    const user = await service.signUp(userCreateDto);

    expect(user.email).toMatch(userCreateDto.email);
    expect(user).toHaveProperty('crated');
    expect(user).toHaveProperty('updated');
  })

above code not explain how mocking PrismaClient, But I actually did it, but not works.

Because, Mocking Prisma same as Mocking PrismaClient, not a PrismaService

So I failed this way.

I tried to another way. just make a test database using docker.

First I wrote a docker-compose.yml

//...

test:
    command: mysqld --character-set-server=utf8 --collation-server=utf8_general_ci
    container_name: test-backoffice
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: 1
    image: mysql
    ports:
      - "3307:3306"

and setting .env.test


DATABASE_URL="mysql://root@localhost:3307/backoffice"

JWT_SECRET="your_auth_secrets"

also setting package.json for yarn command

"test:watch": "dotenv -e .env.test -- jest --watch --config jest-int.json",

As you can see a jest-int.json
like down below

{
  "moduleFileExtensions": ["js", "json", "ts"],
  "rootDir": ".",
  "testRegex": ".*\\.spec\\.ts$",
  "transform": {
    "^.+\\.(t|j)s$": "ts-jest"
  },
  "collectCoverageFrom": ["**/*.(t|j)s"],
  "coverageDirectory": "../coverage",
  "testEnvironment": "node",
  "moduleNameMapper": {
    "src/(.*)": "<rootDir>/src/$1"
  }
}

And just run command yarn run test:watch and works very well.

It seems like very ugly way.

If you have a method about test business logic with inject mocking prisma without making test db, Please share me..

If I find a new good method, I will share it also.

Thanks for reading. Whatever, whenever I will appreciate your criticizing of code or method.

DFS/BFS with JS

Vincent Jang — Thu, 14 Jul 2022 14:07:37 +0000

Greeting

Hello! I'm junior programmer who restart a career of dev.
Before tech interview, I think I have to remind a basic algorithms
When I was in univ, I'm very weak about algorithms, specifically Graph.
So I re-learned that, and I wanna share this with beginner or very junior programmer.

What is in this content

What is Graph (simple definition)
What is DFS / How to implement it
What is BFS / How to implement it

What is Graph?

You know about Data-structure?
Data-structure is a structures for save data efficiently like array, linked-list, stack, queue, deck etc.

Graph is one of data-structure consiste of vertex(node, data...) and edge(pointer, line, link..).

It seems like down below (Vertex is circle, Edge is green-line).

So, Graph is good data-structure to represent a relation between objects.

What is DFS / How to implement it

DFS (Depth First Search) is a algorithm for graph searching.
DFS is visit a nodes as deep as possible.

if a node has not edge to another node, go back to previous node and do the same thing (visit a nodes as deep as possible)

For example, graph like upper image and search start with 'A' and

step 1 : visit A, and A has edges to 'F', 'B'
step 2 : visit F, and F has not edge.
step 3 : visit B, and B has edges to 'D' , 'C'
step 4 : visit D, and D has edge to 'E'
step 5 : visit E, and E has not edge.
step 6 : visit C, C has not edge. And it's done.

DFS works like this.

How to implement DFS with JS?

According to explained above, DFS basically need a visited/need-to-visit list to store a node.

At first we need a graph, so we will make a object as a graph down below.

const graph = {
 'A' : ['F', 'B'], // 'A' has edges to F, B
 'B' : ['D', 'C'], // 'A' has edges to D, C
 'D' : ['E'] // 'D' has edge to 'E'
}

Okey then, we start to implement.


const dfs = (graph, start) => {
  let visited = []; // save a visited nodes 
  let needVisit = [];  // save a need-to-visit nodes

  needVisit.push(start);  // start search with start node

  // looping for need-to-visit list
  while(needVisit.length !== 0) {
    let node = needVisit.shift(); // take a nodes which in first position in array
    if(!visited.includes(node)){ // if this node is not visited,
      visited.push(node); // add to visited list (now visit)

      const tmp = (!graph[node] ? [] : graph[node]) 
      needVisit = [...tmp , ...needVisit] 
// dfs is depth first, So, nodes connected to this node has more high priority than original nodes in need-to-visit list
    }
  }
  return visited.join(' ');
}

What is BFS / How to implement it

BFS (Breadth First Search) searches nodes in nearest order.

start with 'A' like DFS did,

step 1 : visit A, and A has edges to 'F', 'B'
step 2 : visit F, and F has not edge. return to 'A'
step 3 : visit B, and B has edges to 'D' , 'C'
step 4 : visit D, and D has edge to 'E'
step 5 : visit C, and C has not edge.
step 6 : visit E, E has not edge. And it's done.

BFS works like this.

How to implement BFS with JS?

BFS also need a visited/need-to-visit list to store a node like DFS.

Graph object is same as DFS example and code with explanation is down below.


const bfs = (graph, start) => {
  let visited = []; // save a visited nodes 
  let needVisit = [];  // save a need-to-visit nodes

  needVisit.push(start);  // start search with start node

  // looping for need-to-visit list
  while(needVisit.length !== 0) {
    let node = needVisit.shift(); // take a nodes which in first position in array
    if(!visited.includes(node)){ // if this node is not visited,
      visited.push(node); // add to visited list (now visit)

      const tmp = (!graph[node] ? [] : graph[node]) 
      needVisit = [...needVisit, ...tmp] 
// bfs is breadth first, So, nodes(child nodes) connected to this node has lower priority than original nodes in need-to-visit list
    }
  }
  return visited.join(' ');
}

Finish

Actually D/BFS can be implemente a recursive way.
If you have a time, recommend to try.

Thanks for reading, and sorry for my bad english.
If you have a question then please comment, I'll answer as far as I know.

NestJS + TypeORM Transaction

Vincent Jang — Thu, 16 Jun 2022 07:49:56 +0000

Few weeks ago, I started a new personal project for daily-pattern, I encountered a problem about transaction. It was a severe problem for me. I can't remember a specific version of Typeorm is, but they deprecated a getConnection() method in new version I installed. So I choiced downgrade Typeorm version and use the way I used to.

But, my used way has a tiny(but severe) trouble,
let see a code below.

const queryRunner = getConnection().createQueryRunner();
await queryRunner.connect();
await queryRunner.startTransaction();

try {
  // ...
  await this.modelRepository.save(newOBj);
  await queryRunner.commitTransaction();
} catch(e) {
  // error control logic
}

Can you see a problem?
It was totally stupid.
I thought that QueryRunner observes the DB's CUD action and makes it a transaction when it occurs.

But, It was not.
So I change code like this.

const queryRunner = getConnection().createQueryRunner();
await queryRunner.connect();
await queryRunner.startTransaction();

try {
  // ...
  await querRunner.manager.save(newObj);
  await queryRunner.commitTransaction();
} catch(e) {
  // error control logic
}

It seems like, There is an object called manager in QueryRunner, and this object determines the table according to the model and makes it a transaction.

a new logic work properly, so I just want to note my mistake and improvement. For me, and for someone who having the same problem as me.

Thanks for reading.
Plz comment if you have more nice idea or solution.

Ref --
Cover Img ref : https://miro.medium.com/max/1400/1*GafbQWGfs0xDuH_A0z08wg.png

WSL2 `startingDirectory` doesn't work..

Vincent Jang — Wed, 16 Mar 2022 06:10:44 +0000

Hello dev friends!
Today I solve kind of simple problem but it might bothers you,
Problem is...

Starting Linux Directory in WSL2 is doesn't work properly

It is little bother me, so I want to fix it follow down below;

{
  "startingDirectory" : //wsl$/Ubuntu/home/<my-user-name>
}

but It's not work.
Maybe this problem is related to using zsh(oh-my-zsh like..)

So I came up a little trick, through edit ~/.zshrc
Insert this line at end of ~/.zshrc

If you use bash, edit ~/.bashrc same way.


# for setting start directory for terminal when wsl2 setting not work.
cd ~/

then, It work nice! But I felt very tiny gap time for switching directory to ~/, Fortunately I feel better now.

If I find a better solution for this problem, I'll be back to post it.

I hope you don't spend your time on the same problem as me.
Thanks.

Official Method Found!

I found MS official Document about setting profile with Window Terminal.
If you using over Window Terminal version 1.12.3472.0, Window Terminal can references Linux file system directly, so edit setting like down below;

{
  "startingDirectory": "/home/<username>",
}

Reference : Window Official Doc

How to appear your custom hostname in iTerm + p10k + oh-my-zsh

Vincent Jang — Sat, 12 Mar 2022 09:12:55 +0000

Recently, I re-learned about VIM, So I want to customize my terminal.

Actually, I already used a terminal iTerm with Oh-My-Zsh
But when I installed and set powerlevel10k, and something occurred.

HostName is missing.... :(

So I decided to bring missing hostname again.

Step 1 : Edit `~/.p10k.zsh`

I used Vim for edit.
You can easily find POWERLEVEL9K_LEFT_PROMPT_ELEMENTS
Just insert host in POWERLEVEL9K_LEFT_PROMPT_ELEMENTS where you want.

vim ~/.p10k.zsh

# in .p10k.zsh
typeset -g POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(
    os_icon                 # os identifier
    host                    # hostname
    dir                     # current directory
    vcs                     # git status
    prompt_char             # prompt symbol
  )

Step2 : customize hostname.

Note : Customize hostname may cause unexpected side effects.

scutil --set HostName
HostName: #input hostname you want

Step3 : Confirm result

source ~/.p10k.zsh

I successfully done.

I think is silly problem, but It really bother me..
I hope it will help people who wander like me.

Thank you for reading.

How to customize HTTP Exception In NestJS

Vincent Jang — Thu, 17 Feb 2022 04:46:26 +0000

프로젝트가 조금씩 진행되어 질 때 마다, 코드의 양이 많아 질 때마다, 다루는 데이터가 많아 질 때 마다, 서버는 최대한 견고하게 작동해야 하며, 그 응답도 통일성이 있어야 한다고 생각한다.

응답은 물론, 우리의 소망과는 별개로 오류는 어디서든 항상 존재 할 수 있으며, Front-end 에서 응답과 오류를 잘 가공하여 로직을 처리하려면, 서버에서는 항상 통일된 형태의 객체로 응답/오류를 전해주어야 한다.

현재 진행중인 프로젝트에서는 다음과 같은 응답 객체 양식을 지켜주고 있다. 에러가 난다면 다음과 같은 형식으로 내려준다.

{
  "status" : 401, // Http Status Code
  "code" : "UNAUTHORIZED_USER" // string Response code
  "error" : true // is error occurred?
  "message" : "권한이 없습니다." // message for request,
  "data" : // response data, original error object
}

하지만, NestJS의 기능 중에 다음과 같은 기능이 존재한다.

export class SomethingDto {
  @IsNotEmpty()
  field : number
}

를 사용한 Validation과,

throw new UnauthorizedException(object, 'description');

과 같은 NestJS 가 지원하는 HttpException 이다.

위와 같은 기능을 사용하면서 NestJS 가 자동적으로 던지는 응답(에러)객체는 다음과 같다

{
  "statusCode" : HttpStatusCode,
  "message" : string[],
  "error" : string
}

따라서 프로젝트에서 사용하는 형식으로 응답 객체를 바꾸어 주어야 한다.

이때 사용한 것이 예외 처리 레이어를 두는 방식이며, Filter 를 사용한다. 다음은 내가 사용한 방식이다.
피드백이 있다면 언제든 부족한 점을 알려주면 감사드린다.

http-exception.filter.ts

@Catch()
export class HttpExceptionFilter implements ExceptionFilter {
  catch(exception: Error, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const res = ctx.getResponse<Response>();
    const req = ctx.getRequest<Request>();
  }

    if(!(exception instanceof HttpException)) {
      exception = new HttpException(new ResponseDto(~~),     
      HttpStatus.Internal_Server_Error);
    }

    let response = (exception as HttpException).getResponse();

    // 시스템이 자동으로 던진 에러에는 statusCode가 존재함.
    if(response['statusCode']) {
      // your transform response object
    }

    const log = {
      timeStamp: new Date();
      url: req.url;
      response
    };

    Logger.error(long)

    res.status((exception as 
    HttpException).getStatus()).json(response);
}

이렇게 작성한 이후 main.ts 에서 다음과 같이 사용했다.

// 중략

app.useGlobalFilters(new HttpExceptionFilter());
await app.listen(8080);

// 후략

이렇게 했더니 다음과 같이 시스템에서 던진 에러메세지가 잘 변형되어 내려왔다.

나와 같이 헤메이는 초보자에게 힘이 되었으면 좋겠다.

Reference

https://wikidocs.net/158651

NestJS Repository DI using @InjectRepository is not working properly

Vincent Jang — Mon, 14 Feb 2022 11:45:00 +0000

NestJS 의 Service 에서는 다음과 같이 레포지토리를 연결한다.

constructor(
    @InjectRepository(UserRepository)
    private userRepository: UserRepository
    ...
    ) {}

NestJS 공식 도큐먼트에서는 위와같이 사용하는것을 권장하는 듯 하다만,

이렇게 개발하던 도중..

갑자기 TypeOrm 에서 기존까지 잘 작업이 되다가 갑자기 띄운 500 에러와 함께 콘솔에 다음과 같은 오류를 띄웠다

Typeorm Cannot read property 'findOne' of undefined

처음엔 TypeOrm 의 설정부분에서 .env 파일의 비동기화 문제로 모듈이나 레포지토리가 undefined 일 수 있다고 생각하여 콘솔로 찍어 보았지만, 해당 메소드 (.findOne) 와 모듈, 레포지토리는 정상적으로 존재했다.

다음엔 TypeOrm 모듈이 문제일 수 있다고 판단하여 node_modules 를 싹 지우고 다시 npm install 을 해보았지만 증상은 그대로였다.

Stack-Overflow 에 검색 해본 결과 다음과 같은 해결책을 제시받았다.


private repository: Repository
constructor(private readonly connection: Connection) {
  this.repository = this.connection.getCustomRepository(Repository);

}

데코레이터 @InjectRepository 를 사용하지 않고
자바와 같이 private 멤버로 명시적으로 선언하고 생성자에서 직접적으로 인스턴스를 넣어주는 방식을 사용하는 것이다.

적용해 본 결과성공적으로 동작하였다.

이유를 찾아보려고 했지만 쉽지 않아 먼저 스스로 시도했던 방법과 해결책만 간단히 적어둔다.

JWT secret with .env file but error occur in NESTJS

Vincent Jang — Fri, 11 Feb 2022 05:21:50 +0000

Error Occured

최근 사이드 프로젝트를 시작하면서 NestJS 를 다루게 되었다.
JWT 모듈을 .env 파일을 이용하여 다루던 도중 다음과 같은 에러를 만나게 되었다.

Problem Solving Method

아무리 코드를 뒤져봐도 어떤 문제가 보이지 않아 구글링을 시작했을 때
다음과 같은 해결책을 찾을 수 있었다.

Before Code

기존의 내 코드는 다음과 같았다.

// in auth.module.ts
JwtModule.register({
      secret : process.env.JWT_SECRET,
      signOptions: {
        expiresIn: 60 * 60
      }      
    }),

이 코드는 .env 에 있는 JWT Secret 을 불러와 사용하는 코드였는데,
env variable 를 불러오는 것과 애플리케이션이 실행되는 것은 비동기 처리라는 것을 알게되었다.

따라서 JwtModule 에서는 다음과 같은 method 를 지원했다.
JwtModule.registerAsync({})

해당 메소드는 환경변수를 읽을 때 까지 모듈 설정을 유보할 수 있도록 도와준다.

따라서 다음과 같이 작성하여 해결하였다.

After Code

JwtModule.registerAsync({
      // .env 에 등록되어 있는 것을 가져오는것이 비동기 작업이므로, 초기화 시에 env 요소를 못불러온 상태일 수 있음.
      // 따라서 registerAsync, ConfigService 를 사용해 동기적으로 작업함
      inject: [ConfigService],
      useFactory: (config: ConfigService) => ({
        secret: config.get<string>('JWT_SECRET'),
        signOptions : {
          expiresIn: 60 * 60
        }
      })  
    }),

나와 같은 뉴비 개발자들에게 도움이 되었길 바란다.

이 글의 구글링 결과 원문을 찾지 못하였습니다. 찾는대로 레퍼런스를 기록합니다.