Merge branch 'master' into 'production'

Prod deploy: Sentry

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!88

.env.development

@@ -1,2 +1,4 @@
+NEXT_PUBLIC_DEPLOY_ENV=development
+NEXT_PUBLIC_SENTRY_DSN=https://3ad96a8fb4ee46dab4a913049e2a8b38@o1039142.ingest.sentry.io/6007885
 NEXT_PUBLIC_API_URL=https://api.dev.sahkoinsinoorikilta.fi/api
 NEXT_PUBLIC_SITE_URL=https://dev.sahkoinsinoorikilta.fi

.env.prod

@@ -1,2 +1,4 @@
+NEXT_PUBLIC_DEPLOY_ENV=production
+NEXT_PUBLIC_SENTRY_DSN=https://3ad96a8fb4ee46dab4a913049e2a8b38@o1039142.ingest.sentry.io/6007885
 NEXT_PUBLIC_API_URL=https://api.sahkoinsinoorikilta.fi/api
 NEXT_PUBLIC_SITE_URL=https://sahkoinsinoorikilta.fi

.env.test

@@ -1,2 +1,3 @@
+NEXT_PUBLIC_DEPLOY_ENV=test
 NEXT_PUBLIC_API_URL=https://api.dev.sahkoinsinoorikilta.fi/api
 NEXT_PUBLIC_SITE_URL=https://dev.sahkoinsinoorikilta.fi

.eslintrc.js

@@ -34,6 +34,8 @@ module.exports = {
     ],
     "react/jsx-props-no-spreading": "off",
     "react/jsx-one-expression-per-line": "off",
+    "react/require-default-props": "off",
+    "react/default-props-match-prop-types": "off",
     // Temp
     "react/no-array-index-key": "warn",
     "jsx-a11y/label-has-associated-control": "off",

.gitignore

@@ -40,3 +40,6 @@ yarn-error.log*
 # SEO
 public/robots.txt
 public/sitemap.xml
+
+# Sentry
+.sentryclirc

.gitlab-ci.yml

@@ -88,7 +88,7 @@ publish:dev:
   script:
     - docker info
     - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN $CI_REGISTRY
-    - docker build . -t "$IMAGE_NAME":latest --build-arg NEXT_PUBLIC_API_URL=https://api.dev.sahkoinsinoorikilta.fi/api --build-arg NEXT_PUBLIC_SITE_URL=https://dev.sahkoinsinoorikilta.fi
+    - docker build . -t "$IMAGE_NAME":latest --build-arg SENTRY_AUTH_TOKEN="$SENTRY_AUTH_TOKEN" --build-arg NEXT_PUBLIC_DEPLOY_ENV=development --build-arg NEXT_PUBLIC_API_URL=https://api.dev.sahkoinsinoorikilta.fi/api --build-arg NEXT_PUBLIC_SITE_URL=https://dev.sahkoinsinoorikilta.fi
     - docker push "$IMAGE_NAME":latest
 
 publish:prod:
@@ -101,7 +101,7 @@ publish:prod:
   script:
     - docker info
     - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN $CI_REGISTRY
-    - docker build . -t "$IMAGE_NAME":prod
+    - docker build . -t "$IMAGE_NAME":prod --build-arg SENTRY_AUTH_TOKEN="$SENTRY_AUTH_TOKEN"
     - docker push "$IMAGE_NAME":prod
 
 deploy:dev:

Dockerfile

@@ -13,8 +13,11 @@ COPY . .
 COPY --from=deps /app/node_modules ./node_modules
 
 ENV NEXT_TELEMETRY_DISABLED=1
+ENV NEXT_PUBLIC_SENTRY_DSN=https://3ad96a8fb4ee46dab4a913049e2a8b38@o1039142.ingest.sentry.io/6007885
+ARG NEXT_PUBLIC_DEPLOY_ENV=production
 ARG NEXT_PUBLIC_API_URL=https://api.sahkoinsinoorikilta.fi/api
 ARG NEXT_PUBLIC_SITE_URL=https://sahkoinsinoorikilta.fi
+ARG SENTRY_AUTH_TOKEN
 RUN npm run build
 
 # Production image, copy all the files and run next

next.config.js

@@ -1,8 +1,21 @@
+const { withSentryConfig } = require("@sentry/nextjs");
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 });
 
-module.exports = withBundleAnalyzer({
+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
+
+  silent: true, // Suppresses all logs
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options.
+};
+
+module.exports = withBundleAnalyzer(withSentryConfig({
   target: "server",
   images: {
     domains: [
@@ -11,4 +24,4 @@ module.exports = withBundleAnalyzer({
       "api.dev.sahkoinsinoorikilta.fi",
     ],
   },
-});
+}, sentryWebpackPluginOptions));

package.json

@@ -48,10 +48,10 @@
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-airbnb-typescript": "^13.0.0",
-    "eslint-config-next": "^11.1.0",
+    "eslint-config-next": "^11.1.2",
     "husky": "^7.0.1",
     "jest": "^27.1.0",
-    "next-sitemap": "^1.6.162",
+    "next-sitemap": "^1.6.203",
     "npm-run-all": "^4.1.5",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
@@ -61,14 +61,15 @@
     "typescript": "^4.3.5"
   },
   "dependencies": {
-    "@next/bundle-analyzer": "^11.1.0",
+    "@next/bundle-analyzer": "^11.1.2",
     "@rjsf/core": "^3.1.0",
+    "@sentry/nextjs": "^6.14.3",
     "axios": "^0.21.1",
     "date-fns": "^2.23.0",
     "fast-deep-equal": "^3.1.3",
     "js-cookie": "^3.0.0",
     "lodash": "^4.17.21",
-    "next": "^11.1.0",
+    "next": "^11.1.2",
     "normalize.css": "^8.0.1",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",

sentry.client.config.js

@@ -0,0 +1,16 @@
+// This file configures the initialization of Sentry on the browser.
+// The config you add here will be used whenever a page is visited.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+const ENV = process.env.NEXT_PUBLIC_DEPLOY_ENV;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  environment: ENV,
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});

