문제

프로젝트 내에서 static image를 import 하여 사용하는 경우가 많다.
어느 날부터 회사 내에서 안드로이드 기기에서 이상한 이미지가 보여지고 있다는 버그 리포트가 생겼다.

문제의 이미지

원래 보여져야한 이미지

재현 경로

해당 문제는 React Native로 구현된 앱을 Android에서 업데이트 설치 시 발생하였다.
조금 찾아보니 facebook의 fresco 2.6.0 버전에서 이상하게 static image를 mapping하는 이슈가 있다고 하였다.

관련 이슈

해결

해결책 1

위 이슈 링크를 보면 알 수 있는 것 처럼, fresco 2.6.0 버전으로 올리며 발생한 문제이다. 따라서 fresco를 2.5.0 버전으로 다운그레이드하면 해결 될 것이라고 생각했다.

해결책 2

s3에 이미지를 올리고 static image가 아닌 remote image를 source:{uri:[이미지 URL]}로 수정하면 해결될 것이라고 생각했다.

따라서

처음에 해결책 1로 해결하려고 했다. 단순히 버전만 다운그레이드하여서 새로운 빌드로 확인해보았다. 하지만 이는 해결책이 되지 못했다. 예상컨데 다른 react-native android 관련 라이브러리에서 fresco 2.6.0 버전을 사용하는 것 같다.
배포 빌드가 몇 시간 남지 않아서 해결책 2를 통해 임시로 해결하고 빌드를 올렸다.

하지만 이렇게 찜찜하게 빌드를 올리니 찜찜했고, 모든 static image에 리스크를 두면서 해당 이미지만 해결하기는 싫었다 😭

그래서

조금 찾아보니 build.gradle에 dependencies를 직접 커스터마이징할 수 있는 문법이 있었다! 그래서 바로 적용하였다 !
참고

android/app/build.gradle

...
configurations.all {
        resolutionStrategy {
            force "com.facebook.fresco:fresco:2.5.0"
            force "com.facebook.fresco:animated-gif:2.5.0"
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    //noinspection GradleDynamicVersion
    ...

회사 프로젝트에서는 static image 중 gif 확장자도 사용하고 있기 때문에 fresco의 animated-gif 라이브러리도 사용하고 있다. 그래서 fresco의 fresco와 animated-gif의 버전을 강제로 2.5.0으로 맞춰주었다!

그랬더 재현경로에서도 해결 완료 !!! 🥳

왜?

이슈를 올린 분의 commit은 다음과 같다

imagepipeline/src/main/java/com/facebook/imagepipeline/request/ImageRequest.java

As-is

    mRequestPriority = builder.getRequestPriority();
    mLowestPermittedRequestLevel = builder.getLowestPermittedRequestLevel();
    mCachesDisabled = builder.getCachesDisabled(); // 삭제
    mIsDiskCacheEnabled = builder.isDiskCacheEnabled();
    mIsMemoryCacheEnabled = builder.isMemoryCacheEnabled();
    mDecodePrefetches = builder.shouldDecodePrefetches();

To-be

    mRequestPriority = builder.getRequestPriority();
    mLowestPermittedRequestLevel = builder.getLowestPermittedRequestLevel();

    mIsDiskCacheEnabled = builder.isDiskCacheEnabled();

    int cachesDisabledFlags = builder.getCachesDisabled(); // 추가
    if (!mIsDiskCacheEnabled) {
      // If disk cache is disabled we must make sure mCachesDisabled reflects it
      cachesDisabledFlags |= CachesLocationsMasks.DISK_READ | CachesLocationsMasks.DISK_WRITE;
    } //분기 추가
    mCachesDisabled = cachesDisabledFlags; //추가

    mIsMemoryCacheEnabled = builder.isMemoryCacheEnabled();
    mDecodePrefetches = builder.shouldDecodePrefetches();

해당 commit의 주석에 따르면 disk cache가 불가능한 상태이면 mCachesDisabled에도 반영해야하는데 이전에는 반영하고 있지 않았던 것 같다.

하지만..

하지만 facebook은 fresco repository를 더 이상 관리하지 않는지 해당 개발자가 해결하여 PR을 올렸고 main에 머지가 되었지만 2.6.1 버전을 아직 배포해주지 않고 있어서, 현재로서는 2.5.0 fresco version을 사용하는 것이 유일한 해결책인 것 같다 ..

그래도 임시 방편으로 해결함에 그치지 않고 서칭을 통해서 근본적인 원인을 찾아서 해결하여 회사 내의 버그를 해결한 좋은 경험이었다 🥰