Bug push to production - Preview to prod working, but 404 in real production

Marving · November 9, 2022, 6:56pm

Hello,

I am facing a potential bug that I had not experienced before:

When I create a document of any custom type (I have tried two differents custom type, same bug), I am able to create, click on publish, and preview the created document that has been published.

However, when I remove the "preview" and try to access the same URL in real production, I am experiencing an 404 error.

Would anybody be kind as helping me please?

Here's the codee in _app.js:

import Head from "next/head";
import "../styles/globals.css";
import Layout from "../components/layout/Layout";
import { config } from "@fortawesome/fontawesome-svg-core";
import "@fortawesome/fontawesome-svg-core/styles.css";
config.autoAddCss = false;

import { SessionProvider } from "next-auth/react";
import { useSession } from "next-auth/react";

import Link from "next/link";
import { PrismicProvider } from "@prismicio/react";
import { PrismicPreview } from "@prismicio/next";
import { dataaijobs } from "../prismicio";
import { useRouter } from "next/router";

// import { QueryClient, QueryClientProvider } from "react-query";


function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const canonicalUrl = (
    `https://dataai-jobs.com` + (router.asPath === "/" ? "" : router.asPath)
  ).split("?")[0];
  return (
    // <QueryClientProvider client={queryClient}>
    <PrismicProvider
      internalLinkComponent={({ href, ...props }) => (
        <Link href={href}>
          <a {...props} />
        </Link>
      )}
    >
      <SessionProvider session={pageProps.session}>
        <Layout>
          <Head>
            <meta
              name="viewport"
              content="width=device-width, initial-scale=1"
            />
            <link rel="icon" type="image/png" href="/images/favicon-daj.png" />
            <link rel="canonical" href={canonicalUrl} />
          </Head>

          <PrismicPreview repositoryName={dataaijobs}>
            {Component.auth ? (
              <Auth>
                <Component {...pageProps} />
              </Auth>
            ) : (
              <Component {...pageProps} />
            )}
          </PrismicPreview>
        </Layout>
      </SessionProvider>
    </PrismicProvider>
    // </QueryClientProvider>
  );
}

// Client side protection authentification through component:

function Auth({ children }) {
  const { status } = useSession({ required: true });

  // when `required: true` is passed,
  // `status` can only be "loading" or "authenticated"
  if (status === "loading") {
    return <div>Loading...</div>;
  }

  return children;
}

export default MyApp;

Pau · November 10, 2022, 5:52pm

Hello @Marving, thanks for reaching out.
Which URL are you trying to access, is this document published and accessible in the production version of your site?

Marving · November 10, 2022, 6:14pm

Hello @Pau, thank you for your reply!

Let us take this one example: https://dataai-jobs.com/this-is-a-just-a-test

It has been push to prod, I can see the end result in preview > Production

But when leaving the preview mode, it is not available. I get a 404 trying to access the page.

Pau · November 10, 2022, 6:16pm

Have you tried testing the entire pages in development mode?
Maybe the project isn't building correctly, and the changes are only in the API still but arent' rendered in the front-end.

Marving · November 10, 2022, 7:25pm

I think I have figured it out....

Seems like if I do not provide any ogImage, metaTitle & metaDescription in the way I have set it up, the publication bug.

I will run some more tests to make sure of it

import React from "react";
import Head from "next/head";

import Hero from "../components/ui/PillarPages/Hero";

import { SliceZone } from "@prismicio/react";
import * as prismicH from "@prismicio/helpers";

import { createClient } from "../prismicio";
import { components } from "../slices";
import { useRouter } from "next/router";
// import { DefaultLayout } from "../layouts";

const Page = ({
  metaTitle,
  metaDescription,
  ogImage,
  page,
  title,
  upperTitle,
  description,
}) => {
  const router = useRouter();
  const currentRoute = router.pathname;
  return (
    <React.Fragment>
      <Head>
        <title>{metaTitle}</title>
        <meta name="description" content={metaDescription} />
        {/* <!-- Twitter Card data --> */}
        <meta name="twitter:card" content="summary" />
        {/* <meta name="twitter:site" content="@publisher_handle" /> */}
        <meta name="twitter:title" content={metaTitle} />
        <meta name="twitter:description" content={metaDescription} />
        {/* <meta name="twitter:creator" content="@author_handle" /> */}
        {/* <-- Twitter Summary card images must be at least 120x120px --> */}
        {ogImage && <meta name="twitter:image" content={ogImage} />}

        {/* <!-- Open Graph data --> */}
        <meta property="og:title" content={metaTitle} />
        <meta property="og:type" content="website" />
        <meta property="og:url" content={currentRoute} />
        {ogImage && <meta property="og:image" content={ogImage} />}
        <meta property="og:description" content={metaDescription} />
        <meta property="og:site_name" content="Dataai Jobs" />
      </Head>

      {page.data.uppertitle && page.data.title && page.data.description && (
        <Hero upperTitle={upperTitle} title={title} description={description} />
      )}
      <SliceZone slices={page.data.slices} components={components} />
    </React.Fragment>
  );
};

export default Page;

export async function getStaticProps({ params, previewData }) {
  const client = createClient({ previewData });

  const page = await client.getByUID("pillar_page", params.uid);

  return {
    props: {
      metaTitle: page.data.meta_title,
      metaDescription: page.data.meta_description,
      ogImage: page.data.og_image.url,
      page: page,
      title: page.data.title,
      upperTitle: page.data.uppertitle,
      description: page.data.description,
    },
  };
}

