@akinon/next 1.82.0-rc.16 → 1.82.0-rc.18

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @akinon/next
 
+## 1.82.0-rc.18
+
+### Minor Changes
+
+- e4761d2: Refactor import statement for ROUTES in error-page component
+
+## 1.82.0-rc.17
+
+### Minor Changes
+
+- e2c6d426: ZERO-2935: Add @sentry/nextjs dependency to akinon-next and remove from projectzeronext
+- 70bc0aed: ZERO-3284: Set tracesSampleRate in Sentry configuration
+
 ## 1.82.0-rc.16
 
 ### Minor Changes

package/hooks/index.ts

@@ -10,3 +10,4 @@ export * from './use-mobile-iframe-handler';
 export * from './use-payment-options';
 export * from './use-pagination';
 export * from './use-message-listener';
+export * from './use-sentry-uncaught-errors';

package/hooks/use-sentry-uncaught-errors.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import * as Sentry from '@sentry/nextjs';
+import { ClientLogType } from '@akinon/next/sentry';
+
+export const useSentryUncaughtErrors = (error: Error & { digest?: string }) => {
+  useEffect(() => {
+    Sentry.withScope(function (scope) {
+      scope.setLevel('fatal');
+      scope.setTags({
+        APP_TYPE: 'ProjectZeroNext',
+        TYPE: 'Client',
+        LOG_TYPE: ClientLogType.UNCAUGHT_ERROR_PAGE
+      });
+      scope.setExtra('error', error);
+
+      const error_ = new Error('FATAL: Uncaught client error');
+      error_.name = 'UNCAUGHT_ERROR_PAGE';
+
+      Sentry.captureException(error_, {
+        fingerprint: ['UNCAUGHT_ERROR_PAGE', error.digest]
+      });
+    });
+  }, [error]);
+};

package/instrumentation/index.ts

@@ -1,4 +1,5 @@
 import { initSentry } from '../sentry';
+import * as Sentry from '@sentry/nextjs';
 
 export async function register() {
   if (process.env.NEXT_RUNTIME === 'nodejs') {
@@ -10,3 +11,5 @@ export async function register() {
     initSentry('Edge');
   }
 }
+
+export const onRequestError = Sentry.captureRequestError;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.82.0-rc.16",
+  "version": "1.82.0-rc.18",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -21,6 +21,7 @@
     "@opentelemetry/semantic-conventions": "1.19.0",
     "@reduxjs/toolkit": "1.9.7",
     "@neshca/cache-handler": "1.9.0",
+    "@sentry/nextjs": "9.5.0",
     "cross-spawn": "7.0.3",
     "generic-pool": "3.9.0",
     "react-redux": "8.1.3",
@@ -30,7 +31,7 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.82.0-rc.16",
+    "@akinon/eslint-plugin-projectzero": "1.82.0-rc.18",
     "@types/react-redux": "7.1.30",
     "@types/set-cookie-parser": "2.4.7",
     "@typescript-eslint/eslint-plugin": "6.7.4",

package/sentry/index.ts

@@ -30,7 +30,7 @@ export const initSentry = (
         TYPE: type
       }
     },
-    tracesSampleRate: 1.0,
+    tracesSampleRate: 0,
     integrations: [],
     beforeSend: (event, hint) => {
       if (

package/views/error-page.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import { useLocalization } from '../hooks';
+import { Button, Link } from '../components';
+import { ROUTES } from 'routes';
+
+export default function PzErrorPage({
+  error,
+  reset
+}: {
+  error: Error & { digest?: string; isServerError?: boolean };
+  reset: () => void;
+}) {
+  const [isServerError, setIsServerError] = useState(false);
+
+  useEffect(() => {
+    if ('isServerError' in error) {
+      setIsServerError(true);
+      return;
+    }
+
+    setIsServerError(!!error.digest);
+  }, [error]);
+
+  return isServerError ? (
+    <ServerErrorUI />
+  ) : (
+    <ClientErrorUI error={error} reset={reset} />
+  );
+}
+
+function ClientErrorUI({
+  error,
+  reset
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const { t } = useLocalization();
+
+  const errorMessage = error?.message || 'Unknown error';
+
+  return (
+    <section className="text-center px-6 my-14 md:px-0 md:m-14">
+      <div className="text-4xl font-bold md:text-6xl text-red-500">Oops!</div>
+      <h1 className="text-lg md:text-xl mt-4">
+        {t('common.client_error.title')}
+      </h1>
+      <p className="text-lg md:text-xl mt-2">
+        {t('common.client_error.description')}
+      </p>
+
+      <div className="mt-4 mx-auto max-w-lg">
+        <p className="text-xs text-gray-600 font-mono bg-gray-100 p-3 rounded overflow-auto text-left">
+          <span className="font-semibold">Error:</span> {errorMessage}
+        </p>
+      </div>
+
+      <div className="mt-6 flex flex-col gap-4 items-center justify-center">
+        <Link href={ROUTES.HOME} className="text-lg underline">
+          {t('common.client_error.link_text')}
+        </Link>
+        <Button onClick={reset} className="text-lg w-28">
+          {t('common.try_again')}
+        </Button>
+      </div>
+    </section>
+  );
+}
+
+function ServerErrorUI() {
+  const { t } = useLocalization();
+
+  const reloadPage = () => {
+    window.location.reload();
+  };
+
+  return (
+    <section className="text-center px-6 my-14 md:px-0 md:m-14">
+      <div className="text-7xl font-bold md:text-8xl">500</div>
+      <h1 className="text-lg md:text-xl"> {t('common.page_500.title')} </h1>
+      <p className="text-lg md:text-xl"> {t('common.page_500.description')} </p>
+
+      <div className="mt-6 flex flex-col gap-4 items-center justify-center">
+        <Link href={ROUTES.HOME} className="text-lg underline">
+          {t('common.page_500.link_text')}
+        </Link>
+        <Button onClick={reloadPage} className="text-lg w-28">
+          {t('common.try_again')}
+        </Button>
+      </div>
+    </section>
+  );
+}