[add] Sentry monitor configuration

[optimize] Resource Limitation of Docker Compose
[optimize] update Upstream packages

.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 = 

Dockerfile

@@ -1,6 +1,6 @@
 FROM node:18-slim AS base
 RUN apt-get update && \
-    apt-get install curl -y --no-install-recommends
+    apt-get install ca-certificates curl -y --no-install-recommends
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable

README.md

@@ -10,11 +10,12 @@
 ## Technology stack
 
 - Language: [TypeScript v5][10] + [MDX v3][11]
-- Component engine: [Nextjs v14][12]
+- Component engine: [Next.js v14][12]
 - Component suite: [Bootstrap v5][13]
 - 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-L12
+[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

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

@@ -18,12 +18,13 @@
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "@next/mdx": "^14.0.4",
+    "@sentry/nextjs": "^7.91.0",
     "copy-webpack-plugin": "^11.0.0",
     "editorjs-html": "^3.4.3",
     "idea-react": "^1.0.0-rc.30",
     "koajax": "^0.9.6",
     "less": "^4.2.0",
-    "less-loader": "^11.1.3",
+    "less-loader": "^11.1.4",
     "lodash": "^4.17.21",
     "mobx": "~6.10.2",
     "mobx-i18n": "^0.4.2",
@@ -32,11 +33,11 @@
     "mobx-restful-table": "^1.2.2",
     "next": "^14.0.4",
     "next-pwa": "~5.6.0",
-    "next-ssr-middleware": "^0.6.1",
+    "next-ssr-middleware": "^0.6.2",
     "next-with-less": "^3.0.1",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.9.1",
+    "react-bootstrap": "^2.9.2",
     "react-bootstrap-editor": "^1.0.5",
     "react-dom": "^18.2.0",
     "react-editor-js": "^2.1.0",
@@ -49,8 +50,8 @@
   "devDependencies": {
     "@octokit/openapi-types": "^19.1.0",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^18.19.3",
-    "@types/react": "^18.2.45",
+    "@types/node": "^18.19.4",
+    "@types/react": "^18.2.46",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.4",
     "eslint-config-prettier": "^9.1.0",

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;