chore: update docusaurus to 3.8.0 (zitadel#9974)

> [!IMPORTANT]  
> We need to change the ENV `VERCEL_FORCE_NO_BUILD_CACHE` to `0` which
is currently `1` to enable the cache on all deployments

This pull request includes several updates to the documentation and
benchmarking components, focusing on improving performance, error
handling, and compatibility with newer versions of Docusaurus. The key
changes include the removal of outdated configurations, updates to
dependencies, and enhancements to the `BenchmarkChart` component for
better error handling and data validation.

### Documentation and Configuration Updates:

* **Removed outdated Babel and Webpack configurations**: The
`babel.config.js` file was deleted, and the Webpack configuration was
removed from `docusaurus.config.js` to align with the latest Docusaurus
setup.
[[1]](diffhunk://#diff-2ed4f5b03d34a87ef641e9e36af4a98a1c0ddaf74d07ce93665957be69b7b09aL1-L4)
[[2]](diffhunk://#diff-28742c737e523f302e6de471b7fc27284dc8cf720be639e6afe4c17a550cd654L204-L225)
* **Added experimental features in Docusaurus**: Introduced a `future`
section in `docusaurus.config.js` to enable experimental features like
`swcJsLoader`, `rspackBundler`, and `lightningCssMinimizer`, while
disabling problematic settings due to known issues.

### Dependency Updates:

* **Upgraded Docusaurus and related packages**: Updated dependencies in
`package.json` to use Docusaurus version `^3.8.0` and newer versions of
associated plugins and themes for improved performance and
compatibility.
[[1]](diffhunk://#diff-adfa337ce44dc2902621da20152a048dac41878cf3716dfc4cc56d03aa212a56L25-R39)
[[2]](diffhunk://#diff-adfa337ce44dc2902621da20152a048dac41878cf3716dfc4cc56d03aa212a56L66-R67)

### Component Enhancements:

* **Improved `BenchmarkChart` error handling**: Refactored the
`BenchmarkChart` component to validate input data, handle errors
gracefully, and provide meaningful fallback messages when data is
missing or invalid.
[[1]](diffhunk://#diff-ce9fccf51f6b863dd58a39f361a9cf980b10357bccc7381f928788483b30cb0eL4-R21)
[[2]](diffhunk://#diff-ce9fccf51f6b863dd58a39f361a9cf980b10357bccc7381f928788483b30cb0eR72-R76)
* **Fixed edge cases in chart rendering**: Addressed issues like invalid
timestamps, undefined `p99` values, and empty data sets to ensure robust
chart generation.
[[1]](diffhunk://#diff-ce9fccf51f6b863dd58a39f361a9cf980b10357bccc7381f928788483b30cb0eL19-L29)
[[2]](diffhunk://#diff-ce9fccf51f6b863dd58a39f361a9cf980b10357bccc7381f928788483b30cb0eL38-R61)

### Documentation Benchmark Updates:

* **Simplified imports in benchmark files**: Replaced the use of
`raw-loader` with direct imports for benchmark data in multiple `.mdx`
files to streamline the documentation setup.
[[1]](diffhunk://#diff-a9710709396e5ff6756aedf89dfcbd62aeea15368ba33bf3932ebf33046a29e8L66-R66)
[[2]](diffhunk://#diff-0a9b6103c97c58792450bfd2d337bbb8a6b72df2ae326cc56ebc96e01c0acd6bL35-R35)
[[3]](diffhunk://#diff-38f45388e065c57f1282a43bb319354da3c218e96d95ca20f4d11709f48491b8L36-R36)
[[4]](diffhunk://#diff-b8e792ebe42fcb16a493e35d23b58a91c2117d949953487e70f379c64e5cb7c0L36-R36)
[[5]](diffhunk://#diff-3778acfa893504004008b162fa95f21f1c7c40dcf1868bbbaaa504ac5d51901aL38-R38)

Author: fforootd

docs/babel.config.js

@@ -63,7 +63,7 @@ TODO: describe the outcome of the test?
 
 ## Endpoint latencies
 
-import OutputSource from "!!raw-loader!./output.json";
+import OutputSource from "./output.json";
 
 import { BenchmarkChart } from '/src/components/benchmark_chart';
 

docs/docs/apis/benchmarks/_template.mdx

@@ -32,7 +32,7 @@ Tests are halted after this test run because of too many [client read events](ht
 
 ## /token endpoint latencies
 
-import OutputSource from "!!raw-loader!./output.json";
+import OutputSource from "./output.json";
 
 import { BenchmarkChart } from '/src/components/benchmark_chart';
 

docs/docs/apis/benchmarks/v2.65.0/machine_jwt_profile_grant/index.mdx

@@ -33,7 +33,7 @@ The tests showed heavy database load by time by the first two database queries.
 
 ## Endpoint latencies
 
-import OutputSource from "!!raw-loader!./output.json";
+import OutputSource from "./output.json";
 
 import { BenchmarkChart } from '/src/components/benchmark_chart';
 

docs/docs/apis/benchmarks/v2.66.0/machine_jwt_profile_grant/index.mdx

@@ -33,7 +33,7 @@ The performance goals of [this issue](https://github.com/zitadel/zitadel/issues/
 
 ## Endpoint latencies
 
-import OutputSource from "!!raw-loader!./output.json";
+import OutputSource from "./output.json";
 
 import { BenchmarkChart } from '/src/components/benchmark_chart';
 

docs/docs/apis/benchmarks/v2.70.0/machine_jwt_profile_grant/index.mdx

@@ -35,7 +35,7 @@ The tests showed that querying the user takes too much time because Zitadel ensu
 
 ## Endpoint latencies
 
-import OutputSource from "!!raw-loader!./output.json";
+import OutputSource from "./output.json";
 
 import { BenchmarkChart } from '/src/components/benchmark_chart';
 

docs/docs/apis/benchmarks/v2.70.0/oidc_session/index.mdx

@@ -201,28 +201,6 @@ module.exports = {
       runmeLinkLabel: 'Checkout via Runme'
     },
   },
-  webpack: {
-    jsLoader: (isServer) => ({
-      loader: require.resolve('swc-loader'),
-      options: {
-        jsc: {
-          parser: {
-            syntax: 'typescript',
-            tsx: true,
-          },
-          transform: {
-            react: {
-              runtime: 'automatic',
-            },
-          },
-          target: 'es2017',
-        },
-        module: {
-          type: isServer ? 'commonjs' : 'es6',
-        },
-      },
-    }),
-  },
   presets: [
     [
       "classic",
@@ -397,4 +375,17 @@ module.exports = {
     },
   ],
   themes: [ "docusaurus-theme-github-codeblock", "docusaurus-theme-openapi-docs"],
+  future: {
+    v4: false, // Disabled because of some problems related to https://github.com/facebook/docusaurus/issues/11040
+    experimental_faster: {
+      swcJsLoader: false, // Disabled because of memory usage > 8GB which is a problem on vercel default runners
+      swcJsMinimizer: true,
+      swcHtmlMinimizer : true,
+      lightningCssMinimizer: true,
+      mdxCrossCompilerCache: true,
+      ssgWorkerThreads: false, // Disabled because of some problems related to https://github.com/facebook/docusaurus/issues/11040
+      rspackBundler: true,
+      rspackPersistentCache: true,
+    },
+  },
 };

docs/docusaurus.config.js

@@ -6,7 +6,7 @@
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
     "start:api": "yarn run generate && docusaurus start",
-    "build": "yarn run generate && NODE_OPTIONS=--max-old-space-size=8192 docusaurus build",
+    "build": "yarn run generate && docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
@@ -22,33 +22,27 @@
   },
   "dependencies": {
     "@bufbuild/buf": "^1.14.0",
-    "@docusaurus/core": "3.4.0",
-    "@docusaurus/preset-classic": "3.4.0",
-    "@docusaurus/theme-mermaid": "3.4.0",
-    "@docusaurus/theme-search-algolia": "3.4.0",
+    "@docusaurus/core": "^3.8.0",
+    "@docusaurus/faster": "^3.8.0",
+    "@docusaurus/preset-classic": "^3.8.0",
+    "@docusaurus/theme-mermaid": "^3.8.0",
+    "@docusaurus/theme-search-algolia": "^3.8.0",
     "@headlessui/react": "^1.7.4",
     "@heroicons/react": "^2.0.13",
-    "@mdx-js/react": "^3.0.0",
-    "@swc/core": "^1.3.74",
     "autoprefixer": "^10.4.13",
     "clsx": "^1.2.1",
-    "docusaurus-plugin-image-zoom": "^1.0.1",
-    "docusaurus-plugin-openapi-docs": "3.0.1",
+    "docusaurus-plugin-image-zoom": "^3.0.1",
+    "docusaurus-plugin-openapi-docs": "4.4.0",
     "docusaurus-theme-github-codeblock": "^2.0.2",
-    "docusaurus-theme-openapi-docs": "3.0.1",
+    "docusaurus-theme-openapi-docs": "4.4.0",
     "mdx-mermaid": "^2.0.0",
-    "mermaid": "^10.9.1",
     "postcss": "^8.4.31",
-    "prism-react-renderer": "^2.1.0",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-google-charts": "^5.2.1",
-    "react-player": "^2.15.1",
-    "sitemap": "7.1.1",
-    "swc-loader": "^0.2.3",
-    "wait-on": "6.0.1"
+    "react-player": "^2.15.1"
   },
   "browserslist": {
     "production": [
@@ -63,8 +57,8 @@
     ]
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.4.0",
-    "@docusaurus/types": "3.4.0",
+    "@docusaurus/module-type-aliases": "^3.8.0",
+    "@docusaurus/types": "^3.8.0",
     "tailwindcss": "^3.2.4"
   },
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"

docs/package.json

@@ -1,11 +1,24 @@
 import React from "react";
 import Chart from "react-google-charts";
 
-export function BenchmarkChart(testResults=[], height='500px') {
+export function BenchmarkChart({ testResults = [], height = '500px' } = {}) {
+    if (!Array.isArray(testResults)) {
+        console.error("BenchmarkChart: testResults is not an array. Received:", testResults);
+        return <p>Error: Benchmark data is not available or in the wrong format.</p>;
+    }
+
+    if (testResults.length === 0) {
+        return <p>No benchmark data to display.</p>;
+    }
+
     const dataPerMetric = new Map();
     let maxVValue = 0;
 
-    JSON.parse(testResults.testResults).forEach((result) => {
+    testResults.forEach((result) => {
+        if (!result || typeof result.metric_name === 'undefined') {
+            console.warn("BenchmarkChart: Skipping invalid result item:", result);
+            return;
+        }
         if (!dataPerMetric.has(result.metric_name)) {
             dataPerMetric.set(result.metric_name, [
                 [
@@ -16,17 +29,16 @@ export function BenchmarkChart(testResults=[], height='500px') {
                 ],
             ]);
         }
-        if (result.p99 > maxVValue) {
+        if (result.p99 !== undefined && result.p99 > maxVValue) {
             maxVValue = result.p99;
         }
         dataPerMetric.get(result.metric_name).push([
-            new Date(result.timestamp),
+            result.timestamp ? new Date(result.timestamp) : null,
             result.p50,
             result.p95,
             result.p99,
         ]);
     });
-
     const options = {
         legend: { position: 'bottom' },
         focusTarget: 'category',
@@ -35,17 +47,18 @@ export function BenchmarkChart(testResults=[], height='500px') {
         },
         vAxis: {
             title: 'latency (ms)',
-            maxValue: maxVValue,
+            maxValue: maxVValue > 0 ? maxVValue : undefined,
         },
         title: ''
     };
     const charts = [];
 
     dataPerMetric.forEach((data, metric) => {
-        const opt = Object.create(options);
+        const opt = { ...options };
         opt.title = metric;
         charts.push(
             <Chart
+                key={metric}
                 chartType="LineChart"
                 width="100%"
                 height={height}
@@ -56,6 +69,9 @@ export function BenchmarkChart(testResults=[], height='500px') {
         );
     });
 
+    if (charts.length === 0) {
+        return <p>No chart data could be generated.</p>;
+    }
 
-    return (charts);
+    return <>{charts}</>;
 }