How can I handle errors with next-mdx-remote/rsc?

[AmeenJalali]

Hi,

I'm using MDXRemote from "next-mdx-remote/rsc" package as I'm developing with Next.js 13 on a server component. I'm fetching the data from database which could be NOT a valid MDX file. I'm using it for user biographies. So maybe users put just plain text or raw html or MDX.

The problem that I face is when I use an invalid MDX file, I get errors and I can't use try catch for handling it because the error throws from MDXRemote itself. Also, I read in the documentation that I can't use serialize function as I'm using it on a server component (next-mdx-remote/rsc).

So, how can I handle errors?

Here is an example:

import React, { Suspense } from "react";
import { GET_USER_FROM_PRISMA } from "./prisma";
import { MDXRemote } from "next-mdx-remote/rsc";

export const revalidate = 60;


const Page = async ({ params }) => {
  const username = params.username;
  const user= await GET_USER_FROM_PRISMA(username);

  let biography;
  try {
    biography = <MDXRemote source={user.bio} />;
  } catch (error) {
    biography = <p>Error loading bio</p>;
  }

  return (
    <>
          <div className="mb-2 prose prose-invert">
            <Suspense fallback={<>Loading...</>}>{biography}</Suspense>
          </div>
    </>
  );
};

export default Page;

When the user save an invalid MDX like this one:
[Stackoverflow The Key](https://stackoverflow.blog/2021/03/31/the-key-copy-paste/){:target="_blank" rel="noopener"}

The page shows up with this error:

Error: [next-mdx-remote] error compiling MDX:
Could not parse expression with acorn: Unexpected token

> 1 | [Stackoverflow The [Key](https://stackoverflow.blog/2021/03/31/the-key-copy-paste/){:target="_blank"](http://localhost:3000/Key](https://stackoverflow.blog/2021/03/31/the-key-copy-paste/)%7B:target=%22_blank%22) rel="noopener"}
    |                                                                                    ^

More information: https://mdxjs.com/docs/troubleshooting-mdx

How can I handle errors when I'm using MDXRemote from next-mdx-remote/rsc on a server component?

Thank you!

[joshwcomeau]

Not a maintainer, but I had a couple of ideas:

1. You could use the compileMdx function to see if the MDX can be compiled. You could wrap that in a try/catch, and if it throws, you could not render MDXRemote.
2. You could use an Error Boundary! Next has an error.js file that should work for situations like this.

[Jaycedam]

I think I found a solution: This is from a basic version of my code. But the idea is to return with await the MDXRemote, since it returns a promise.

edit: simplified version

import { getProjectByName } from "@/actions/project";
import { MDXRemote } from "next-mdx-remote/rsc";
import { notFound } from "next/navigation";

export default async function MDX({ name }: { name: string }) {
  const project = await getProjectByName(name);

  const parsedUrl = new URL(project.url);

  const markdown = await fetch(parsedUrl.toString(), {
    next: { revalidate: 0 },
  }).then((response) => response.text());

  try {
    // it has to return with await since it returns a promise
    const result = await MDXRemote({
      source: markdown,
    });
    return result;
  } catch (error) {
    // handle the error here
    notFound();
  }
}