[optimize] some HTTP requests & GitHub actions details

[optimize] upgrade to Node.js 20, MobX RESTful 1, KoAJAX 3 & other latest Upstream packages

.github/workflows/deploy-production.yml

@@ -29,11 +29,11 @@ jobs:
           cat > .env.local <<EOF
           ${{ secrets.ENV_FILE }}
           EOF
-      - uses: docker/setup-qemu-action@v2
-      - uses: docker/setup-buildx-action@v2
+      - uses: docker/setup-qemu-action@v3
+      - uses: docker/setup-buildx-action@v3
 
       - name: Build Image
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v6
         with:
           context: .
           platforms: linux/amd64
@@ -46,13 +46,14 @@ jobs:
           mv ${{ env.ARTIFACT_PATH }} ./docker-compose.yml ./start.sh ./build
 
       - name: Transport Image
-        uses: garygrossgarten/github-action-scp@release
+        uses: appleboy/scp-action@v0.1.7
         with:
-          local: ./build
-          remote: /tmp
+          source: ./build/*.*
+          target: /tmp/${{ env.BOX_NAME }}
           host: ${{ secrets.HOST }}
           username: ${{ secrets.USER }}
           password: ${{ secrets.SSH_KEY }}
+          strip_components: 1
 
       - name: Run Image
         uses: garygrossgarten/github-action-ssh@release
@@ -61,6 +62,9 @@ jobs:
           username: ${{ secrets.USER }}
           password: ${{ secrets.SSH_KEY }}
           command: |
-            mv /tmp/docker-compose.yml /tmp/start.sh ~/
-            chmod +x ~/start.sh
-            echo '${{ secrets.SSH_KEY }}' | sudo -S ~/start.sh ${{ env.ARTIFACT_PATH }}
+            mkdir -p ~/${{ env.BOX_NAME }} 
+            cd /tmp/${{ env.BOX_NAME }}
+            mv docker-compose.yml start.sh ~/${{ env.BOX_NAME }}
+            cd ~/${{ env.BOX_NAME }}
+            chmod +x start.sh
+            echo '${{ secrets.SSH_KEY }}' | sudo -S ./start.sh /tmp/${{ env.BOX_NAME }}/${{ env.ARTIFACT_PATH }}

.github/workflows/replace-repository-name.sh

@@ -6,4 +6,5 @@ TargetOwner=$3
 TargetName=$4
 
 sed -i "s/$SourceOwner\/$SourceName/$TargetOwner\/$TargetName/ig" $(grep -i $SourceOwner/$SourceName -rl .)
+sed -i "s/$SourceOwner/$TargetOwner/ig" $(grep -i $SourceOwner -rl .)
 sed -i "s/$SourceName/$TargetName/ig" $(grep -i $SourceName -rl .)

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-slim AS base
+FROM node:20-slim AS base
 RUN apt-get update && \
     apt-get install ca-certificates curl libjemalloc-dev -y --no-install-recommends  && \
     rm -rf /var/lib/apt/lists/*
@@ -14,7 +14,7 @@ WORKDIR /app
 
 FROM base AS build
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store  pnpm i --frozen-lockfile
-RUN pnpm build
+RUN CI=true  pnpm build
 
 FROM base
 COPY --from=build /app/public ./public

next.config.mjs

@@ -9,7 +9,8 @@ import RemarkGfm from 'remark-gfm';
 import RemarkMdxFrontMatter from 'remark-mdx-frontmatter';
 import webpack from 'webpack';
 
-const { NODE_ENV, SENTRY_AUTH_TOKEN, SENTRY_ORG, SENTRY_PROJECT } = process.env;
+const { NODE_ENV, CI, SENTRY_AUTH_TOKEN, SENTRY_ORG, SENTRY_PROJECT } =
+  process.env;
 const isDev = NODE_ENV === 'development';
 
 const withMDX = NextMDX({
@@ -30,9 +31,10 @@ const withPWA = setPWA({
 const nextConfig = withPWA(
   withLess(
     withMDX({
+      output: CI && 'standalone',
       pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
-      output: 'standalone',
-      
+      transpilePackages: ['@sentry/browser'],
+
       webpack: config => {
         config.plugins.push(
           new webpack.NormalModuleReplacementPlugin(/^node:/, resource => {
@@ -79,18 +81,10 @@ const nextConfig = withPWA(
 
 export default isDev || !SENTRY_AUTH_TOKEN
   ? nextConfig
-  : withSentryConfig(
-      {
-        ...nextConfig,
-        sentry: {
-          transpileClientSDK: true,
-          autoInstrumentServerFunctions: false,
-        },
-      },
-      {
-        org: SENTRY_ORG,
-        project: SENTRY_PROJECT,
-        authToken: SENTRY_AUTH_TOKEN,
-        silent: true,
-      },
-    );
+  : withSentryConfig(...nextConfig, {
+      autoInstrumentServerFunctions: false,
+      org: SENTRY_ORG,
+      project: SENTRY_PROJECT,
+      authToken: SENTRY_AUTH_TOKEN,
+      silent: true,
+    });

package.json

@@ -4,37 +4,37 @@
   "description": "React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.",
   "private": true,
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "dependencies": {
     "@editorjs/code": "^2.9.0",
-    "@editorjs/editorjs": "^2.30.2",
+    "@editorjs/editorjs": "^2.30.5",
     "@editorjs/header": "^2.8.7",
     "@editorjs/image": "^2.9.3",
     "@editorjs/link": "^2.6.2",
     "@editorjs/list": "^1.10.0",
     "@editorjs/paragraph": "^2.11.6",
-    "@editorjs/quote": "^2.6.0",
+    "@editorjs/quote": "~2.7.2",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@next/mdx": "^14.2.5",
-    "@sentry/nextjs": "^8.22.0",
+    "@next/mdx": "^14.2.7",
+    "@sentry/nextjs": "^8.28.0",
     "copy-webpack-plugin": "^12.0.2",
     "editorjs-html": "^3.4.3",
     "idea-react": "^2.0.0-rc.2",
-    "koajax": "^1.1.2",
+    "koajax": "^3.0.0",
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
     "lodash": "^4.17.21",
     "mobx": "^6.13.1",
-    "mobx-github": "^0.3.2",
+    "mobx-github": "^0.3.3",
     "mobx-i18n": "^0.5.0",
     "mobx-react": "^9.1.1",
-    "mobx-restful": "^0.7.0-rc.0",
-    "mobx-restful-table": "^2.0.0-rc.1",
-    "next": "^14.2.5",
+    "mobx-restful": "^1.0.1",
+    "mobx-restful-table": "^2.0.0",
+    "next": "^14.2.7",
     "next-pwa": "~5.6.0",
-    "next-ssr-middleware": "^0.8.2",
+    "next-ssr-middleware": "^0.8.7",
     "next-with-less": "^3.0.1",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
@@ -45,25 +45,29 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-mdx-frontmatter": "^5.0.0",
+    "undici": "^6.19.8",
     "web-utility": "^4.4.0",
-    "webpack": "^5.93.0"
+    "webpack": "^5.94.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.24.7",
     "@babel/plugin-transform-typescript": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
     "@types/lodash": "^4.17.7",
-    "@types/node": "^18.19.42",
-    "@types/react": "^18.3.3",
+    "@types/node": "^20.16.3",
+    "@types/react": "^18.3.5",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.5",
+    "eslint-config-next": "^14.2.7",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "husky": "^9.1.4",
-    "lint-staged": "^15.2.7",
+    "husky": "^9.1.5",
+    "lint-staged": "^15.2.10",
     "prettier": "^3.3.3",
     "typescript": "~5.5.4"
   },
+  "resolutions": {
+    "native-file-system-adapter": "npm:@tech_query/native-file-system-adapter@^3.0.1"
+  },
   "prettier": {
     "singleQuote": true,
     "trailingComma": "all",
@@ -79,7 +83,7 @@
     "build": "next build",
     "export": "next build  &&  next export",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "next lint  &&  tsc --noEmit",
     "test": "lint-staged  &&  npm run lint",
     "pack-image": "docker build -t idea2app/next-bootstrap-ts:latest .",
     "container": "docker rm -f next-bootstrap-ts  &&  docker run --name next-bootstrap-ts -p 3000:3000 -d idea2app/next-bootstrap-ts:latest"

pages/_app.tsx

@@ -1,5 +1,6 @@
 import '../styles/globals.less';
 
+import { HTTPError } from 'koajax';
 import { configure } from 'mobx';
 import { enableStaticRendering, observer } from 'mobx-react';
 import type { AppProps } from 'next/app';
@@ -18,6 +19,12 @@ enableStaticRendering(isServer());
 
 const { t } = i18n;
 
+globalThis.addEventListener?.('unhandledrejection', ({ reason }) => {
+  const { message } = (reason || {}) as HTTPError;
+
+  if (message) alert(message);
+});
+
 const AppShell: FC<AppProps> = observer(({ Component, pageProps, router }) => (
   <>
     <Head>

pages/_error.tsx

@@ -18,7 +18,7 @@ const enableSentry =
   process.env.NODE_ENV === 'development' || !process.env.SENTRY_AUTH_TOKEN;
 
 CustomErrorComponent.getInitialProps = async contextData => {
-  const { 'accept-language': acceptLanguage, cookie } =
+  const { 'accept-language': acceptLanguage, cookie = '' } =
     contextData.req!.headers;
   const { language } = parseCookie(cookie),
     languages = parseLanguageHeader(acceptLanguage || '');

pages/api/core.ts

@@ -1,5 +1,10 @@
 import { HTTPError } from 'koajax';
 import { NextApiRequest, NextApiResponse } from 'next';
+import { ProxyAgent, setGlobalDispatcher } from 'undici';
+
+const { HTTP_PROXY } = process.env;
+
+if (HTTP_PROXY) setGlobalDispatcher(new ProxyAgent(HTTP_PROXY));
 
 export type NextAPI = (
   req: NextApiRequest,
@@ -17,7 +22,8 @@ export function safeAPI(handler: NextAPI): NextAPI {
         res.status(400);
         return res.send({ message: (error as Error).message });
       }
-      let { message, status, body } = error;
+      const { message, response } = error;
+      let { status, body } = response;
 
       res.status(status);
       res.statusMessage = message;

pages/scroll-list.tsx

@@ -19,7 +19,7 @@ export const getServerSideProps = compose(
   async () => {
     const list = await new RepositoryModel('idea2app').getList();
 
-    return { props: { list } };
+    return { props: JSON.parse(JSON.stringify({ list })) };
   },
 );