Describe a scenario where you encountered a build timeout issue while deploying a large static site (e.g., using Gatsby) to Netlify, and explain how you resolved it.
React JS interview question for Advanced practice.
Answer
One challenge I faced was deploying a large Gatsby site to Netlify that had thousands of pages and images. The initial deployments were failing because they were exceeding Netlify's default build time limit of 15 minutes. Troubleshooting Steps: 1. Analyze Build Logs: I first examined the deploy logs on Netlify. I could see the build process was spending an enormous amount of time in the 'sharp' image processing stage, where Gatsby was creating multiple responsive versions of every image. 2. Local Build Analysis: I ran the build locally and timed it to confirm the bottleneck. It was indeed the image processing. 3. Investigate Caching: I noticed from the logs that Netlify's build cache was not being effectively used between builds. Each deployment was re-processing all images from scratch. Solution: The solution was multi-faceted: 1. Install Netlify Cache Plugin for Gatsby: My first step was to install netlify-plugin-gatsby-cache. This plugin is specifically designed to persist the Gatsby cache (.cache and public directories) between Netlify builds. This provided the biggest improvement, as subsequent builds only had to process new or changed images. 2. Optimize Image Queries: I reviewed the GraphQL queries used for images in the Gatsby code. In some places, I was requesting larger-than-needed image resolutions. I adjusted the queries to be more specific, which reduced the workload on the 'sharp' library. 3. Increase Build Time Limit: As a temporary measure while I was optimizing, I contacted Netlify support to request an increase in the build time limit for my site, which they granted. This gave me the headroom to get deployments through while I worked on a permanent fix.
Explanation
Netlify, Vercel, and Firebase offer detailed logs and debugging tools to help pinpoint issues during deployment. Familiarize yourself with these tools for efficient troubleshooting.