Nuxt•3d ago

Sudden uptick of 503 errors on Cloudflare pages for exceeded cpu time

For the last 24hrs, I've been getting 503 errors on my Nuxt app deployed to cloudflare pages. The app is a very small blog app with only 2 articles. I'm on the free tier and my worker usages are nowhere near the free tier limits. The last update that I made to my app was in September of this year, so I haven't changed anything and it's been working fine since then. Any suggestions on where to look? There's no suspicious traffic that I can tell. I have a WAF rule for US-only traffic and banning all other. I don't really see much of a traffic spike in the analytics. DDoS protection is on too. I'm averaging like less than 1400 visitors a day, so that should be well within the limits. My nuxt app is set to SSR, but it's extremely minimal (it's a nuxt-content app) and only has 2 articles. I use NuxtImg, but my images are using cloudflare image transforms to optimize them. I have not tried to just use the <img> tag by itself instead of <NuxtImg>, but I will try that later

2 Replies

kapa.ai•3d ago

Hi @tmorgan497. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights and suggestions regarding your issue with 503 errors on your Nuxt app deployed to Cloudflare Pages. 1. CDN Proxy Settings: Make sure that certain Cloudflare settings are disabled to prevent interference with your Nuxt application. As mentioned in the Nuxt deployment documentation (https://nuxt.com/docs/getting-started/deployment#cdn-proxy), ensure the following options are unchecked/disabled in Cloudflare: - Speed > Optimization > Content Optimization > Disable "Rocket Loader™" - Speed > Optimization > Image Optimization > Disable "Mirage" - Scrape Shield > Disable "Email Address Obfuscation" 2. Nuxt Image and Cloudflare Integration: You mentioned using NuxtImg with Cloudflare image transforms. Ensure that you have properly configured the Cloudflare provider for Nuxt Image. According to the Nuxt Image Cloudflare provider documentation (https://image.nuxt.com/providers/cloudflare), make sure you have enabled Image Transformations for your domain in the Cloudflare dashboard and configured the baseURL in your nuxt.config.ts:

   export default defineNuxtConfig({
     image: {
       cloudflare: {
         baseURL: '<https://your-domain.com'>
       }
     }
   })

   export default defineNuxtConfig({
     image: {
       cloudflare: {
         baseURL: '<https://your-domain.com'>
       }
     }
   })

3. Server-Side Rendering (SSR) and Performance: Since your app is set to SSR, consider the performance implications. If the 503 errors are related to exceeded CPU time, it might be worth investigating if there are any performance bottlenecks in your server-side code. You could try enabling the respectNoSSRHeader experimental feature to allow disabling SSR responses for specific requests:

   export default defineNuxtConfig({
     experimental: {
       respectNoSSRHeader: true
     }
   })

   export default defineNuxtConfig({
     experimental: {
       respectNoSSRHeader: true
     }
   })

This might help in cases where SSR is causing performance issues. 4. Client Fallback: As a potential workaround, you could enable the experimental clientFallback feature. This allows rendering content on the client if there's an error in SSR:

   export default defineNuxtConfig({
     experimental: {
       clientFallback: true
     }
   })

   export default defineNuxtConfig({
     experimental: {
       clientFallback: true
     }
   })

This might help mitigate the 503 errors by falling back to client-side rendering when server-side rendering fails. 5. Dependency Issues: Although you haven't updated your app recently, there's a possibility that a dependency might be causing issues. One user reported problems with the h3-compression dependency in version ^0.3.2. You might want to check your dependencies and consider updating or temporarily removing any that might be causing issues. 6. Cloudflare Pages Build Cache: There have been reports of issues with Cloudflare Pages not properly caching the .nuxt folder. While this might not directly cause 503 errors, it could lead to longer build times and potential timeouts. Keep an eye on your build logs to see if assets are being regenerated unnecessarily on each deployment. Given the sudden nature of the issue without recent changes to your app, it's possible that the problem might be on Cloudflare's end. If the above suggestions don't resolve the issue, you may want to contact Cloudflare support for further assistance. Remember to monitor your application's performance and logs closely after making any changes to identify the root cause of the 503 errors. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@1036649799862202408> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Sudden uptick of 503 errors on Cloudflare pages for exceeded cpu time

Did you find this page helpful?