export async function getStaticPaths() {
  const client = createClient();

  const pages = await client.getAllByType("pillar_page");

  return {
    paths: pages.map((page) => prismicH.asLink(page)),
    fallback: false,
  };
}

thank you!

Marving · November 11, 2022, 10:03pm

Hello @Pau,

Apologize.... After all,The error persists.

It seems like I need to locally run npm install locally for a new page to appear.
Same behavior as stated in my first message.

_app.js file:

import Head from "next/head";
import "../styles/globals.css";
import Layout from "../components/layout/Layout";
import { config } from "@fortawesome/fontawesome-svg-core";
import "@fortawesome/fontawesome-svg-core/styles.css";
config.autoAddCss = false;

import { SessionProvider } from "next-auth/react";
import { useSession } from "next-auth/react";

import Link from "next/link";
import { PrismicProvider } from "@prismicio/react";
import { PrismicPreview } from "@prismicio/next";
import { dataaijobs } from "../prismicio";
import { useRouter } from "next/router";

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const canonicalUrl = (
    `https://dataai-jobs.com` + (router.asPath === "/" ? "" : router.asPath)
  ).split("?")[0];
  return (
    <PrismicProvider
      internalLinkComponent={({ href, ...props }) => (
        <Link href={href}>
          <a {...props} />
        </Link>
      )}
    >
      <SessionProvider session={pageProps.session}>
        <Layout>
          <Head>
            <meta
              name="viewport"
              content="width=device-width, initial-scale=1"
            />
            <link rel="icon" type="image/png" href="/images/favicon-daj.png" />
            <link rel="canonical" href={canonicalUrl} />
          </Head>

          <PrismicPreview repositoryName={dataaijobs}>
            {Component.auth ? (
              <Auth>
                <Component {...pageProps} />
              </Auth>
            ) : (
              <Component {...pageProps} />
            )}
          </PrismicPreview>
        </Layout>
      </SessionProvider>
    </PrismicProvider>
  );
}

// Client side protection authentification through component:

function Auth({ children }) {
  const { status } = useSession({ required: true });

  // when `required: true` is passed,
  // `status` can only be "loading" or "authenticated"
  if (status === "loading") {
    return <div>Loading...</div>;
  }

  return children;
}

export default MyApp;

[uid].js file:

import React from "react";
import Head from "next/head";

import Hero from "../components/ui/PillarPages/Hero";

import { SliceZone } from "@prismicio/react";
import * as prismicH from "@prismicio/helpers";

import { createClient } from "../prismicio";
import { components } from "../slices";
import { useRouter } from "next/router";

// FAQ structured data to be done

const Page = ({
  metaTitle,
  metaDescription,
  ogImage,
  page,
  title,
  upperTitle,
  description,
}) => {
  const router = useRouter();
  const currentRoute = router.pathname;

  return (
    <React.Fragment>
      <Head>
        <title>{metaTitle}</title>
        <meta name="description" content={metaDescription} />
        {/* <!-- Twitter Card data --> */}
        <meta name="twitter:card" content="summary" />
        {/* <meta name="twitter:site" content="@publisher_handle" /> */}
        <meta name="twitter:title" content={metaTitle} />
        <meta name="twitter:description" content={metaDescription} />
        {/* <meta name="twitter:creator" content="@author_handle" /> */}
        {/* <-- Twitter Summary card images must be at least 120x120px --> */}
        {ogImage && <meta name="twitter:image" content={ogImage} />}

        {/* <!-- Open Graph data --> */}
        <meta property="og:title" content={metaTitle} />
        <meta property="og:type" content="website" />
        <meta property="og:url" content={currentRoute} />
        {ogImage && <meta property="og:image" content={ogImage} />}
        <meta property="og:description" content={metaDescription} />
        <meta property="og:site_name" content="Dataai Jobs" />
      </Head>

      {page.data.uppertitle && page.data.title && page.data.description && (
        <Hero upperTitle={upperTitle} title={title} description={description} />
      )}
      <SliceZone slices={page.data.slices} components={components} />
    </React.Fragment>
  );
};

export default Page;

export async function getStaticProps({ params, previewData }) {
  const client = createClient({ previewData });

  const page = await client.getByUID("pillar_page", params.uid);

  return {
    props: {
      metaTitle: page.data.meta_title,
      metaDescription: page.data.meta_description,
      ogImage: page.data.og_image.url,
      page: page,
      title: page.data.title,
      upperTitle: page.data.uppertitle,
      description: page.data.description,
    },
  };
}

export async function getStaticPaths() {
  const client = createClient();

  const pages = await client.getAllByType("pillar_page");

  return {
    paths: pages.map((page) => prismicH.asLink(page)),
    fallback: false,
  };
}

Pau · November 14, 2022, 8:39pm

If you want, you can send us your project code and the instructions to run it so we can see the error first hand

Marving · November 19, 2022, 5:23pm

You are right. In development mode, the new published page was rendered correctly outside of preview mode.

I was missing the webhook to trigger build when creating a document.

I have created a webhook with all triggers that now receive 201 responses

Topic		Replies	Views
Prismic Preview feature doesn't work on Prod site Developing with Prismic nextjs	10	1573	October 12, 2021
Next.js Previews Not Working on Staging/Production Developing with Prismic nextjs	7	1955	August 30, 2022
Preview mode nextjs Developing with Prismic	6	762	June 15, 2020
Articles page is getting 404 on Production but not on localhost Developing with Prismic	5	1489	June 22, 2023
Preview isn't working in Production Developing with Prismic nuxtjs	9	2233	March 7, 2022

Bug push to production - Preview to prod working, but 404 in real production

Related topics