Awkward error - prismic.js?repo= &new=true:1

Hello,

I am currently trying to run HTTP request on my MongoDB DB (not related to Prismic).

However, i am having 500 error that points to "prismic.js?repo= &new=true:1" as you can see in the screenshot below:


Do you know what could be the reason of it?

It seems like it's a bug coming from the loading of _app.js, right?

_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";

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  // const canonicalUrl = (
  //   `https://dataai-jobs.com` + (router.asPath === "/" ? "" : router.asPath)
  // ).split("?")[0];

  const canonicalUrl = `https://dataai-jobs.com` + router.asPath;

  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;

As stated previously, the error is happening on a page not related at all to Prismic - pages/api/companies/update.js:

import { MongoClient } from "mongodb";
// import clientPromise from "../../../lib/mongodb";

// ON GOING

async function handler(req, res) {
  if (req.method === "PUT") {
    const {
      id,
      name,
      bio,
      size,
      location,
      image,
      website,
      industry,
      userId,
      email,
    } = req.body;

    // | (bio.trim() === "")
    // BACKEND VALIDATION
    if (!name || name.trim() === "") {
      res.status(422).json({ message: "Invalid input." });
      return;
    }

    function capitalize(word) {
      return word[0].toUpperCase() + word.slice(1).toLowerCase();
    }

    // Storing it in the database
    const updatedCompany = {
      id,
      name: capitalize(name),
      slug: name.toLowerCase().replace(/\s+/g, ""),
      size,
      bio,
      location,
      image,
      website,
      industry,
      userId,
      email,
    };

    let client;

    console.log(updatedCompany);
    console.log("Test ligne 51");
    console.log(updatedCompany.id);
    try {
      client = await MongoClient.connect(process.env.MONGODB_URI);
    } catch (error) {
      console.log("erreur 500 DB connection");
      res.status(500).json({ message: "Could not connect to database." });
      return;
    }

    const db = client.db("main");

    try {
      // Inspiration for this version: https://www.mongodb.com/docs/drivers/node/v3.6/usage-examples/updateOne/
      // create a filter for a movie to update
      const filter = { _id: mongodb.ObjectID(updatedCompany.id) };

      // create a document that sets the plot of the movie
      const updateDoc = {
        $set: {
          name: updatedCompany.name,
          // slug: updatedCompany.slug,
          // size: updatedCompany.size,
          // bio: updatedCompany.bio,
          // location: updatedCompany.location,
          // image: updatedCompany.image,
          // website: updatedCompany.website,
          // industry: updatedCompany.industry,
          // userId: updatedCompany.userId,
          // email: updatedCompany.email,
        },
      };

      // this option instructs the method to create a document if no documents match the filter
      const options = { upsert: false };

      console.log(updatedCompany.id);

      const result = await db
        .collection("companies")
        .updateOne(filter, updateDoc, options);

      console.log(result);

      // Not sure about that line:
      // newCompany.id = result.insertedId;
    } catch (error) {
      console.log("erreur 500 de storing");
      client.close();
      res.status(500).json({ message: "Storing message failed!" });
      return;
    }

    client.close();

    res.status(201).json({ message: "Sucessfuly stored company" });
  }
}

export default handler;

Thanks in advance

Hi @Marving,

Sorry about the delayed response. So first thing, you're right in that your seeing this on non-Primsic pages because of the _app.js, the <PrismicPreview> component wraps adds the toolbar script to every page so that the preview system can be activated even from 404s for unpublished pages.

But why it's only throwing a 500 on this non-Prsmic-related page, I don't know. Are there no other pages seeing this error?

Thanks.

Hello Phil,

Thank you for your reply.

No, no other page are throwing such error.

It is weirdly thrown everytime I have an error 500 even if it does not concern Prismic