[add] Custom 404 page for NGO & Service Status monitor link

components/NotFoundCard.tsx

@@ -0,0 +1,20 @@
+import { ErrorProps } from 'next/error';
+import { FC } from 'react';
+
+import { i18n } from '../models/Translation';
+
+export const NotFoundCard: FC<ErrorProps> = ({ title }) =>
+  i18n.currentLanguage.startsWith('zh') ? (
+    <script
+      src="//cdn.dnpw.org/404/v1.min.js"
+      // @ts-ignore
+      jumptarget="/"
+      jumptime="-1"
+      error={title}
+    />
+  ) : (
+    <iframe
+      className="w-100 vh-100 border-0"
+      src="https://notfound-static.fwebservices.be/en/404?key=66abb751ed312"
+    />
+  );

next.config.mjs

@@ -32,7 +32,7 @@ const nextConfig = withPWA(
     withMDX({
       output: 'standalone',
       pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
-
+      transpilePackages: ['@sentry/browser'],
       webpack: config => {
         config.plugins.push(
           new webpack.NormalModuleReplacementPlugin(/^node:/, resource => {
@@ -79,18 +79,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

@@ -10,19 +10,19 @@
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.2.5",
-    "@sentry/nextjs": "^8.17.0",
+    "@sentry/nextjs": "^8.23.0",
     "classnames": "^2.5.1",
     "copy-webpack-plugin": "^12.0.2",
-    "file-type": "^19.1.1",
+    "file-type": "^19.4.0",
     "idea-react": "^2.0.0-rc.2",
     "koajax": "^1.1.2",
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
     "license-filter": "^0.2.4",
     "lodash": "^4.17.21",
     "markdown-ime": "^1.0.3",
-    "marked": "^13.0.2",
-    "mobx": "^6.13.0",
+    "marked": "^13.0.3",
+    "mobx": "^6.13.1",
     "mobx-github": "^0.3.2",
     "mobx-i18n": "^0.5.0",
     "mobx-react": "^9.1.1",
@@ -48,21 +48,21 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.24.7",
-    "@babel/plugin-transform-typescript": "^7.24.8",
+    "@babel/plugin-transform-typescript": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@types/lodash": "^4.17.6",
-    "@types/node": "^18.19.39",
+    "@types/lodash": "^4.17.7",
+    "@types/node": "^18.19.43",
     "@types/react": "^18.3.3",
     "@types/turndown": "^5.0.4",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.5",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "get-git-folder": "^0.1.2",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.7",
+    "husky": "^9.1.4",
+    "lint-staged": "^15.2.8",
     "prettier": "^3.3.3",
-    "typescript": "~5.5.3"
+    "typescript": "~5.5.4"
   },
   "prettier": {
     "singleQuote": true,

pages/_app.tsx

@@ -1,11 +1,12 @@
 import '../styles/globals.less';
 
+import { Icon } from 'idea-react';
 import { configure } from 'mobx';
 import { enableStaticRendering, observer } from 'mobx-react';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { FC } from 'react';
-import { Image } from 'react-bootstrap';
+import { Col, Container, Image, Row } from 'react-bootstrap';
 
 import { MainNavigator } from '../components/MainNavigator';
 import { MDXLayout } from '../components/MDXLayout';
@@ -37,18 +38,39 @@ const AppShell: FC<AppProps> = observer(({ Component, pageProps, router }) => (
       </div>
     )}
 
-    <footer className="flex-fill d-flex justify-content-center align-items-center border-top py-4">
-      <a
-        className="flex-fill d-flex justify-content-center align-items-center"
-        href="https://vercel.com?utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {t('powered_by')}
-        <span className="mx-2">
-          <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-        </span>
-      </a>
+    <footer className="border-top bg-light text-secondary py-5">
+      <Container>
+        <Row className="align-items-center small text-center g-2">
+          <Col xs={12} sm={8}>
+            <a
+              className="flex-fill d-flex justify-content-center align-items-center"
+              href="https://vercel.com?utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {t('powered_by')}
+              <span className="mx-2">
+                <Image
+                  src="/vercel.svg"
+                  alt="Vercel Logo"
+                  width={72}
+                  height={16}
+                />
+              </span>
+            </a>
+          </Col>
+          <Col xs={12} sm={1}>
+            <a
+              className="stretched-link"
+              target="_blank"
+              href="https://monitor.kaiyuanshe.cn/status/service"
+              rel="noreferrer"
+            >
+              <Icon name="hdd-network" size={1.5} />
+            </a>
+          </Col>
+        </Row>
+      </Container>
     </footer>
   </>
 ));

pages/_error.tsx

@@ -1,19 +1,33 @@
 import * as Sentry from '@sentry/nextjs';
+import { parseCookie, parseLanguageHeader } from 'mobx-i18n';
 import type { NextPage } from 'next';
 import type { ErrorProps } from 'next/error';
 import Error from 'next/error';
 
-const CustomErrorComponent: NextPage<ErrorProps> = ({ statusCode }) => (
-  <Error statusCode={statusCode} />
+import { NotFoundCard } from '../components/NotFoundCard';
+import { i18n } from '../models/Translation';
+
+const CustomErrorComponent: NextPage<ErrorProps> = props => (
+  <>
+    <Error {...props} />
+
+    <NotFoundCard {...props} />
+  </>
 );
+const enableSentry =
+  process.env.NODE_ENV === 'development' || !process.env.SENTRY_AUTH_TOKEN;
 
 CustomErrorComponent.getInitialProps = async contextData => {
-  await Sentry.captureUnderscoreErrorException(contextData);
+  const { 'accept-language': acceptLanguage, cookie } =
+    contextData.req!.headers;
+  const { language } = parseCookie(cookie),
+    languages = parseLanguageHeader(acceptLanguage || '');
+
+  await i18n.loadLanguages([language, ...languages].filter(Boolean));
+
+  if (enableSentry) await Sentry.captureUnderscoreErrorException(contextData);
 
   return Error.getInitialProps(contextData);
 };
 
-export default process.env.NODE_ENV === 'development' ||
-!process.env.SENTRY_AUTH_TOKEN
-  ? Error
-  : CustomErrorComponent;
+export default CustomErrorComponent;