[optimize] sync Upstream Scaffold

.env

@@ -1,2 +1,6 @@
 NEXT_PUBLIC_SITE_NAME=Next-Bootstrap.ts
-NEXT_PUBLIC_SITE_SUMMARY=React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.
+NEXT_PUBLIC_SITE_SUMMARY=React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.
+
+NEXT_PUBLIC_SENTRY_DSN =
+SENTRY_ORG =
+SENTRY_PROJECT = 

.husky/pre-commit

@@ -1,5 +1 @@
-#!/bin/sh
-
-. "$(dirname "$0")/_/husky.sh"
-
 npm test

.husky/pre-push

@@ -1,5 +1 @@
-#!/bin/sh
-
-. "$(dirname "$0")/_/husky.sh"
-
 npm run build

Dockerfile

@@ -1,14 +1,19 @@
 FROM node:18-slim AS base
 RUN apt-get update && \
-    apt-get install curl -y --no-install-recommends
+    apt-get install ca-certificates curl libjemalloc-dev -y --no-install-recommends  && \
+    rm -rf /var/lib/apt/lists/*
+# set environment variable to preload JEMalloc
+ENV LD_PRELOAD="/usr/lib/x86_64-linux-gnu/libjemalloc.so.2"
+# set GC time, set arenas number, set background_thread run GC
+ENV MALLOC_CONF=dirty_decay_ms:1000,narenas:2,background_thread:true
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
 COPY . /app
 WORKDIR /app
 
 FROM base AS prod-deps
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store  pnpm i --P --frozen-lockfile --ignore-scripts
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store  pnpm i -P --frozen-lockfile --ignore-scripts
 
 FROM base AS build
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store  pnpm i --frozen-lockfile

README.md

@@ -15,6 +15,7 @@
 - PWA framework: [Workbox v6][14]
 - State management: [MobX v6][15]
 - CI / CD: GitHub [Actions][16] + [Vercel][17]
+- Monitor service: [Sentry][18]
 
 ## Major examples
 
@@ -25,19 +26,19 @@
 
 ## Best practice
 
-1.  Install **[Settings][18] GitHub app** in your account or organization
+1.  Install **[Settings][19] GitHub app** in your account or organization
 
-2.  Click the **[<kbd>Use this template</kbd>][19] button** on the top of this GitHub repository's home page, then create your own repository in the app-installed namespace above
+2.  Click the **[<kbd>Use this template</kbd>][20] button** on the top of this GitHub repository's home page, then create your own repository in the app-installed namespace above
 
-3.  Click the **[<kbd>Open in GitHub codespaces</kbd>][20] button** on the top of ReadMe file, then an **online VS Code development environment** will be started immediately
+3.  Click the **[<kbd>Open in GitHub codespaces</kbd>][21] button** on the top of ReadMe file, then an **online VS Code development environment** will be started immediately
 
-4.  Set [Vercel variables][21] as [Repository secrets][22], then every commit will get an independent **Preview URL**
+4.  Set [Vercel variables][22] as [Repository secrets][23], then every commit will get an independent **Preview URL**
 
-5.  Recommend to add a [Notification step in GitHub actions][23] for your Team IM app
+5.  Recommend to add a [Notification step in GitHub actions][24] for your Team IM app
 
-6.  Remind the PMs & users of your product to submit **Feature/Enhancement** requests or **Bug** reports with [Issue forms][24] instead of IM messages or Mobile Phone calls
+6.  Remind the PMs & users of your product to submit **Feature/Enhancement** requests or **Bug** reports with [Issue forms][25] instead of IM messages or Mobile Phone calls
 
-7.  Collect all these issues into [Project kanbans][25], then create **Pull requests** & add `closes #issue_number` into its description for automation
+7.  Collect all these issues into [Project kanbans][26], then create **Pull requests** & add `closes #issue_number` into its description for automation
 
 ## Getting Started
 
@@ -52,26 +53,35 @@ Open http://localhost:3000 with your browser to see the result.
 
 You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
-[API routes][26] can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in `pages/api/hello.ts`.
+[API routes][27] can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in `pages/api/hello.ts`.
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes][27] instead of React pages.
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes][28] instead of React pages.
 
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:
 
-- [Next.js Documentation][28] - learn about Next.js features and API.
-- [Learn Next.js][29] - an interactive Next.js tutorial.
+- [Next.js Documentation][29] - learn about Next.js features and API.
+- [Learn Next.js][30] - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository][30] - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository][31] - your feedback and contributions are welcome!
 
 ## Deployment
 
+### Environment variables
+
+|           name           |     file     |       description       |
+| :----------------------: | :----------: | :---------------------: |
+|   `SENTRY_AUTH_TOKEN`    | `.env.local` | [Official document][32] |
+|       `SENTRY_ORG`       |    `.env`    | [Official document][33] |
+|     `SENTRY_PROJECT`     |    `.env`    | [Official document][33] |
+| `NEXT_PUBLIC_SENTRY_DSN` |    `.env`    | [Official document][34] |
+
 ### Vercel
 
 The easiest way to deploy your Next.js app is to use the [Vercel Platform][17] from the creators of Next.js.
 
-Check out our [Next.js deployment documentation][31] for more details.
+Check out our [Next.js deployment documentation][35] for more details.
 
 ### Docker
 
@@ -97,17 +107,21 @@ pnpm container
 [15]: https://mobx.js.org/
 [16]: https://github.com/features/actions
 [17]: https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme
-[18]: https://github.com/apps/settings
-[19]: https://github.com/new?template_name=Next-Bootstrap-ts&template_owner=idea2app
-[20]: https://codespaces.new/idea2app/Next-Bootstrap-ts
-[21]: https://github.com/idea2app/Next-Bootstrap-ts/blob/80967ed49045af9dbcf4d3695a2c39d53a6f71f1/.github/workflows/pull-request.yml#L9-L12
-[22]: https://github.com/idea2app/Next-Bootstrap-ts/settings/secrets/actions
-[23]: https://github.com/kaiyuanshe/kaiyuanshe.github.io/blob/bb4675a56bf1d6b207231313da5ed0af7cf0ebd6/.github/workflows/pull-request.yml#L32-L56
-[24]: https://github.com/idea2app/Next-Bootstrap-ts/issues/new/choose
-[25]: https://github.com/idea2app/Next-Bootstrap-ts/projects
-[26]: https://nextjs.org/docs/api-routes/introduction
+[18]: https://sentry.io/
+[19]: https://github.com/apps/settings
+[20]: https://github.com/new?template_name=Next-Bootstrap-ts&template_owner=idea2app
+[21]: https://codespaces.new/idea2app/Next-Bootstrap-ts
+[22]: https://github.com/idea2app/Next-Bootstrap-ts/blob/80967ed49045af9dbcf4d3695a2c39d53a6f71f1/.github/workflows/pull-request.yml#L9-L11
+[23]: https://github.com/idea2app/Next-Bootstrap-ts/settings/secrets/actions
+[24]: https://github.com/kaiyuanshe/kaiyuanshe.github.io/blob/bb4675a56bf1d6b207231313da5ed0af7cf0ebd6/.github/workflows/pull-request.yml#L32-L56
+[25]: https://github.com/idea2app/Next-Bootstrap-ts/issues/new/choose
+[26]: https://github.com/idea2app/Next-Bootstrap-ts/projects
 [27]: https://nextjs.org/docs/api-routes/introduction
-[28]: https://nextjs.org/docs
-[29]: https://nextjs.org/learn
-[30]: https://github.com/vercel/next.js/
-[31]: https://nextjs.org/docs/deployment
+[28]: https://nextjs.org/docs/api-routes/introduction
+[29]: https://nextjs.org/docs
+[30]: https://nextjs.org/learn
+[31]: https://github.com/vercel/next.js/
+[32]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-configuration-files-for-source-map-upload
+[33]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-environment-variables
+[34]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#create-initialization-config-files
+[35]: https://nextjs.org/docs/deployment

babel.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  presets: [
+    // https://babeljs.io/docs/babel-preset-react
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+        development: process.env.BABEL_ENV === 'development',
+      },
+    ],
+  ],
+  plugins: [
+    // https://github.com/babel/babel/issues/16262#issuecomment-1962832499
+    [
+      '@babel/plugin-transform-typescript',
+      {
+        allowDeclareFields: true,
+        allowNamespaces: true,
+        allExtensions: true,
+        isTSX: true,
+      },
+    ],
+    // https://babeljs.io/docs/babel-plugin-proposal-decorators#note-compatibility-with-babelplugin-transform-class-properties
+    ['@babel/plugin-proposal-decorators', { version: '2023-05' }],
+  ],
+};

components/Git/Logo.tsx

@@ -1,4 +1,4 @@
-import * as MobX from 'mobx';
+import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { PureComponent } from 'react';
 import { Image } from 'react-bootstrap';
@@ -9,13 +9,8 @@ export interface GitLogoProps {
 
 @observer
 export class GitLogo extends PureComponent<GitLogoProps> {
-  constructor(props: GitLogoProps) {
-    super(props);
-    MobX.makeObservable?.(this);
-  }
-
-  @MobX.observable
-  path = '';
+  @observable
+  accessor path = '';
 
   async componentDidMount() {
     const { name } = this.props;

docker-compose.yml

@@ -16,6 +16,11 @@ services:
     labels:
       - 'autoheal=true'
     restart: always
+    deploy:
+      resources:
+        limits:
+          cpus: '0.80'
+          memory: 500M
     logging:
       driver: 'json-file'
       options:

next.config.mjs

@@ -1,4 +1,5 @@
 import NextMDX from '@next/mdx';
+import { withSentryConfig } from '@sentry/nextjs';
 import CopyPlugin from 'copy-webpack-plugin';
 import { readdirSync, statSync } from 'fs';
 import setPWA from 'next-pwa';
@@ -8,7 +9,8 @@ import RemarkGfm from 'remark-gfm';
 import RemarkMdxFrontMatter from 'remark-mdx-frontmatter';
 import webpack from 'webpack';
 
-const { NODE_ENV } = process.env;
+const { NODE_ENV, SENTRY_AUTH_TOKEN, SENTRY_ORG, SENTRY_PROJECT } = process.env;
+const isDev = NODE_ENV === 'development';
 
 const withMDX = NextMDX({
   extension: /\.mdx?$/,
@@ -21,11 +23,11 @@ const withPWA = setPWA({
   dest: 'public',
   register: true,
   skipWaiting: true,
-  disable: NODE_ENV === 'development',
+  disable: isDev,
 });
 
 /** @type {import('next').NextConfig} */
