integrate sentry for error logging

client/.gitignore

@@ -39,4 +39,7 @@ yarn-error.log*
 __ENV.js
 
 # next-sitemap
-sitemap*.xml
+sitemap*.xml
+
+# Sentry
+.sentryclirc

client/next.config.js

@@ -1,5 +1,6 @@
 const { version } = require('../package.json');
 const { i18n } = require('./next-i18next.config');
+const { withSentryConfig } = require('@sentry/nextjs');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -15,6 +16,10 @@ const nextConfig = {
     domains: ['cdn.rxresu.me', 'www.gravatar.com'],
   },
 
+  sentry: {
+    hideSourceMaps: true,
+  },
+
   // Hack to make Tailwind darkMode 'class' strategy with CSS Modules
   // Ref: https://github.com/tailwindlabs/tailwindcss/issues/3258#issuecomment-968368156
   webpack: (config) => {
@@ -47,4 +52,9 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+/** @type {import('@sentry/nextjs').SentryWebpackPluginOptions} */
+const sentryConfig = {
+  silent: true,
+};
+
+module.exports = withSentryConfig(nextConfig, sentryConfig);

client/package.json

@@ -21,9 +21,10 @@
     "@mui/material": "^5.10.15",
     "@mui/system": "^5.10.15",
     "@mui/x-date-pickers": "5.0.8",
-    "@next/env": "^13.0.4",
+    "@next/env": "^13.0.5",
     "@react-oauth/google": "^0.5.0",
     "@reduxjs/toolkit": "^1.9.0",
+    "@sentry/nextjs": "^7.21.1",
     "axios": "^1.2.0",
     "clsx": "^1.2.1",
     "dayjs": "^1.11.6",
@@ -33,7 +34,7 @@
     "md5-hex": "^4.0.0",
     "monaco-editor": "^0.34.1",
     "nanoid": "^3.3.4",
-    "next": "13.0.4",
+    "next": "13.0.5",
     "next-i18next": "^13.0.0",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
@@ -59,10 +60,9 @@
   "devDependencies": {
     "@babel/core": "^7.20.2",
     "@reactive-resume/schema": "workspace:*",
-    "eslint-plugin-unused-imports": "^2.0.0",
     "@tailwindcss/typography": "^0.5.8",
     "@types/downloadjs": "^1.4.3",
-    "@types/lodash": "^4.14.189",
+    "@types/lodash": "^4.14.190",
     "@types/node": "^18.11.9",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
@@ -72,8 +72,9 @@
     "@types/webfontloader": "^1.6.35",
     "autoprefixer": "^10.4.13",
     "csstype": "^3.1.1",
-    "eslint-config-next": "^13.0.4",
+    "eslint-config-next": "^13.0.5",
     "eslint-plugin-tailwindcss": "^3.7.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
     "next-sitemap": "^3.1.32",
     "postcss": "^8.4.19",
     "sass": "^1.56.1",

client/pages/_error.tsx

@@ -0,0 +1,16 @@
+import * as Sentry from '@sentry/nextjs';
+import type { NextPage } from 'next';
+import type { ErrorProps } from 'next/error';
+import NextErrorComponent from 'next/error';
+
+const CustomErrorComponent: NextPage<ErrorProps> = (props) => {
+  return <NextErrorComponent statusCode={props.statusCode} />;
+};
+
+CustomErrorComponent.getInitialProps = async (contextData) => {
+  await Sentry.captureUnderscoreErrorException(contextData);
+
+  return NextErrorComponent.getInitialProps(contextData);
+};
+
+export default CustomErrorComponent;

client/sentry.client.config.js

@@ -0,0 +1,7 @@
+import env from '@beam-australia/react-env';
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: env('CLIENT_SENTRY_DSN'),
+  tracesSampleRate: 1.0,
+});

client/sentry.properties

@@ -0,0 +1,3 @@
+defaults.project=client
+defaults.org=reactive-resume
+defaults.url=https://sentry.io/

client/sentry.server.config.js

@@ -0,0 +1,7 @@
+import env from '@beam-australia/react-env';
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: env('CLIENT_SENTRY_DSN'),
+  tracesSampleRate: 1.0,
+});

client/services/axios.ts

@@ -19,7 +19,6 @@ const axios = _axios.create({ baseURL });
 axios.interceptors.request.use((config) => {
   const { accessToken } = store.getState().auth;
 
-  // @ts-ignore
   config.headers = {
     ...config.headers,
     Authorization: `Bearer ${accessToken}`,