chore: Update dependencies (#469)

* React 18

* Sentry part1

* Update sentry

* use @/util

* Update packages

.gitignore

@@ -42,3 +42,6 @@ reacher_backends.json
 # Supabase
 **/supabase/.branches
 **/supabase/.temp
+
+# Sentry Config File
+.sentryclirc

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -1,36 +1,55 @@
-// This file sets a custom webpack configuration to use your Next.js app
-// with Sentry.
-// https://nextjs.org/docs/api-reference/next.config.js/introduction
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-const { withSentryConfig } = require('@sentry/nextjs');
-
-const moduleExports = {
+const apiConfig = {
 	async rewrites() {
 		return [
 			{
 				// Rewrite `api.reacher.email/v0/check_email` to
 				// `reacher.email/api/v0/check_email` to be handled by the
 				// Next.js API handlers.
-				source: '/v0/check_email',
-				destination: '/api/v0/check_email',
+				source: "/v0/check_email",
+				destination: "/api/v0/check_email",
 			},
 		];
 	},
 };
 
-const SentryWebpackPluginOptions = {
-	// Additional config options for the Sentry Webpack plugin. Keep in mind that
-	// the following options are set automatically, and overriding them is not
-	// recommended:
-	//   release, url, org, project, authToken, configFile, stripPrefix,
-	//   urlPrefix, include, ignore
+// Injected content via Sentry wizard below
 
-	silent: true, // Suppresses all logs
-	// For all available options, see:
-	// https://github.com/getsentry/sentry-webpack-plugin#options.
-};
+const { withSentryConfig } = require("@sentry/nextjs");
+
+module.exports = withSentryConfig(
+	apiConfig,
+	{
+		// For all available options, see:
+		// https://github.com/getsentry/sentry-webpack-plugin#options
+
+		// Suppresses source map uploading logs during build
+		silent: true,
+		org: "reacherhq",
+		project: "webapp",
+	},
+	{
+		// For all available options, see:
+		// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+		// Upload a larger set of source maps for prettier stack traces (increases build time)
+		widenClientFileUpload: true,
+
+		// Transpiles SDK to be compatible with IE11 (increases bundle size)
+		transpileClientSDK: true,
+
+		// Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+		tunnelRoute: "/monitoring",
+
+		// Hides source maps from generated client bundles
+		hideSourceMaps: true,
+
+		// Automatically tree-shake Sentry logger statements to reduce bundle size
+		disableLogger: true,
 
-// Make sure adding Sentry options is the last code to run before exporting, to
-// ensure that your source maps include changes from all other Webpack plugins
-module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);
+		// Enables automatic instrumentation of Vercel Cron Monitors.
+		// See the following for more information:
+		// https://docs.sentry.io/product/crons/
+		// https://vercel.com/docs/cron-jobs
+		automaticVercelMonitors: true,
+	}
+);

package.json

@@ -16,34 +16,33 @@
 	"dependencies": {
 		"@geist-ui/react": "^2.1.5",
 		"@geist-ui/react-icons": "^1.0.1",
-		"@hcaptcha/react-hcaptcha": "^1.4.4",
+		"@hcaptcha/react-hcaptcha": "^1.9.2",
 		"@reacherhq/api": "^0.3.10",
 		"@sendinblue/client": "^3.3.1",
-		"@sentry/nextjs": "^7.45.0",
+		"@sentry/nextjs": "^7.86.0",
 		"@stripe/stripe-js": "^1.52.0",
 		"@supabase/supabase-js": "^1.35.7",
-		"@types/cors": "^2.8.13",
-		"@types/mailgun-js": "^0.22.13",
-		"@types/markdown-pdf": "^9.0.2",
-		"@types/mustache": "^4.2.2",
-		"@types/react": "^17.0.43",
-		"@types/react-dom": "^18.0.11",
-		"@types/request-ip": "^0.0.37",
-		"@types/uuid": "^9.0.1",
-		"axios": "^1.3.4",
+		"@types/cors": "^2.8.17",
+		"@types/mailgun-js": "^0.22.18",
+		"@types/markdown-pdf": "^9.0.5",
+		"@types/mustache": "^4.2.5",
+		"@types/react": "18.2.19",
+		"@types/react-dom": "^18.2.17",
+		"@types/request-ip": "^0.0.41",
+		"@types/uuid": "^9.0.7",
+		"axios": "^1.6.2",
 		"cors": "^2.8.5",
-		"date-fns": "^2.29.3",
+		"date-fns": "^2.30.0",
 		"mailgun-js": "^0.22.0",
 		"markdown-pdf": "^11.0.0",
 		"mustache": "^4.2.0",
-		"next": "^12.2.5",
+		"next": "13",
 		"rate-limiter-flexible": "^2.4.1",
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"stripe": "^9.13.0"
 	},
 	"devDependencies": {
-		"@amaurym/config": "^1.3.6",
 		"eslint-config-next": "^13.2.4",
 		"supabase": "^1.115.5",
 		"typescript": "^5.0.2",

sentry.client.config.ts

@@ -0,0 +1,30 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+	dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+	// Adjust this value in production, or use tracesSampler for greater control
+	tracesSampleRate: 1,
+
+	// Setting this option to true will print useful information to the console while you're setting up Sentry.
+	debug: false,
+
+	replaysOnErrorSampleRate: 1.0,
+
+	// This sets the sample rate to be 10%. You may want this to be 100% while
+	// in development and sample at a lower rate in production
+	replaysSessionSampleRate: 0.1,
+
+	// You can remove this option if you're not planning to use the Sentry Session Replay feature:
+	integrations: [
+		new Sentry.Replay({
+			// Additional Replay configuration goes in here, for example:
+			maskAllText: true,
+			blockAllMedia: true,
+		}),
+	],
+});

