feat: add Sentry to the demo (#106)

* feat: add Sentry to the demo

* fix: "default export is deprecated. Instead use `import { create } from 'zustand'`"

demo/.gitignore

@@ -35,3 +35,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+# Sentry
+.sentryclirc

demo/next.config.js

@@ -8,65 +8,78 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 })
 const withLess = require('next-with-less')
 const { getThemeVariables } = require('antd/dist/theme')
+const { withSentryConfig } = require('@sentry/nextjs')
+
+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.
+}
 
 // const dark = getThemeVariables({
 //   dark: true, // Enable dark mode
 //   compact: true, // Enable compact mode
 // })
 
+const withLessOptions = {
+  lessLoaderOptions: {
+    /* ... */
+    lessOptions: {
+      /* ... */
+      modifyVars: {
+        ...getThemeVariables({
+          dark: true, // Enable dark mode
+          compact: true, // Enable compact mode
+        }),
+
+        // Light
+        // 'primary-color': '#237f61',
+        // 'info-color': '#7ea695',
+        // 'text-selection-bg': '#7ea695',
+        // 'body-background': '#ccc',
+        // 'text-color': '#333', // major text color
+
+        // Dark
+        'layout-header-background': '#4c527f',
+        // 'primary-color': '#7fdcbd',
+        'primary-color': '#67b59a',
+        'info-color': '#589b84',
+        'text-selection-bg': '#5a8171',
+        'body-background': '#202020',
+        'text-color': '#ddd', // major text color
+
+        // Other
+        // 'font-size-base': '16px',
+        'link-focus-outline': 'auto',
+        'border-radius-base': '2px',
+        'font-family':
+          "'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+        'code-family':
+          "'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
+
+        /* ... */
+      },
+    },
+  },
+  lessOptions: {
+    /* ... */
+  },
+}
+
 /**
  * @type {import('next').NextConfig}
  */
 const nextConfig = withPlugins(
   [
     [withBundleAnalyzer],
-    [
-      withLess,
-      {
-        lessLoaderOptions: {
-          /* ... */
-          lessOptions: {
-            /* ... */
-            modifyVars: {
-              ...getThemeVariables({
-                dark: true, // Enable dark mode
-                compact: true, // Enable compact mode
-              }),
-
-              // Light
-              // 'primary-color': '#237f61',
-              // 'info-color': '#7ea695',
-              // 'text-selection-bg': '#7ea695',
-              // 'body-background': '#ccc',
-              // 'text-color': '#333', // major text color
-
-              // Dark
-              'layout-header-background': '#4c527f',
-              // 'primary-color': '#7fdcbd',
-              'primary-color': '#67b59a',
-              'info-color': '#589b84',
-              'text-selection-bg': '#5a8171',
-              'body-background': '#202020',
-              'text-color': '#ddd', // major text color
-
-              // Other
-              // 'font-size-base': '16px',
-              'link-focus-outline': 'auto',
-              'border-radius-base': '2px',
-              'font-family':
-                "'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
-              'code-family':
-                "'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
-
-              /* ... */
-            },
-          },
-        },
-        lessOptions: {
-          /* ... */
-        },
-      },
-    ],
+    [withLess, withLessOptions],
+    [withSentryConfig, sentryWebpackPluginOptions],
   ],
   {
     reactStrictMode: true,

demo/package.json

@@ -18,6 +18,7 @@
     "@next/bundle-analyzer": "^13.3.0",
     "@next/eslint-plugin-next": "^13.3.0",
     "@react-spring/web": "^9.7.2",
+    "@sentry/nextjs": "^7.48.0",
     "@types/d3": "^7.4.0",
     "@types/d3-dispatch": "^3.0.2",
     "@types/d3-force": "^3.0.4",

demo/pages/_error.tsx

@@ -0,0 +1,41 @@
+/**
+ * NOTE: This requires `@sentry/nextjs` version 7.3.0 or higher.
+ *
+ * NOTE: If using this with `next` version 12.2.0 or lower, uncomment the
+ * penultimate line in `CustomErrorComponent`.
+ *
+ * This page is loaded by Nextjs:
+ *  - on the server, when data-fetching methods throw or reject
+ *  - on the client, when `getInitialProps` throws or rejects
+ *  - on the client, when a React lifecycle method throws or rejects, and it's
+ *    caught by the built-in Nextjs error boundary
+ *
+ * See:
+ *  - https://nextjs.org/docs/basic-features/data-fetching/overview
+ *  - https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
+ *  - https://reactjs.org/docs/error-boundaries.html
+ */
+
+import * as Sentry from '@sentry/nextjs'
+import type { NextPageContext } from 'next'
+import type { ErrorProps } from 'next/error'
+import NextErrorComponent from 'next/error'
+
+const CustomErrorComponent = (props: ErrorProps) => {
+  // If you're using a Nextjs version prior to 12.2.1, uncomment this to
+  // compensate for https://github.com/vercel/next.js/issues/8592
+  // Sentry.captureUnderscoreErrorException(props);
+
+  return <NextErrorComponent statusCode={props.statusCode} />
+}
+
+CustomErrorComponent.getInitialProps = async (contextData: NextPageContext) => {
+  // In case this is running in a serverless function, await this in order to give Sentry
+  // time to send the error before the lambda exits
+  await Sentry.captureUnderscoreErrorException(contextData)
+
+  // This will contain the status code of the response
+  return NextErrorComponent.getInitialProps(contextData)
+}
+
+export default CustomErrorComponent

demo/sentry.client.config.js

@@ -0,0 +1,19 @@
+// 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
+
+Sentry.init({
+  dsn:
+    SENTRY_DSN ||
+    'https://[email protected]/4505023605571584',
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+  // ...
+  // 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
+})

demo/sentry.properties

@@ -0,0 +1,4 @@
+defaults.url=https://sentry.io/
+defaults.org=antoine-clausse
+defaults.project=rank-votes
+cli.executable=../../../.npm/_npx/a8388072043b4cbc/node_modules/@sentry/cli/bin/sentry-cli

demo/sentry.server.config.js

@@ -0,0 +1,19 @@
+// 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
+
+Sentry.init({
+  dsn:
+    SENTRY_DSN ||
+    'https://[email protected]/4505023605571584',
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+  // ...
+  // 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
+})

demo/src/store/index.ts

@@ -1,5 +1,5 @@
 import type { Ballot } from 'votes'
-import create from 'zustand'
+import { create } from 'zustand'
 import { subscribeWithSelector } from 'zustand/middleware'
 
 import {

demo/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "tsconfig/nextjs.json",
   "compilerOptions": {
     "downlevelIteration": true,
+    "strict": true,
     "plugins": [
       {
         "name": "next"