google cloud logging next js

구글 로깅을 위해서 라이브러리가 있길래 라이브러리를 다운 받았다.
npm install @google-cloud/logging

그리고 테스트를 하기 위해 공식문서에서 나온 코드들을 ts파일로 만들어서 작성하고 함수를 호출해서 사용 해봤다.

하지만 에러가 와랄랄라 엄청나게 나게 되었다.

fs모듈을 찾을수 없다는 거였는데 fs는 node에서 사용되는 것까지는 알고 있었다. 문제가 뭔지 알고 싶어서 검색한 결과

한 블로그에서 이해 할수 있었다.

fs모듈은 프로그램이 실행되는 서버의 파일시스템을접근하고 자하는 것!
하지만 client side에서는 서버에 있는 파일에 접근하려고 하면 당연히 오류가 나는 것이다.

그래서 막아 놓은 것이라고 한것! 스택오버 플로우에는 바로 어떻게 해결하는지 웹팩에 설정해라 라고 말을 하는데 왜 설정해야 하는지 이유를 모르고 썼었는데 이 블로그를 통해서 정확하게 알게 되었다.

https://ppsu.tistory.com/74

지피티에게 물어보니 next 에서 사용하려고 한다면 서버시이드 코드에 사용하라고 한다.

하지만 나는 react-query를 쓰면서 통신할때 로깅을 남기고 싶은걸.. 이라고 하니까 방법을 또 알려줬다.

그래서 api 폴더로 api를 만들수 있어서 이를 이용해보기로 하였다.

API route 활용하여 로깅 실행해보기

시작해보자

우선 google cloud 에서 서비스 키가 있어야 한다.

검색창에 service account라고 치고 키를 만들어준다. key를 생성하고 json으로 다운 받아야 한다.

다운 받은 json 파일을 작업 코드폴더의 루트 경로에 넣어주자.

gitignore 에 넣어주는 것을 잊지말자 ㅎ

그리고 .env 파일에

GOOGLE_APPLICATION_CREDENTIALS=/path/to/your-service-account-file.json

이렇게 넣어준다. (뒤에 value값은 json경로의 위치 path를 넣어주면된다 ^^ )

라이브러리는 설치 했지만 안내를 위해 다시 적어둔다

npm install @google-cloud/logging

나는 nextjs 14를 사용하기 때문에 app경로에서 logger route api를 만들어 주었다.
코드는 공식문서에서 가져온것을 route api 에 맞게 변형해주었다.

app>api>logger>route.ts
import { ErrorLoggerBodyType, ServerityType } from "@/public/commonFunction";
import { Logging } from "@google-cloud/logging";
import { NextRequest, NextResponse } from "next/server";
const projectId = process.env.NEXT_PUBLIC_GCP_LOGGING_PROJECT_ID; // 이거는 JSON받은 거에 있다. 따로 환경 설정해주었다. 
const logName = “원하는 이름 설정 ”;
const logging = new Logging({ projectId });
const log = logging.log(logName);

export async function POST(request: NextRequest) {
  const reqBody: ErrorLoggerBodyType = await request.json();

  const metadata: {
    resource: { type: "global" };
    severity: ServerityType;
  } = {
    resource: { type: "global" },
    severity: reqBody.severity,
  };
  const entry = log.entry(metadata, reqBody.message);
  try {
    await log.write(entry);
    return new NextResponse("Send to error message success!", { status: 200 });
  } catch (error) {
    return new NextResponse("error!", { status: 500 });
  }
}

severity 는 여러 종류가 있다.

1. DEFAULT: (0) - 기본 로그 수준. 특정 심각도가 지정되지 않은 경우 사용됩니다.
2. DEBUG: (100) - 디버그 또는 추적 정보를 나타냅니다.
3. INFO: (200) - 일반 정보 메시지.
4. NOTICE: (300) - 정상적인 조건에 대한 알림 메시지.
5. WARNING: (400) - 경고 메시지. 주의가 필요하지만 즉각적인 조치는 필요하지 않습니다.
6. ERROR: (500) - 오류 메시지. 즉각적인 조치가 필요할 수 있습니다.
7. CRITICAL: (600) - 중요한 오류. 심각한 문제를 나타냅니다.
8. ALERT: (700) - 즉각적인 조치가 필요한 상황을 나타냅니다.
9. EMERGENCY: (800) - 시스템이 사용할 수 없거나 중대한 문제가 발생했음을 나타냅니다.

알맞게 설정해주면 된다.

api를 만들었으니

이제 나는 ‘api/logger’ 로 접근이 가능하다 !

자주 사용할수 있게 공용 함수로 만들어 주고 테스트를 진행하였다.

잘된다 !