add sentry and fix a hydration bug

Author: cgsv

.example.env

@@ -4,4 +4,5 @@ SAVESUBS_X_AUTH_TOKEN=
 UPSTASH_REDIS_REST_URL=
 UPSTASH_REDIS_REST_TOKEN=
 UPSTASH_RATE_REDIS_REST_URL=
-UPSTASH_RATE_REDIS_REST_TOKEN=
+UPSTASH_RATE_REDIS_REST_TOKEN=
+NEXT_PUBLIC_SENTRY_DSN=

.gitignore

@@ -34,3 +34,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Sentry
+.sentryclirc
+
+# Sentry
+next.config.original.js

components/Header.tsx

@@ -5,15 +5,24 @@ import { checkOpenaiApiKey } from "@/lib/openai/openai";
 import { toast } from "react-hot-toast";
 import { useTranslation } from 'next-i18next';
 import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 
 export default function Header() {
     const [userKey, setUserKey] = useLocalStorage<string>("user-openai-apikey-trans");
-    const [translateEngine, setTranslateEngine] = useLocalStorage<string>("translate-engine");
+
+    // note: Hydration error when use SSR, do not use localStorage for display now
+    const [translateEngine, setTranslateEngine] = useState("");
+    const [translateEngineStore, setTranslateEngineStore] = useLocalStorage<string>("translate-engine");
+
     const { t } = useTranslation("common");
     const { i18n } = useTranslation();
     const router = useRouter();
     const tooltip = "Current using " + (translateEngine === "google" ? "google translate" : "GPT") + ", Click to change";
 
+    useEffect(() => {
+        setTranslateEngine(translateEngineStore || "");
+    }, []);
+    
     const changeLang = () => {
         const newLang = i18n.language === "en" ? "zh-CN" : "en";
 
@@ -26,6 +35,7 @@ export default function Header() {
     const changeEngine = () => {
         const newEngine = translateEngine === "google" ? "openai" : "google";
         setTranslateEngine(newEngine);
+        setTranslateEngineStore(newEngine);
     }
 
     const setOpenAIKey = () => {

next.config.js

@@ -1,3 +1,9 @@
+// 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/manual-setup/
+const { withSentryConfig } = require('@sentry/nextjs');
+
 /** @type {import('next').NextConfig} */
 const {i18n} = require('./next-i18next.config');
 
@@ -7,3 +13,9 @@ const nextConfig = {
 }
 
 module.exports = nextConfig
+
+module.exports = withSentryConfig(
+  module.exports,
+  { silent: true },
+  { hideSourcemaps: true },
+);