Fix error when accessing some not found pages

Fix GITBOOK-OPEN-1XDB
Fix GITBOOK-OPEN-1XDC
Fix GITBOOK-OPEN-1X07
Fix GITBOOK-OPEN-1XCJ
Fix GITBOOK-OPEN-1X86

Author: gregberge

.changeset/thirty-berries-bow.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix error when accessing some not found pages.

packages/gitbook/src/app/(site)/(content)/[[...pathname]]/not-found.tsx

@@ -1,16 +1,33 @@
+import Link from 'next/link';
+
 import { TrackPageViewEvent } from '@/components/Insights';
 import { getSpaceLanguage, t } from '@/intl/server';
+import { languages } from '@/intl/translations';
 import { getSiteData, getSpaceContentData } from '@/lib/api';
+import { checkIsFromMiddleware } from '@/lib/pages';
 import { getSiteContentPointer } from '@/lib/pointer';
 import { tcls } from '@/lib/tailwind';
 
 export default async function NotFound() {
+    const fromMiddleware = await checkIsFromMiddleware();
+    if (!fromMiddleware) {
+        return (
+            <div className="flex flex-1 flex-row items-center justify-center py-9 h-screen">
+                <div className="max-w-80">
+                    <h2 className="text-2xl font-semibold mb-2">Not found</h2>
+                    <p className="text-base mb-4">This page could not be found</p>
+                    <Link href="/" className="text-blue-500 hover:text-blue-700 underline">
+                        Go back to home
+                    </Link>
+                </div>
+            </div>
+        );
+    }
     const pointer = await getSiteContentPointer();
     const [{ space }, { customization }] = await Promise.all([
         getSpaceContentData(pointer, pointer.siteShareKey),
         getSiteData(pointer),
     ]);
-
     const language = getSpaceLanguage(customization);
 
     return (

packages/gitbook/src/app/(site)/(content)/[[...pathname]]/page.tsx

@@ -1,12 +1,13 @@
 import { CustomizationHeaderPreset, CustomizationThemeMode } from '@gitbook/api';
 import { Metadata, Viewport } from 'next';
+import { headers } from 'next/headers';
 import { notFound, redirect } from 'next/navigation';
 import React from 'react';
 
 import { PageAside } from '@/components/PageAside';
 import { PageBody, PageCover } from '@/components/PageBody';
 import { PageHrefContext, getAbsoluteHref, getPageHref } from '@/lib/links';
-import { getPagePath, resolveFirstDocument } from '@/lib/pages';
+import { checkIsFromMiddleware, getPagePath, resolveFirstDocument } from '@/lib/pages';
 import { ContentRefContext } from '@/lib/references';
 import { isSpaceIndexable, isPageIndexable } from '@/lib/seo';
 import { getContentTitle } from '@/lib/utils';
@@ -24,6 +25,8 @@ export default async function Page(props: {
     params: Promise<PagePathParams>;
     searchParams: Promise<{ fallback?: string }>;
 }) {
+    await ensureIsFromMiddleware();
+
     const { params: rawParams, searchParams: rawSearchParams } = props;
 
     const params = await rawParams;
@@ -127,6 +130,7 @@ export async function generateViewport({
 }: {
     params: Promise<PagePathParams>;
 }): Promise<Viewport> {
+    await ensureIsFromMiddleware();
     const { customization } = await fetchPageData(await params);
     return {
         colorScheme: customization.themes.toggeable
@@ -144,6 +148,8 @@ export async function generateMetadata({
     params: Promise<PagePathParams>;
     searchParams: Promise<{ fallback?: string }>;
 }): Promise<Metadata> {
+    await ensureIsFromMiddleware();
+
     const { space, pages, page, customization, site, ancestors } = await getPageDataWithFallback({
         pagePathParams: await params,
         searchParams: await searchParams,
@@ -206,3 +212,15 @@ async function getPageDataWithFallback(args: {
         page,
     };
 }
+
+/**
+ * Returns a page not found if the request is not from the middleware.
+ * Some pages can be
+ */
+async function ensureIsFromMiddleware() {
+    // To check if the request is from the middleware, we check if the x-gitbook-token is set in the headers.
+    const fromMiddleware = await checkIsFromMiddleware();
+    if (!fromMiddleware) {
+        notFound();
+    }
+}

packages/gitbook/src/app/(site)/(content)/layout.tsx

@@ -14,6 +14,7 @@ import { assetsDomain } from '@/lib/assets';
 import { buildVersion } from '@/lib/build';
 import { getContentSecurityPolicyNonce } from '@/lib/csp';
 import { getAbsoluteHref, getBaseUrl } from '@/lib/links';
+import { checkIsFromMiddleware } from '@/lib/pages';
 import { isSpaceIndexable } from '@/lib/seo';
 import { getContentTitle } from '@/lib/utils';
 
@@ -29,6 +30,10 @@ export const dynamic = 'force-dynamic';
  */
 export default async function ContentLayout(props: { children: React.ReactNode }) {
     const { children } = props;
+    const fromMiddleware = await checkIsFromMiddleware();
+    if (!fromMiddleware) {
+        return props.children;
+    }
 
     const nonce = await getContentSecurityPolicyNonce();
     const {
@@ -106,6 +111,11 @@ export default async function ContentLayout(props: { children: React.ReactNode }
 }
 
 export async function generateViewport(): Promise<Viewport> {
+    const fromMiddleware = await checkIsFromMiddleware();
+    if (!fromMiddleware) {
+        return {};
+    }
+
     const { customization } = await fetchContentData();
     return {
         colorScheme: customization.themes.toggeable
@@ -117,6 +127,14 @@ export async function generateViewport(): Promise<Viewport> {
 }
 
 export async function generateMetadata(): Promise<Metadata> {
+    const fromMiddleware = await checkIsFromMiddleware();
+    if (!fromMiddleware) {
+        return {
+            title: 'Not found',
+            robots: 'noindex, nofollow',
+        };
+    }
+
     const { space, site, customization } = await fetchContentData();
     const customIcon = 'icon' in customization.favicon ? customization.favicon.icon : null;
 

packages/gitbook/src/app/(site)/layout.tsx

@@ -1,18 +1,30 @@
 import { CustomizationRootLayout } from '@/components/RootLayout';
 import { getSiteData } from '@/lib/api';
+import { checkIsFromMiddleware } from '@/lib/pages';
 import { getSiteContentPointer } from '@/lib/pointer';
 
 /**
  * Layout to be used for the site root. It fetches the customization data for the site
  * and initializes the CustomizationRootLayout with it.
  */
 export default async function SiteRootLayout(props: { children: React.ReactNode }) {
-    const { children } = props;
+    const fromMiddleware = await checkIsFromMiddleware();
+    if (!fromMiddleware) {
+        return (
+            <html lang="en">
+                <body className="font-[sans-serif]">
+                    <main>{props.children}</main>
+                </body>
+            </html>
+        );
+    }
 
     const pointer = await getSiteContentPointer();
     const { customization } = await getSiteData(pointer);
 
     return (
-        <CustomizationRootLayout customization={customization}>{children}</CustomizationRootLayout>
+        <CustomizationRootLayout customization={customization}>
+            {props.children}
+        </CustomizationRootLayout>
     );
 }

packages/gitbook/src/components/DocumentView/Embed.tsx

@@ -5,6 +5,7 @@ import ReactDOM from 'react-dom';
 
 import { Card } from '@/components/primitives';
 import { getEmbedByUrlInSpace, getEmbedByUrl } from '@/lib/api';
+import { getContentSecurityPolicyNonce } from '@/lib/csp';
 import { tcls } from '@/lib/tailwind';
 
 import { BlockProps } from './Block';
@@ -13,8 +14,7 @@ import { IntegrationBlock } from './Integration';
 
 export async function Embed(props: BlockProps<gitbookAPI.DocumentBlockEmbed>) {
     const { block, context, ...otherProps } = props;
-    const headersList = await headers();
-    const nonce = headersList.get('x-nonce') || undefined;
+    const nonce = await getContentSecurityPolicyNonce();
 
     ReactDOM.preload('https://cdn.iframe.ly/embed.js', { as: 'script', nonce });
 

packages/gitbook/src/lib/csp.ts

@@ -1,19 +1,18 @@
 import { SpaceIntegrationScript } from '@gitbook/api';
 import { merge } from 'content-security-policy-merger';
 import { headers } from 'next/headers';
+import { assert } from 'ts-essentials';
 
 import { assetsDomain } from './assets';
 import { filterOutNullable } from './typescript';
+
 /**
  * Get the current nonce for the current request.
  */
 export async function getContentSecurityPolicyNonce(): Promise<string> {
     const headersList = await headers();
     const nonce = headersList.get('x-nonce');
-    if (!nonce) {
-        throw new Error('No nonce found in headers');
-    }
-
+    assert(nonce, 'x-nonce should be set in the headers by the middleware');
     return nonce;
 }
 

packages/gitbook/src/lib/pages.ts

@@ -5,6 +5,7 @@ import {
     RevisionPageGroup,
     RevisionPageType,
 } from '@gitbook/api';
+import { headers } from 'next/headers';
 
 export type AncestorRevisionPage = RevisionPageDocument | RevisionPageGroup;
 
@@ -184,3 +185,13 @@ function flattenPages(
 
     return result;
 }
+
+/**
+ * Returns a page not found if the request is not from the middleware.
+ * Some pages can be
+ */
+export async function checkIsFromMiddleware() {
+    const headerList = await headers();
+    // To check if the request is from the middleware, we check if the x-gitbook-token is set in the headers.
+    return Boolean(headerList.get('x-gitbook-token'));
+}

packages/gitbook/src/lib/pointer.ts

@@ -1,4 +1,5 @@
 import { headers } from 'next/headers';
+import { assert } from 'ts-essentials';
 
 import { SiteContentPointer, SpaceContentPointer } from './api';
 
@@ -7,28 +8,34 @@ import { SiteContentPointer, SpaceContentPointer } from './api';
  */
 export async function getSiteContentPointer(): Promise<SiteContentPointer> {
     const headersList = await headers();
+
     const spaceId = headersList.get('x-gitbook-content-space');
+    assert(spaceId, 'x-gitbook-content-space should be set in the headers by the middleware');
+
     const siteId = headersList.get('x-gitbook-content-site');
+    assert(siteId, 'x-gitbook-content-site should be set in the headers by the middleware');
+
     const organizationId = headersList.get('x-gitbook-content-organization');
-    const siteSpaceId = headersList.get('x-gitbook-content-site-space');
-    const siteSectionId = headersList.get('x-gitbook-content-site-section');
-    const siteShareKey = headersList.get('x-gitbook-content-site-share-key');
+    assert(
+        organizationId,
+        'x-gitbook-content-organization should be set in the headers by the middleware',
+    );
 
-    if (!spaceId || !siteId || !organizationId) {
-        throw new Error(
-            'getSiteContentPointer is called outside the scope of a request processed by the middleware',
-        );
-    }
+    const siteSectionId = headersList.get('x-gitbook-content-site-section') ?? undefined;
+    const siteSpaceId = headersList.get('x-gitbook-content-site-space') ?? undefined;
+    const siteShareKey = headersList.get('x-gitbook-content-site-share-key') ?? undefined;
+    const revisionId = headersList.get('x-gitbook-content-revision') ?? undefined;
+    const changeRequestId = headersList.get('x-gitbook-content-changerequest') ?? undefined;
 
     const pointer: SiteContentPointer = {
         siteId,
         spaceId,
-        siteSectionId: siteSectionId ?? undefined,
-        siteSpaceId: siteSpaceId ?? undefined,
-        siteShareKey: siteShareKey ?? undefined,
         organizationId,
-        revisionId: headersList.get('x-gitbook-content-revision') ?? undefined,
-        changeRequestId: headersList.get('x-gitbook-content-changerequest') ?? undefined,
+        siteSectionId,
+        siteSpaceId,
+        siteShareKey,
+        revisionId,
+        changeRequestId,
     };
 
     return pointer;
@@ -40,17 +47,17 @@ export async function getSiteContentPointer(): Promise<SiteContentPointer> {
  */
 export async function getSpacePointer(): Promise<SpaceContentPointer> {
     const headersList = await headers();
+
     const spaceId = headersList.get('x-gitbook-content-space');
-    if (!spaceId) {
-        throw new Error(
-            'getSpacePointer is called outside the scope of a request processed by the middleware',
-        );
-    }
+    assert(spaceId, 'x-gitbook-content-space should be set in the headers by the middleware');
+
+    const revisionId = headersList.get('x-gitbook-content-revision') ?? undefined;
+    const changeRequestId = headersList.get('x-gitbook-content-changerequest') ?? undefined;
 
     const pointer: SpaceContentPointer = {
         spaceId,
-        revisionId: headersList.get('x-gitbook-content-revision') ?? undefined,
-        changeRequestId: headersList.get('x-gitbook-content-changerequest') ?? undefined,
+        revisionId,
+        changeRequestId,
     };
 
     return pointer;