Preserving old build assets through deployments

[AvivonCtrl]

Before opening, please confirm:

• I have checked to see if my question is addressed in the FAQ.
• I have searched for duplicate or closed issues.
• I have read the guide for submitting questions.
• I have removed any sensitive information from my code snippets and submission.

App Id

d1rhgw330dvjl7

AWS Region

eu-west-1

Amplify Hosting feature

Build settings, Deployments, Frontend builds

Question

Generally referring to this issue:
vitejs/vite#11804

There are use cases where preserving previous build assets might be desirable, such as when wanting to serve previous code splitting chunks -- a user's browser may cache older chunks that refer to previous versions of the application.
If these chunks are not available because a new deployment has replaced them.
If a user's browser attempts to fetch a previously cached chunk that no longer exists due to a new deployment, it results in a failed network request, and consequently, a broken user experience.

To my understanding, up until a few releases ago - Amplify's CDN used to serve previous build assets, and it was abruptly changed.

Therefore, having a built-in mechanism in Amplify to ensure that older build assets remain available would be extremely beneficial. This would allow more robust implementation of code splitting, provide better control over cache management, and ensure a seamless user experience even after new deployments.

[arnriu]

I know this is not what you are asking for, but you could use a workaround. In our app, we catch any error, and if the error is about chunks, we clear the service worker, and hard reload the page.

Exemple within a react app:

class ErrorBoundary extends Component {

(...)

    componentDidCatch(error, errorInfo) {
    
        (...)
        
        const isUpdateError = error?.message === 'ChunkLoadError'
        
        if (isUpdateError) {
            navigator.serviceWorker.ready.then(registration => {
                registration.unregister().then(() => {
                    window.location.reload(true)
                })
            })
        } else {
        
        (...)
        
        }
    }
}

[AvivonCtrl]

I know this is not what you are asking for, but you could use a workaround. In our app, we catch any error, and if the error is about chunks, we clear the service worker, and hard reload the page.

Exemple within a react app:

class ErrorBoundary extends Component {

(...)

    componentDidCatch(error, errorInfo) {
    
        (...)
        
        const isUpdateError = error?.message === 'ChunkLoadError'
        
        if (isUpdateError) {
            navigator.serviceWorker.ready.then(registration => {
                registration.unregister().then(() => {
                    window.location.reload(true)
                })
            })
        } else {
        
        (...)
        
        }
    }
}

You're enforcing an entire page reload for a user, this is intrusive.

[arnriu]

It's why I said it's a workaround, not the solution. We would prefer old content cache also. But even if intrusive, I better force reload my user's browser and not having them stuck with a broken app.