sentry.edge.config.ts

@@ -0,0 +1,16 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+	dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+	// Adjust this value in production, or use tracesSampler for greater control
+	tracesSampleRate: 1,
+
+	// Setting this option to true will print useful information to the console while you're setting up Sentry.
+	debug: false,
+});

sentry.server.config.ts

@@ -0,0 +1,15 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+	dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+	// Adjust this value in production, or use tracesSampler for greater control
+	tracesSampleRate: 1,
+
+	// Setting this option to true will print useful information to the console while you're setting up Sentry.
+	debug: false,
+});

src/app/global-error.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import Error from "next/error";
+import { useEffect } from "react";
+
+export default function GlobalError({ error }: { error: Error }) {
+	useEffect(() => {
+		Sentry.captureException(error);
+	}, [error]);
+
+	return (
+		<html>
+			<body>
+				<Error statusCode={500} />
+			</body>
+		</html>
+	);
+}

src/app/layout.tsx

@@ -0,0 +1,16 @@
+export const metadata = {
+	title: "Next.js",
+	description: "Generated by Next.js",
+};
+
+export default function RootLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<html lang="en">
+			<body>{children}</body>
+		</html>
+	);
+}

src/components/ApiUsage.tsx

@@ -3,10 +3,10 @@ import { Loader } from "@geist-ui/react-icons";
 import { format, parseISO } from "date-fns";
 import React, { useEffect, useState } from "react";
 
-import { sentryException } from "../util/sentry";
-import { subApiMaxCalls } from "../util/subs";
-import { getApiUsageClient } from "../util/supabaseClient";
-import { useUser } from "../util/useUser";
+import { sentryException } from "@/util/sentry";
+import { subApiMaxCalls } from "@/util/subs";
+import { getApiUsageClient } from "@/util/supabaseClient";
+import { useUser } from "@/util/useUser";
 import styles from "./ApiUsage.module.css";
 import { Demo } from "./Demo";
 

src/components/Dashboard.tsx

@@ -7,9 +7,9 @@ import {
 	COMMERCIAL_LICENSE_PRODUCT_ID,
 	productName,
 	SAAS_10K_PRODUCT_ID,
-} from "../util/subs";
-import { SupabaseProductWithPrice } from "../util/supabaseClient";
-import { useUser } from "../util/useUser";
+} from "@/util/subs";
+import { SupabaseProductWithPrice } from "@/util/supabaseClient";
+import { useUser } from "@/util/useUser";
 import { ApiUsage } from "./ApiUsage";
 import styles from "./Dashboard.module.css";
 

src/components/Demo.tsx

@@ -2,9 +2,9 @@ import { Button, Card, Code, Input, Spacer, Text } from "@geist-ui/react";
 import { CheckEmailOutput } from "@reacherhq/api/lib";
 import React, { useState } from "react";
 
-import { postData } from "../util/helpers";
-import { sentryException } from "../util/sentry";
-import { useUser } from "../util/useUser";
+import { postData } from "@/util/helpers";
+import { sentryException } from "@/util/sentry";
+import { useUser } from "@/util/useUser";
 
 function alertError(e: string) {
 	alert(

src/components/Footer.tsx

@@ -14,7 +14,12 @@ export function Footer(): React.ReactElement {
 				<Grid.Container justify="space-between">
 					<Grid className={styles.grid} xs={5}>
 						<div>
-							<Image height={48} src={logo} width={48} />
+							<Image
+								alt="Reacher logo"
+								height={48}
+								src={logo}
+								width={48}
+							/>
 							<Spacer />
 							<Text>
 								Made by Amaury, an indie

src/components/Nav.tsx

@@ -6,8 +6,8 @@ import { useRouter } from "next/router";
 import React from "react";
 
 import logo from "../assets/logo/reacher.svg";
-import { sentryException } from "../util/sentry";
-import { useUser } from "../util/useUser";
+import { sentryException } from "@/util/sentry";
+import { useUser } from "@/util/useUser";
 import styles from "./Nav.module.css";
 
 export function Nav(): React.ReactElement {
@@ -21,7 +21,12 @@ export function Nav(): React.ReactElement {
 					className="flex"
 					href={user ? "/dashboard" : "https://reacher.email"}
 				>
-					<Image height={24} src={logo} width={24} />
+					<Image
+						alt="Reacher logo"
+						height={24}
+						src={logo}
+						width={24}
+					/>
 					<Text className={styles.reacher} h3>
 						Reacher
 						{user && (

src/components/ProductCard/Card.tsx

@@ -1,8 +1,8 @@
-import { Card as GCard, Divider, Spacer, Text } from '@geist-ui/react';
-import { Check } from '@geist-ui/react-icons';
-import React from 'react';
+import { Card as GCard, Divider, Spacer, Text } from "@geist-ui/react";
+import { Check } from "@geist-ui/react-icons";
+import React from "react";
 
-import styles from './Card.module.css';
+import styles from "./Card.module.css";
 
 export interface CardProps extends React.HTMLProps<HTMLDivElement> {
 	body?: string | React.ReactChild;