-export default withPWA(
+const nextConfig = withPWA(
   withLess(
     withMDX({
       pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
@@ -73,3 +75,21 @@ export default 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,
+      },
+    );

package.json

@@ -1,63 +1,67 @@
 {
   "name": "@idea2app/next-bootstrap-ts",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.",
   "private": true,
   "engines": {
     "node": ">=18"
   },
   "dependencies": {
     "@editorjs/code": "^2.9.0",
-    "@editorjs/editorjs": "^2.28.2",
+    "@editorjs/editorjs": "^2.29.0",
     "@editorjs/header": "^2.8.1",
     "@editorjs/image": "^2.9.0",
     "@editorjs/link": "^2.6.2",
     "@editorjs/list": "^1.9.0",
     "@editorjs/paragraph": "^2.11.3",
     "@editorjs/quote": "^2.6.0",
-    "@mdx-js/loader": "^3.0.0",
-    "@mdx-js/react": "^3.0.0",
-    "@next/mdx": "^14.0.4",
-    "copy-webpack-plugin": "^11.0.0",
+    "@mdx-js/loader": "^3.0.1",
+    "@mdx-js/react": "^3.0.1",
+    "@next/mdx": "^14.1.1",
+    "@sentry/nextjs": "^7.104.0",
+    "copy-webpack-plugin": "^12.0.2",
     "editorjs-html": "^3.4.3",
-    "idea-react": "^1.0.0-rc.30",
+    "idea-react": "^2.0.0-rc.2",
     "koajax": "^0.9.6",
     "less": "^4.2.0",
-    "less-loader": "^11.1.3",
+    "less-loader": "^12.2.0",
     "lodash": "^4.17.21",
-    "mobx": "~6.10.2",
-    "mobx-i18n": "^0.4.2",
-    "mobx-react": "~9.0.2",
-    "mobx-restful": "^0.6.12",
-    "mobx-restful-table": "^1.2.2",
-    "next": "^14.0.4",
+    "mobx": "^6.12.0",
+    "mobx-i18n": "^0.5.0",
+    "mobx-react": "^9.1.0",
+    "mobx-restful": "^0.7.0-rc.0",
+    "mobx-restful-table": "^2.0.0-rc.0",
+    "next": "^14.1.1",
     "next-pwa": "~5.6.0",
-    "next-ssr-middleware": "^0.6.1",
+    "next-ssr-middleware": "^0.7.0",
     "next-with-less": "^3.0.1",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.9.1",
-    "react-bootstrap-editor": "^1.0.5",
+    "react-bootstrap": "^2.10.1",
+    "react-bootstrap-editor": "^2.0.1",
     "react-dom": "^18.2.0",
     "react-editor-js": "^2.1.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-mdx-frontmatter": "^4.0.0",
-    "web-utility": "^4.1.3",
-    "webpack": "^5.89.0"
+    "web-utility": "^4.3.0",
+    "webpack": "^5.90.3"
   },
   "devDependencies": {
-    "@octokit/openapi-types": "^19.1.0",
+    "@babel/plugin-proposal-decorators": "^7.24.0",
+    "@babel/plugin-transform-typescript": "^7.23.6",
+    "@babel/preset-react": "^7.23.3",
+    "@octokit/openapi-types": "^20.0.0",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^18.19.3",
-    "@types/react": "^18.2.45",
-    "eslint": "^8.56.0",
-    "eslint-config-next": "^14.0.4",
+    "@types/node": "^18.19.21",
+    "@types/react": "^18.2.61",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.1.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^15.2.0",
-    "prettier": "^3.1.1",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "typescript": "~5.3.3"
   },
   "prettier": {
@@ -70,7 +74,7 @@
     "*.{js,mjs,ts,tsx}": "eslint --fix"
   },
   "scripts": {
-    "prepare": "husky install",
+    "prepare": "husky",
     "dev": "next dev",
     "build": "next build",
     "export": "next build  &&  next export",

pages/_error.tsx

@@ -0,0 +1,19 @@
+import * as Sentry from '@sentry/nextjs';
+import type { NextPage } from 'next';
+import type { ErrorProps } from 'next/error';
+import Error from 'next/error';
+
+const CustomErrorComponent: NextPage<ErrorProps> = ({ statusCode }) => (
+  <Error statusCode={statusCode} />
+);
+
+CustomErrorComponent.getInitialProps = async contextData => {
+  await Sentry.captureUnderscoreErrorException(contextData);
+
+  return Error.getInitialProps(contextData);
+};
+
+export default process.env.NODE_ENV === 'development' ||
+!process.env.SENTRY_AUTH_TOKEN
+  ? Error
+  : CustomErrorComponent;