Enable Sentry integration for Error Reporting

.github/workflows/deploy.yml

@@ -35,6 +35,11 @@ jobs:
 
     - run: yarn install --immutable
     - run: yarn run production-build
+      env:
+        VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+        SENTRY_ORG: ${{ vars.SENTRY_ORG }}
+        SENTRY_PROJECT: ${{ vars.SENTRY_PROJECT }}
+        SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
     - name: Deploy
       uses: JamesIves/github-pages-deploy-action@v4
       with:

.github/workflows/node.js.yml

@@ -36,3 +36,6 @@ jobs:
 
     - run: yarn install --immutable
     - run: yarn run build
+      env:
+        VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+        # No need to inject SENTRY_ORG and such as this build is not published for general public use

README.md

@@ -53,6 +53,33 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 
 Build the app with SEO optimized pages.
 
+## Error Reporting
+
+Sentry can be used to collect errors and events from users for troubleshooting purpose. To enable the integration, the following steps are required.
+
+### Pre-requisite
+
+1. A project created on Sentry (either sentry.io or your own Sentry installation), [with DSN](https://docs.sentry.io/concepts/key-terms/dsn-explainer/#where-to-find-your-dsn) created.
+
+### Enable Sentry during build time
+
+Set the DSN to the environment variable `VITE_SENTRY_DSN` when you build the project.
+Can be injected in GitHub Actions by secret `SENTRY_DSN`
+
+### Automating Sentry-related tasks at build time
+
+Set these environment variables in CI/CD pipeline:
+```
+# You can derieve the SENTRY_ORG and SENTRY_PROJECT (their slug) from your Sentry project URL. For example, "https://my-org.sentry.io/projects/my-project/", then SENTRY_ORG=my-org, SENTRY_PROJECT=my-project
+SENTRY_ORG=
+SENTRY_PROJECT=
+SENTRY_AUTH_TOKEN=<See how to get it from https://docs.sentry.io/account/auth-tokens/>
+```
+
+Can be injected in GitHub Actions by Variables `SENTRY_ORG`, `SENTRY_PROJECT` and secret `SENTRY_AUTH_TOKEN`.
+
+Reference: https://github.com/getsentry/sentry-javascript-bundler-plugins
+
 ## Contributors
 
 Project owner [chunlaw](https://github.com/chunlaw) is the initiator of the whole project. Everyone is welcome to contribute. Other contributors are listed below (ordered by alphabetical order):

package.json

@@ -25,6 +25,7 @@
     "@mui/material": "^5.15.11",
     "@mui/styles": "^5.8.4",
     "@mui/x-date-pickers": "^6.5.0",
+    "@sentry/react": "^7.110.0",
     "@types/plotly.js-basic-dist": "^1.54.4",
     "core-js": "^3.23.1",
     "dayjs": "^1.11.7",
@@ -60,6 +61,7 @@
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
+    "@sentry/vite-plugin": "^2.16.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "13.3.0",
     "@testing-library/user-event": "^14.2.1",

src/App.tsx

@@ -15,6 +15,8 @@ import {
   BrowserRouter as Router,
   Routes,
 } from "react-router-dom";
+import * as Sentry from "@sentry/react";
+
 import "./App.css";
 import AppContext from "./context/AppContext";
 import { SearchContextProvider } from "./SearchContext";
@@ -40,6 +42,9 @@ const DataImport = React.lazy(() => import("./pages/DataImport"));
 const DataExport = React.lazy(() => import("./pages/DataExport"));
 
 const App = () => {
+  // Integration with reference to https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/#usage-with-routes--component
+  const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
+
   const { analytics, colorMode, fontSize } = useContext(AppContext);
   const language = useLanguage();
 
@@ -60,7 +65,7 @@ const App = () => {
         <CacheProvider value={emotionCache}>
           <SearchContextProvider>
             <Router>
-              <Routes>
+              <SentryRoutes>
                 <Route path="/" element={<Navigate to={`/${language}`} />} />
                 <Route path="/:lang" element={<Root />}>
                   <Route
@@ -133,7 +138,7 @@ const App = () => {
                     <RedirectPage url="https://github.com/hkbus/hk-independent-bus-eta/wiki/%E5%B8%B8%E8%A6%8B%E5%95%8F%E9%A1%8C-FAQ" />
                   }
                 />
-              </Routes>
+              </SentryRoutes>
             </Router>
           </SearchContextProvider>
         </CacheProvider>

src/main.tsx

@@ -1,8 +1,38 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import * as Sentry from "@sentry/react";
 import "./index.css";
 import "./i18n";
 import AppWrapper from "./AppWrapper";
+import { createRoutesFromChildren, matchRoutes, useLocation, useNavigationType } from "react-router-dom";
+
+// Copied from https://docs.sentry.io/platforms/javascript/guides/react/#configure
+Sentry.init({
+  dsn: import.meta.env.VITE_SENTRY_DSN,
+  integrations: [
+    Sentry.reactRouterV6BrowserTracingIntegration({
+      useEffect: React.useEffect,
+      useLocation,
+      useNavigationType,
+      createRoutesFromChildren,
+      matchRoutes,
+    }),
+    Sentry.replayIntegration()
+  ],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  tracesSampleRate: 0.1,
+
+  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: ["localhost"], // FIXME: See if we need to include additional hosts here
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+});
+const App = React.lazy(() => import("./App"));
 
 const isHuman = () => {
   const agents = [

vite.config.ts

@@ -3,6 +3,7 @@ import react from "@vitejs/plugin-react-swc";
 import basicSsl from "@vitejs/plugin-basic-ssl";
 import { VitePWA, VitePWAOptions } from "vite-plugin-pwa";
 import eslint from "vite-plugin-eslint"
+import { sentryVitePlugin } from "@sentry/vite-plugin";
 
 // https://vitejs.dev/config/
 export default defineConfig(({mode}: ConfigEnv) => {
@@ -14,7 +15,15 @@ export default defineConfig(({mode}: ConfigEnv) => {
 
       }), 
       basicSsl(), 
-      VitePWA(getPwaOptions(env))
+      VitePWA(getPwaOptions(env)),
+      sentryVitePlugin({
+        // Put the Sentry vite plugin after all other plugins: https://www.npmjs.com/package/@sentry/vite-plugin
+        org: process.env.SENTRY_ORG,
+        project: process.env.SENTRY_PROJECT,
+        // Auth tokens can be obtained from https://sentry.io/orgredirect/organizations/:orgslug/settings/auth-tokens/
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+        reactComponentAnnotation: {enabled: true},
+      }),
     ],
     server: {
       https: false,
@@ -23,6 +32,7 @@ export default defineConfig(({mode}: ConfigEnv) => {
       // strictPort: true,
     },
     build: {
+      sourcemap: true, // Source map generation must be turned on
       outDir: "./build"
     }
   }