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

Developing with Prismic
1

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;
3

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?

4

Hello @Pau, thank you for your reply!

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

Screenshot 2022-11-10 at 1.13.11 PM
Screenshot 2022-11-10 at 1.13.11 PM1920×590 23.7 KB

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.

5

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.

1 Like
6

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!

1 Like
7

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,
  };
}
8

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

9

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 :slight_smile:

1 Like