feat: add debug for memory leak

app/(blog)/article/[...slug]/layout.tsx

@@ -1,7 +1,6 @@
 // import Script from "next/script"
 import React from "react";
 
-import "simplebar-react/dist/simplebar.min.css";
 
 export default async function LobyLayout({ children }: { children: React.ReactNode }) {
   return <div className="relative flex min-h-screen flex-col">{children}</div>;

app/(blog)/article/[...slug]/page.tsx

@@ -17,7 +17,9 @@ import { Separator } from "@/components/ui/separator";
 import { env } from "@/env.mjs";
 
 // https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate
-export const revalidate = parseInt(process.env.NEXT_REVALIDATE_PAGES || "", 10) || 300; // revalidate the data interval
+// export const revalidate = parseInt(process.env.NEXT_REVALIDATE_PAGES || "", 10) || 300; // revalidate the data interval
+export const dynamic = 'force-dynamic';
+export const revalidate = 0;
 
 // export const dynamicParams = true; // true | false,
 

app/(blog)/db/[...row]/page.tsx

@@ -11,8 +11,6 @@ import { DatabaseRenderer } from "@/app/notion/_components/db/database";
 import { IconRender } from "@/app/notion/_components/emoji";
 import RichText from "@/app/notion/text";
 
-// https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate
-// export const revalidate = parseInt(process.env.NEXT_REVALIDATE_PAGES || "", 10) || 300; // revalidate the data interval
 
 export default async function Page({ params }: { params: { row: string[] } }) {
   const dbID = params.row[0];

app/(lobby)/page.tsx

@@ -29,7 +29,7 @@ export default async function Home() {
           >
             {posts.map((post: any, i) => {
               const title = post.properties?.Title.title[0].text.content;
-              const slug = post.properties?.Slug?.rich_text[0].plain_text;
+              const slug = post.properties?.Slug?.rich_text[0].plain_text + '/' + post.id;
               const edit_time = post.last_edited_time;
               const image = extractFileUrl(post.cover);
               const desc = post.properties?.Summary?.rich_text[0]?.plain_text;

app/api/mem/route.ts

@@ -0,0 +1,57 @@
+// for debugging purposes only
+
+import { NextRequest, NextResponse } from "next/server";
+import v8 from "v8";
+import { runInNewContext } from 'vm';
+
+
+export async function GET(req: NextRequest) {
+  const searchParams = req.nextUrl.searchParams;
+  const state = searchParams.get("gc");
+
+  // enabling trace-gc
+  if (state === "start") {
+    v8.setFlagsFromString("--trace-gc");
+
+    const gc = runInNewContext('gc'); // nocommit
+    gc();
+
+    return NextResponse.json({
+      result: "gc success",
+    });
+  } 
+
+  // dump
+  if (state == "dump") {
+      const fileName = v8.writeHeapSnapshot();
+      console.log(`Created heapdump file: ${fileName}`);
+
+    return NextResponse.json({
+      result: "dump success",
+      fileName: fileName,
+    });
+  }
+
+  // const searchParams = req.nextUrl.searchParams;
+  // if (global.gc) {
+  //   global.gc();
+  // } else {
+  //   console.log(
+  //     "Garbage collection unavailable.  Pass --expose-gc when launching node to enable forced garbage collection."
+  //   );
+  // }
+  const formatMemoryUsage = (data: number) => `${Math.round((data / 1024 / 1024) * 100) / 100} MB`;
+
+  const memoryData = process.memoryUsage();
+
+  const memoryUsage = {
+    rss: `${formatMemoryUsage(memoryData.rss)} -> Resident Set Size - total memory allocated for the process execution`,
+    heapTotal: `${formatMemoryUsage(memoryData.heapTotal)} -> total size of the allocated heap`,
+    heapUsed: `${formatMemoryUsage(memoryData.heapUsed)} -> actual memory used during the execution`,
+    external: `${formatMemoryUsage(memoryData.external)} -> V8 external memory`,
+    arrayBuffers: `${formatMemoryUsage(memoryData.arrayBuffers)} -> array buffers`,
+  };
+
+  // const res = NextResponse.json(memoryUsage);
+  return NextResponse.json(memoryUsage);
+}

app/notion/_components/code.tsx

@@ -1,100 +1,17 @@
 // "use client";
 
 import React from "react";
-// import { highlightElement } from "prismjs";
-// import { languages as Lan } from "prismjs";
-
-// TODO: make it to dynamic
-// import "prismjs/components/prism-c.min.js";
-// import "prismjs/components/prism-cpp.min.js";
-// import "prismjs/components/prism-css-extras.min.js";
-// import "prismjs/components/prism-css.min.js";
-// import "prismjs/components/prism-javascript.min.js";
-// import "prismjs/components/prism-js-extras.min.js";
-// import "prismjs/components/prism-json.min.js";
-// import "prismjs/components/prism-jsx.min.js";
-// import "prismjs/components/prism-tsx.min.js";
-// import "prismjs/components/prism-typescript.min.js";
-// import "prismjs/components/prism-go.js";
-// import "prismjs/components/prism-ini.js";
-// import "prismjs/components/prism-shell-session.js";
-// import "prismjs/components/prism-bash.min.js";
-// import "prismjs/components/prism-java.min.js";
-// import "prismjs/components/prism-python.min.js";
-
-// import "prismjs/themes/prism-tomorrow.css";
 import { cn } from "@/lib/utils";
 
 import RichText from "../text";
 import { bundledLanguages, getHighlighter } from "shiki";
-// import type { Highlighter, Lang, Theme } from 'shiki'
-
-// import type { BundledLanguage, BundledTheme } from "shiki"; // Import the types from shiki
 
 interface CodeBlockProps {
   block: any;
   defaultLanguage?: string | undefined;
   className?: string | undefined;
 }
 
-// export function CodeRender({ block, defaultLanguage, className }: CodeBlockProps) {
-//   const codeRef = React.useRef<HTMLDivElement>(null);
-//   React.useEffect(() => {
-//     if (codeRef.current) {
-//       try {
-//         highlightElement(codeRef.current);
-//       } catch (err) {
-//         console.warn("prismjs highlight error", err);
-//       }
-//     }
-//   }, [codeRef]);
-
-//   const { code, id, type } = block;
-//   if (type != "code" || !code) {
-//     return null;
-//   }
-
-//   let lang = (code.language || defaultLanguage).toLowerCase();
-//   if (lang == "c++") {
-//     lang = "cpp";
-//   }
-//   const caption = code.caption;
-
-//   // Text cann't be nested in code element. So there are two ways to render code
-//   // Solution 1: Replace code with div tag.
-//   // Solution 2: Render all raw plain-text
-//   let codes = "";
-//   code.rich_text?.map((item: any) => {
-//     codes += item?.plain_text;
-//   });
-
-//   // TODO: 1. add copy to clipboard feature
-//   // TODO: 2. support mermaid diagram. see https://stackblitz.com/edit/react-ts-mermaid?file=Mermaid.tsx
-//   return (
-//     <div key={id} className={cn(className, "text-sm")}>
-//       <pre className="rounded py-8">
-//         <code className={`language-${lang}`} ref={codeRef}>
-//           {codes}
-//         </code>
-//       </pre>
-
-//       {caption && caption.length > 0 && (
-//         <figcaption className="px-1.5 text-sm font-normal text-slate-600">
-//           <RichText title={caption} />
-//         </figcaption>
-//       )}
-//     </div>
-// );
-
-// Solution 3:  https://drupal-way.com/blog/nextjs-and-prismjs-integration
-// const highlightedCode = Prism.highlight(codes, Lan[lang], lang);
-// return <div
-//   dangerouslySetInnerHTML={{__html: `<pre class="language-${lang}" tabIndex="0"><code class="language-${lang}">${highlightedCode}</code></pre>`}}
-//   />
-// }
-
-// let highlighter: Highlighter;
-
 // shiki render
 export async function ShikiCodeRender({ block, defaultLanguage, className }: CodeBlockProps) {
   const { code, id, type } = block;

app/notion/_components/embed.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { cn } from "@/lib/utils";
 import RichText from "../text";
 

app/notion/_components/pdf.tsx

@@ -22,6 +22,8 @@ import SimpleBar from "simplebar-react";
 import { useResizeDetector } from "react-resize-detector";
 import { zodResolver } from "@hookform/resolvers/zod";
 
+import "simplebar-react/dist/simplebar.min.css";
+
 pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`;
 
 interface PDFBlockProps {

app/notion/_components/table.tsx

@@ -4,9 +4,7 @@ import RichText from "../text";
 import {
   Table,
   TableBody,
-  // TableCaption,
   TableCell,
-  // TableFooter,
   TableHead,
   TableHeader,
   TableRow,

app/notion/proxy/proxy.ts

@@ -18,7 +18,7 @@ export async function proxyRetrieveDatabase(database_id: string) {
           database_id: database_id,
         },
       });
-      if (db) {
+      if (db?.result) {
         const res = JSON.parse(Buffer.from(db.result).toString("utf-8"));
         console.log("retrieveDatabase cached hit for ", database_id);
         return res;
@@ -59,7 +59,7 @@ export async function proxyQueryDatabases(database_id: string) {
           database_id: database_id,
         },
       });
-      if (db) {
+      if (db?.result) {
         const res = JSON.parse(Buffer.from(db.result).toString("utf-8"));
         console.log("proxyQueryDatabases cached hit for ", database_id);
         return res;
@@ -101,7 +101,7 @@ export async function proxyRetrievePage(page_id: string) {
           page_id: page_id,
         },
       });
-      if (db) {
+      if (db?.result) {
         const res = JSON.parse(Buffer.from(db.result).toString("utf-8"));
         console.log("proxyRetrievePage cached hit for ", page_id);
         return res;

scripts/load-testing/start_load_testing.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+## This script builds for load testing
+#
+## Before using, setup a proper url in `target.txt`
+## * https://github.com/tsenart/vegeta
+#
+## Requirements:
+## * vegeta
+#
+## Usage:
+#  cd ./scripts/load-testing
+## chmod +x start_load_testing.sh
+## ./start_load_testing/build.sh
+##
+## Output: 
+#
+BASEDIR=$(dirname $0)
+
+TARGET="${BASEDIR}/target.txt"
+RATE=30
+DURATION="220s"
+OUTPUT="${BASEDIR}/output.bin"
+WORKERS=10
+MAX_WORKERS=20
+
+if [ -f "$OUTPUT" ] ; then
+    rm "$OUTPUT"
+fi
+
+# start load testing
+vegeta attack -targets=$TARGET -rate=$RATE -duration=$DURATION -workers=$WORKERS -max-workers=$MAX_WORKERS > $OUTPUT
+
+RED='\033[1;31m'
+NC='\033[0m' # No Color
+
+# basic output
+echo -e "${RED}Text output:${NC}"
+vegeta report $OUTPUT
+
+echo ""
+echo -e "${RED}Histogram output:${NC}"
+vegeta report -type='hist[0,10ms,40ms,80ms,200ms,500ms,1000ms]' $OUTPUT

scripts/load-testing/target.txt

@@ -0,0 +1,3 @@
+GET http://127.0.0.1:3000/article/list-blog
+# specify trace info
+X-Trace-ID: efbdbed17f4c6280e8c8c98d29123b8c