I’ve recently started having some issues with deploying changes on my Gatsby site. I’ve just crossed the 1000 mark of the number of images stored on my blog so I’m assuming that may be part of the problem. I do a small amount of compressing before I store my images in my repo, so each image is generally in the 1 - 4 MB range.
I recently did a little bit of an UI overhaul to my site, which I’m not sure if that somehow also contributed to the problem.
Netlify site name: https://master--emgoto.netlify.app/
Some examples of build failures
- Build failure after only 4min:
Netlify
With a cryptic “Build failed due to a user error: Build script returned non-zero exit code: 2”. I kept getting this multiple times, did not know how to fix it.
-
I also got a build failure due to timeout after 18m:
Netlify -
I managed to get one recent build to pass in 11min:
Netlify
Interestingly, this one had 8 warning logs like this:
1:26:12 PM: warning This query took more than 15s to run — which might indicate you're querying too much or have some unoptimized code:
File path: /opt/build/repo/src/blog-hiking/templates/blog-post.js?__contentFilePath=/opt/build/repo/hiking/mt-meakan/index.mdx
1:26:12 PM: URL path: /mt-meakan/
I didn’t notice these warning logs locally, only on my Netlify build.
I’m assuming that this is related to why my build gets timeouts and/or gets killed, but I’m wondering how do I debug this further? Is there anything I can do locally? I got this across multiple pages. The one thing they have in common is that they all have images.
I did make some changes to my createPages call in gatsby-node.js since that was taking up to 15s (it is now down to under 1s) but that hasn’t solved the issue.
My blog posts are rendering in MDX, so the images are rendered on the site just via me doing  and then Gatsby does its magic after that.
If it helps, e.g. for the templates/blog-post.js file that was mentioned in the warning file above, it looks something like this (cut out some lines for brevity’s sake) - it doesn’t really stand out as me doing anything out of the ordinary?
import React from 'react';
import { graphql } from 'gatsby';
import Content from '../ui/content';
export { Head } from '../ui/seo';
const BlogPost = ({
data: {
mdx: {
frontmatter: {
title,
// etc.
},
},
},
children,
}) => {
// Content is a component that just renders stuff like headers
// based on the frontmatter that's passed in, plus the post content itself.
return (
<>
<Content
title={title}
// passing in other frontmatter etc
>
{children}
</Content>
</>
);
};
export const pageQuery = graphql`
query ($slug: String!) {
mdx(fields: { slug: { eq: $slug } }) {
frontmatter {
title
date(formatString: "DD MMMM YYYY")
// etc some other things
}
}
`;
export default BlogPost;
