프론트에서 발생한 에러로그 남기기..

요새 프론트단에서 버그가 발생하면,

error log를 남기는것에 대해 고민이있습니다.

회원이 문제있다고 고객센터에 문의오면

어떻게 그 회원 아이디로 접속해서 개발자도구 열어보고

에러로그찍히는거있는지 확인할수가업스니...

저라도 스스로 배워서 프로젝트에 적용해보려구요.

다행히 검색해보니 꽤 많은 자료가 나오지만

실력부족으로 내일당장 회사에 적용시키기엔 어려울거같고,

간단한것부터 배워보고 적용해봤어요.

아직은 애들장난 수준인거 같네요.

function printError()
{
    try
    {
        // ReferenceError : i is not defined 뜰 예정
        console.log(i);

    }catch(e)
    {
        $.ajax({
            type : "POST",
            data : e.toErrorObject(),
            url: "/test/frontErrorLog.do"
        });
    }
}

Error.prototype.toErrorObject = function () {

    return {
        prototypeName: this.name,
        message: this.message,
        toString: this.toString(),
        stackTrace: this.stack
    };
};

    @Resource(name = "frontErrorValidation")
    private ArgumentValidation<HashMap<String, String>> frontErrorValidation;
    
    @PostMapping("/test/frontErrorLog.do")
    @ResponseBody
    public HashMap<String, String> frontErrorLog(@RequestParam HashMap<String, String> paramMap, HttpSession session, HttpServletResponse response)
    {
        HashMap<String, String> resultMap = new HashMap<>();

        try
        {
            HashMap<String, String> validatedErrorMap = frontErrorValidation.validate(paramMap);

            System.out.println("#### Error in Front ####");
            System.out.println(validatedErrorMap.get("stackTrace"));
            System.out.println("#### Member Info ####");
            System.out.println("memberIdx = " + session.getAttribute("memberIdx"));

            resultMap.put("result", "error log 남기기 성공");
            response.setStatus(HttpServletResponse.SC_OK);

        }catch(IllegalArgumentException e)
        {
            resultMap.put("result", "error log 남기기 실패. 에러로그를 남기는데 필요한 매개변수가 없음.");
            response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
        }

        return resultMap;
    }

이건 여담이지만....

현재 저희 프로젝트 (상용 서비스중)는,

웹 페이지에 NaN% 이런 데이터가 박혀있으면,

QA팀이 됐건, 다른 사용자가 됬건 간에 누가 알려주지않으면

아무도 그전에 알수있는 시스템이 없는걸로 보여요.

(서버단에서 생기는 문제는 참 시스템이 잘되있는데 말이죠...)

그래서 목표는..

웹페이지에  NaN이런글자 박혀있거나,

사용자의 데이터가 있는데 화면에 사용자 데이터가 안나온다거나, (이름같은거.. 자산현황같은거..)

음 2가지케이스밖에 생각이 안나지만,

프론트 버그가 생기면 QA팀에서 스샷찍거나 고객이 문의하기전에

개발자가 파악할 수 있는 수단을 만들고싶어요.

(저희는 서버단에서 문제생기면 탤레그램 많이 쓰니, 저도 탤레그램으로 알람을 보내보려구요)