sentry.properties

@@ -0,0 +1,4 @@
+defaults.url=https://sentry.io/
+defaults.org=sik-kf
+defaults.project=sik-web
+cli.executable=../../.npm/_npx/a8388072043b4cbc/node_modules/@sentry/cli/bin/sentry-cli

sentry.server.config.js

@@ -0,0 +1,16 @@
+// 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";
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+const ENV = process.env.NEXT_PUBLIC_DEPLOY_ENV;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  environment: ENV,
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});

src/components/Widgets/MarkdownEditorWidget.tsx

@@ -4,9 +4,7 @@ import ReactMde from "react-mde";
 import { WidgetProps } from "@rjsf/core";
 import MarkdownStyles from "@views/common/MarkdownStyles";
 
-type MarkdownEditorWidgetProps = Omit<WidgetProps, "options"> & {
+type MarkdownEditorWidgetProps = WidgetProps;
-  options: unknown;
-};
 
 const Container = styled.div`
   background: white;

src/pages/_app.tsx

@@ -5,12 +5,13 @@ import styled, { createGlobalStyle } from "styled-components";
 import { ToastContainer } from "react-toastify";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
-import LocaleStore from "../i18n";
 
 import "react-mde/lib/styles/css/react-mde-all.css";
 import "react-toastify/dist/ReactToastify.css";
 import "normalize.css";
 
+import LocaleStore from "../i18n";
+
 const fontFamily = "'Montserrat', sans-serif";
 const fontSize = 12; // 16px
 const lineHeight = 1.5;

src/pages/_error.tsx

@@ -0,0 +1,65 @@
+import { NextPage, NextPageContext } from "next";
+import NextErrorComponent, { ErrorProps } from "next/error";
+import * as Sentry from "@sentry/nextjs";
+
+type MyErrorProps = ErrorProps & {
+  hasGetInitialPropsRun: boolean;
+  err: Error & {
+    statusCode?: number;
+  };
+};
+
+const MyError: NextPage<MyErrorProps> = ({ statusCode, hasGetInitialPropsRun, err }) => {
+  if (!hasGetInitialPropsRun && err) {
+    // getInitialProps is not called in case of
+    // https://github.com/vercel/next.js/issues/8592. As a workaround, we pass
+    // err via _app.js so it can be captured
+    Sentry.captureException(err);
+    // Flushing is not required in this case as it only happens on the client
+  }
+  return <NextErrorComponent statusCode={statusCode} />;
+};
+
+MyError.getInitialProps = async (context: NextPageContext) => {
+  const { err, asPath } = context;
+  const defaultProps = await NextErrorComponent.getInitialProps(context);
+  const errorInitialProps: MyErrorProps = {
+    ...defaultProps,
+    err,
+    // Workaround for https://github.com/vercel/next.js/issues/8592, mark when
+    hasGetInitialPropsRun: true,
+  };
+
+  // Running on the server, the response object (`res`) is available.
+  //
+  // Next.js will pass an err on the server if a page's data fetching methods
+  // threw or returned a Promise that rejected
+  //
+  // Running on the client (browser), Next.js will provide an err if:
+  //
+  //  - a page's `getInitialProps` threw or returned a Promise that rejected
+  //  - an exception was thrown somewhere in the React lifecycle (render,
+  //    componentDidMount, etc) that was caught by Next.js's React Error
+  //    Boundary. Read more about what types of exceptions are caught by Error
+  //    Boundaries: https://reactjs.org/docs/error-boundaries.html
+
+  if (err) {
+    Sentry.captureException(err);
+    // Flushing before returning is necessary if deploying to Vercel, see
+    // https://vercel.com/docs/platform/limits#streaming-responses
+    await Sentry.flush(2000);
+    return errorInitialProps;
+  }
+
+  // If this point is reached, getInitialProps was called without any
+  // information about what the error might be. This is unexpected and may
+  // indicate a bug introduced in Next.js, so record it in Sentry
+  Sentry.captureException(
+    new Error(`_error.js getInitialProps missing data at path: ${asPath}`),
+  );
+  await Sentry.flush(2000);
+
+  return errorInitialProps;
+};
+
+export default MyError;

src/views/FrontPage/FrontPageView.tsx

@@ -27,6 +27,7 @@ const Fingrid = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/fingr
 const NRCGroup = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/nrcgroup.jpg";
 const Okmetic = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/okmetic.jpg";
 const Ramboll = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/ramboll.png";
+const Helmet = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/helmet.png";
 
 interface FrontPageViewProps {
   events: Event[];
@@ -166,6 +167,9 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
             <Link to="https://fi.ramboll.com/">
               <Image src={Ramboll} alt="Ramboll" layout="responsive" width={200} height={100} objectFit="contain" />
             </Link>
+            <Link to="https://helmetcapital.fi/">
+              <Image src={Helmet} alt="Helmet" layout="responsive" width={200} height={100} objectFit="contain" />
+            </Link>
           </div>
           <Link to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Link>
         </SponsorReel>

tsconfig.json

@@ -61,7 +61,9 @@
     "next-sitemap.js",
     "next.config.js",
     "jest.config.js",
-    ".eslintrc.js"
+    ".eslintrc.js",
+    "sentry.client.config.js",
+    "sentry.server.config.js"
   ],
   "exclude": [
     "node_modules"