search

naver / glad-sdk-web

1 stars 1 forks source link

SPA 연동 중 광고 요청시 에러 정보가 가이드와 다름. #1

Closed rhdtl78 closed 3 years ago

rhdtl78 commented 3 years ago

재현

  1. https://dapi.weatherpong.co.kr/newspic/view/list 접속
  2. 핫 이슈 섹션과 채널 별 뉴스 섹션 사이의 네이버 쇼핑 광고 확인
  3. 광고나 나오지 않을 때 까지 새로고침.
  4. 광고가 나오지 않은 경우 콘솔에서 에러 로그 확인

테스트 환경

GladSDK

Test Browser

  • Chrome 91
  • Naver Whale 2.9.118.38
  • Safari 14.1.1(16611.2.7.1.4)

OS

  • macOS Big Sur 11.4

NodeJS

  • 16.4.2

NPM

  • react@17.0.2
  • typescript@4.3.5

적용 코드 Snippet

sdk.cmd.push(function() {
    sdk.removeAllEventListener();

    sdk.addEventListener(sdk.event.AD_LOADED, (ad) => {
        console.log(Object.assign(ad, { eventType: sdk.event.AD_LOADED }));
        onAdLoaded?.(ad);
    });
    sdk.addEventListener(sdk.event.AD_CLICKED, (ad) => {
        console.log(Object.assign(ad, { eventType: sdk.event.AD_CLICKED }));
        onAdClicked?.(ad);
    });
    sdk.addEventListener(sdk.event.AD_IMPRESSED, (ad) => {
        console.log(Object.assign(ad, { eventType: sdk.event.AD_IMPRESSED }));
        onAdImpressed?.(ad);
    });
    sdk.addEventListener(sdk.event.ERROR, (ad, error) => {
        console.log(Object.assign(ad, error, { eventType: sdk.event.ERROR }));
        onError?.(ad, error);
    });

    sdk.setGlobalConfig(adCallParam.config);

    if (adSlotInfo) {
        const prevAdSlot = sdk.findAdSlot(adSlotInfo.adSlotElementId);
        if (prevAdSlot) {
            sdk.destroyAdSlots([prevAdSlot]);

        }
        const adSlot = sdk.defineAdSlot(adSlotInfo);
        sdk.displayAd(adSlot);
    }
});

에러 상황

위 코드로 표시한 에러 로그

{
  "slot": {},
  "size": undefined,
  "eventType": "ERROR"
}

연동 가이드 내 에러 핸들링 예시

gladsdk.addEventListener(gladsdk.event.ERROR, (ad, error) => {
// Occured error.
    console.debug(`errorCode : ${error.errorCode}, errorSubCode: ${error.errorSubCode}, errorMessage: ${error.errorMessage}, stat: ${error.stat}`);

    if (gladsdk.GfpError.GfpStatCode.NO_FILL === error.stat) {
        // @TODO implements code
        // GFP_NO_FILL
    } else if (gladsdk.GfpError.GfpStatCode.TIMEOUT === error.stat) {
        if (gladsdk.GfpError.GfpErrorCode.LOAD_ERROR_WATERFALL_LIST_REQUEST_FAILED === error.errorCode) {
            // @TODO implements code
            // GFP_NETWORK_ERROR
        } else if (gladsdk.GfpError.GfpErrorCode.LOAD_FAILED_TIMEOUT === error.errorCode) {
            // @TODO implements code
            // GFP_REQUEST_TIMEOUT
        }
    } else {
        // gladsdk.GfpError.GfpStatCode.ERROR
    }
});

등록한 ERROR 이벤트 핸들러에서 전달 받은 error 객체에 errorCode, errorSubCode, error.errorMessage, stat 필드가 없습니다. 별도의 추가 설정이 필요한건가요?

phenix4u commented 3 years ago

안녕하세요. 네이버 박종국입니다.

아래 매체쪽 빌드 청크 파일 기준으로 테스트 해봤을때 에러 객체(error) 기준으로 직접 errorCode, errorSubCode, error.errorMessage, stat 프로퍼티 참조시 정상 참조 됩니다. 문제가 된 이유는 Object.assign을 통해서 error 객체의 값을 참조할 경우에는 정상 처리되지 않으므로, Object.assign로 처리하지 말고 필요에 따라 ad, error는 개별로 처리해주시면 됩니다.

https://dapi.weatherpong.co.kr/static/js/main.4c3086ae.chunk.js

t.addEventListener(t.event.ERROR, function (e, n) {
                              console.log(e, n);
                              console.debug(
                                `errorCode : ${n.errorCode}, errorSubCode: ${n.errorSubCode}, errorMessage: ${n.errorMessage}, stat: ${n.stat}`
                              );
                              console.debug(Object.assign({}, n));
                              console.log(
                                Object.assign(e, n, {
                                  eventType: t.event.ERROR,
                                })
                              )
// Object.assign을 사용하지 말고, ad, error 를 처리하는 함수에 개별 전달되도록 처리 
onError(ad, error);
rhdtl78 commented 3 years ago

직접 참조 동작 확인했습니다. 감사합니다.