ui: add sentry

packages/ui-default/build/config/webpack.ts

@@ -1,4 +1,5 @@
 /* eslint-disable global-require */
+import { sentryWebpackPlugin } from '@sentry/webpack-plugin';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import { EsbuildPlugin } from 'esbuild-loader';
@@ -69,7 +70,8 @@ export default function (env: { watch?: boolean, production?: boolean, measure?:
     stats: {
       preset: 'errors-warnings',
     },
-    devtool: false,
+    // sentry requires source-map while keep it simple in dev mode
+    devtool: env.production ? 'source-map' : false,
     entry: {
       hydro: './entry.js',
       polyfill: './polyfill.ts',
@@ -255,6 +257,12 @@ export default function (env: { watch?: boolean, production?: boolean, measure?:
           { from: `${dirname(require.resolve('monaco-themes/package.json'))}/themes`, to: 'monaco/themes/' },
         ],
       }),
+      sentryWebpackPlugin({
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+        org: 'hydro-dev',
+        project: 'hydro-web',
+        url: 'https://sentry.hydro.ac',
+      }),
       new webpack.DefinePlugin({
         'process.env.VERSION': JSON.stringify(require('@hydrooj/ui-default/package.json').version),
       }),

packages/ui-default/build/main.ts

@@ -4,6 +4,7 @@ import cac from 'cac';
 import chalk from 'chalk';
 import log from 'fancy-log';
 import fs from 'fs-extra';
+import { globbySync } from 'globby';
 import gulp from 'gulp';
 import { sum } from 'lodash';
 import path from 'path';
@@ -133,6 +134,7 @@ async function main() {
       const files = fs.readdirSync('public');
       files.filter((i) => /(^[in]\..+|worker)\.js\.map$/.test(i)).forEach((i) => fs.removeSync(`public/${i}`));
     }
+    await Promise.all(globbySync('public/**/*.map').map((i) => fs.remove(i)));
   }
   process.chdir(dir);
 }

packages/ui-default/entry.js

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/browser';
 import $ from 'jquery';
 
 window.Hydro = {
@@ -27,6 +28,21 @@ console.log(
 
 window.UiContext = JSON.parse(window.UiContext);
 window.UserContext = JSON.parse(window.UserContext);
+if (!UiContext.sentry_disable) {
+  window.captureException = (e) => Sentry.captureException(e);
+  Sentry.init({
+    dsn: UiContext.sentry_dsn || 'https://04d1d77b095231d55e1202bdc912ff16@sentry.hydro.ac/3',
+    release: process.env.VERSION,
+    integrations: [
+      Sentry.browserTracingIntegration(),
+      Sentry.replayIntegration(),
+    ],
+    tracesSampleRate: 0.1,
+    tracePropagationTargets: ['localhost', /^\//, window.location.host],
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0,
+  });
+}
 try { __webpack_public_path__ = UiContext.cdn_prefix; } catch (e) { }
 if ('serviceWorker' in navigator) {
   const encodedConfig = encodeURIComponent(JSON.stringify(UiContext.SWConfig));

packages/ui-default/package.json

@@ -24,6 +24,8 @@
     "@fontsource/source-code-pro": "^5.0.18",
     "@fontsource/ubuntu-mono": "^5.0.20",
     "@hydrooj/utils": "workspace:^",
+    "@sentry/browser": "^8.8.0",
+    "@sentry/webpack-plugin": "^2.18.0",
     "@simplewebauthn/browser": "7.4.0",
     "@svgr/webpack": "^8.1.0",
     "@types/gulp-if": "^0.0.34",

packages/ui-default/pages/problem_files.page.tsx

@@ -1,4 +1,4 @@
-import { STATUS } from '@hydrooj/utils/lib/common';
+import { STATUS } from '@hydrooj/utils/lib/status';
 import $ from 'jquery';
 import { map } from 'lodash';
 import React from 'react';