custom 404 page for NGO

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"
+    />
+  );

package.json

@@ -10,7 +10,7 @@
     "@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.22.0",
     "classnames": "^2.5.1",
     "copy-webpack-plugin": "^12.0.2",
     "file-type": "^19.1.1",
@@ -22,7 +22,7 @@
     "lodash": "^4.17.21",
     "markdown-ime": "^1.0.3",
     "marked": "^13.0.2",
-    "mobx": "^6.13.0",
+    "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/node": "^18.19.42",
     "@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",
+    "husky": "^9.1.4",
     "lint-staged": "^15.2.7",
     "prettier": "^3.3.3",
-    "typescript": "~5.5.3"
+    "typescript": "~5.5.4"
   },
   "prettier": {
     "singleQuote": true,

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;