web: Update dependencies

klicker/package.json

@@ -29,58 +29,58 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@cubejs-client/core": "^0.35.0",
-    "@feathersjs/authentication-client": "5.0.14",
-    "@feathersjs/feathers": "5.0.14",
-    "@feathersjs/rest-client": "5.0.14",
+    "@feathersjs/authentication-client": "5.0.24",
+    "@feathersjs/feathers": "5.0.24",
+    "@feathersjs/rest-client": "5.0.24",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@kangc/v-md-editor": "2.3.17",
     "@panzoom/panzoom": "^4.5.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
-    "@vueuse/core": "^10.7.1",
+    "@vueuse/core": "^10.9.0",
     "d3-format": "^3.1.0",
-    "date-fns": "^3.2.0",
+    "date-fns": "^3.6.0",
     "html2canvas": "^1.4.1",
     "sampson": "^0.2.8",
-    "vega": "^5.27.0",
+    "vega": "^5.28.0",
     "vega-embed": "^6.24.0",
-    "vega-lite": "^5.16.3",
+    "vega-lite": "^5.17.0",
     "vue3-lazy-hydration": "^1.2.1",
     "vue3-moveable": "^0.28.0",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.23.8",
-    "@babel/preset-typescript": "^7.23.3",
-    "@storybook/addon-actions": "^7.6.8",
-    "@storybook/addon-essentials": "^7.6.8",
-    "@storybook/addon-interactions": "^7.6.8",
+    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-typescript": "^7.24.1",
+    "@storybook/addon-actions": "^8.0.2",
+    "@storybook/addon-essentials": "^8.0.2",
+    "@storybook/addon-interactions": "^8.0.2",
     "@storybook/jest": "^0.2.3",
-    "@storybook/test-runner": "^0.16.0",
+    "@storybook/test-runner": "^0.17.0",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/vue3-vite": "^7.6.8",
+    "@storybook/vue3-vite": "^8.0.2",
     "@types/d3-format": "^3.0.4",
-    "@types/node": "^20.11.28",
-    "@vitejs/plugin-vue": "^5.0.3",
-    "autoprefixer": "^10.4.16",
+    "@types/node": "^20.11.30",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "autoprefixer": "^10.4.18",
     "babel-preset-typescript-vue3": "^2.0.17",
-    "chromatic": "^10.2.2",
+    "chromatic": "^11.2.0",
     "jest": "^29.7.0",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.37",
     "postcss-color-function": "^4.1.0",
-    "postcss-import": "^16.0.0",
-    "postcss-loader": "^7.3.4",
+    "postcss-import": "^16.0.1",
+    "postcss-loader": "^8.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "storybook": "^7.6.8",
+    "storybook": "^8.0.2",
     "storybook-addon-themes": "^6.0.0-alpha.2",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.11",
-    "vue": "^3.4.13",
-    "vue-tsc": "^1.8.27"
+    "typescript": "^5.4.2",
+    "vite": "^5.2.2",
+    "vue": "^3.4.21",
+    "vue-tsc": "^2.0.7"
   },
   "peerDependencies": {
     "vue": "^3.2.47"

web/api/trpc.ts

@@ -1,10 +1,16 @@
 import { initTRPC } from '@trpc/server'
 import superjson from 'superjson'
 import { createContext } from './context'
+import * as Sentry from '@sentry/node'
 
 const t = initTRPC.context<typeof createContext>().create({
   transformer: superjson,
 })
+const sentryMiddleware = t.middleware(
+  Sentry.Handlers.trpcMiddleware({
+    attachRpcInput: true,
+  })
+)
 
 export const router = t.router
-export const publicProcedure = t.procedure
+export const publicProcedure = t.procedure.use(sentryMiddleware)

web/package.json

@@ -9,84 +9,85 @@
     "start:debug": "cross-env NODE_ENV=production node --inspect ./dist/server/index.mjs"
   },
   "dependencies": {
-    "@clickhouse/client": "^0.2.8",
+    "@clickhouse/client": "^0.3.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@jacksongross/vue-tweet-embed": "^3.0.1",
     "@resvg/resvg-js": "^2.6.0",
     "@schneefux/klicker": "link:../klicker",
-    "@sentry-internal/feedback": "^7.93.0",
-    "@sentry/integrations": "^7.93.0",
-    "@sentry/vue": "^7.93.0",
-    "@stdlib/stats-base-dists-chisquare-pdf": "^0.1.0",
-    "@tanstack/vue-query": "^5.17.10",
-    "@trpc/client": "^10.45.0",
-    "@trpc/server": "^10.45.0",
-    "@unhead/addons": "^1.8.9",
-    "@unhead/ssr": "^1.8.9",
-    "@unhead/vue": "^1.8.9",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@sentry-internal/feedback": "^7.107.0",
+    "@sentry/integrations": "^7.107.0",
+    "@sentry/node": "^7.107.0",
+    "@sentry/vue": "^7.107.0",
+    "@stdlib/stats-base-dists-chisquare-pdf": "^0.2.1",
+    "@tanstack/vue-query": "^5.28.4",
+    "@trpc/client": "^10.45.2",
+    "@trpc/server": "^10.45.2",
+    "@unhead/addons": "^1.8.20",
+    "@unhead/ssr": "^1.8.20",
+    "@unhead/vue": "^1.8.20",
+    "@vitejs/plugin-vue": "^5.0.4",
     "compression": "^1.7.4",
     "cookie": "^0.6.0",
-    "core-js": "^3.35.0",
+    "core-js": "^3.36.1",
     "cross-env": "^7.0.3",
-    "dotenv": "^16.3.1",
+    "dotenv": "^16.4.5",
     "etag": "^1.8.1",
-    "express": "^4.18.2",
+    "express": "^4.19.0",
     "handlebars": "^4.7.8",
     "hot-shots": "^10.0.0",
-    "isbot": "^4.4.0",
+    "isbot": "^5.1.2",
     "js-cookie": "^3.0.5",
     "js-yaml": "^4.1.0",
     "knex": "^3.1.0",
-    "markdown-it": "^14.0.0",
-    "mysql2": "^3.7.0",
-    "openai": "^4.26.1",
+    "markdown-it": "^14.1.0",
+    "mysql2": "^3.9.2",
+    "openai": "^4.29.2",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "sirv": "^2.0.4",
     "string-similarity": "^4.0.4",
     "superjson": "^2.2.1",
-    "typescript": "^5.3.3",
-    "undici": "^6.3.0",
-    "vike": "0.4.156-commit-b89a01a",
-    "vite": "^5.0.11",
-    "vue": "^3.4.13",
+    "typescript": "^5.4.2",
+    "undici": "^6.9.0",
+    "vike": "0.4.166",
+    "vite": "^5.2.2",
+    "vue": "^3.4.21",
     "vue-gtag": "^2.0.1",
-    "vue-i18n": "^9.9.0",
+    "vue-i18n": "^9.10.2",
     "vue-observe-visibility": "^2.0.0-alpha.1",
-    "vue-router": "^4.2.5",
+    "vue-router": "^4.3.0",
     "wtf-plugin-api": "^2.0.0",
     "wtf_wikipedia": "^10.3.0",
     "zod": "^3.22.4",
     "ztable": "^1.0.7"
   },
   "devDependencies": {
-    "@sentry/vite-plugin": "^2.10.1",
+    "@sentry/vite-plugin": "^2.16.0",
     "@types/compression": "^1.7.5",
     "@types/etag": "^1.8.3",
     "@types/express": "^4.17.21",
-    "@types/jest": "^29.5.11",
+    "@types/jest": "^29.5.12",
     "@types/js-cookie": "^3.0.6",
     "@types/js-yaml": "^4.0.9",
     "@types/markdown-it": "^13.0.6",
-    "@types/node": "^20.11.0",
-    "@vitejs/plugin-legacy": "^5.2.0",
-    "@vue/compiler-sfc": "^3.4.13",
-    "autoprefixer": "^10.4.16",
-    "better-sqlite3": "^9.1.1",
+    "@types/node": "^20.11.30",
+    "@vitejs/plugin-legacy": "^5.3.2",
+    "@vue/compiler-sfc": "^3.4.21",
+    "autoprefixer": "^10.4.18",
+    "better-sqlite3": "^9.4.3",
     "jest": "^29.7.0",
-    "nodemon": "^3.0.1",
-    "postcss": "^8.4.33",
+    "nodemon": "^3.1.0",
+    "postcss": "^8.4.37",
     "tailwindcss": "^3.4.1",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "unplugin-vue-components": "^0.26.0",
-    "vavite": "^4.0.0",
+    "vavite": "^4.1.1",
     "vite-plugin-pages": "^0.32.0",
-    "vite-plugin-pwa": "^0.17.4",
-    "vue-tsc": "^1.8.27"
+    "vite-plugin-pwa": "^0.19.5",
+    "vue-tsc": "^2.0.7"
   }
 }

web/renderer/sentry.ts

@@ -2,11 +2,11 @@ import { App, InjectionKey } from "vue"
 import { Router } from "vue-router"
 import * as Sentry from '@sentry/vue'
 import {
-  HttpClient as HttpClientIntegration,
-  CaptureConsole as CaptureConsoleIntegration,
-  ExtraErrorData as ExtraErrorDataIntegration,
-  ReportingObserver as ReportingObserverIntegration,
-  RewriteFrames as RewriteFramesIntegration,
+  httpClientIntegration,
+  captureConsoleIntegration,
+  extraErrorDataIntegration,
+  reportingObserverIntegration,
+  rewriteFramesIntegration,
 } from '@sentry/integrations'
 
 export const SentryInjectionKey = Symbol('sentry') as InjectionKey<typeof Sentry>
@@ -18,19 +18,20 @@ export function initSentry(dsn: string, app: App<Element>, router?: Router) {
     debug: import.meta.env.DEV,
     autoSessionTracking: true,
     integrations: [
-      new ExtraErrorDataIntegration(),
-      new ReportingObserverIntegration(),
-      new RewriteFramesIntegration(),
-      new CaptureConsoleIntegration({
+      extraErrorDataIntegration(),
+      reportingObserverIntegration(),
+      rewriteFramesIntegration(),
+      captureConsoleIntegration({
         levels: ['error', 'assert']
       }),
-      new HttpClientIntegration(),
-      new Sentry.BrowserTracing({
-        routingInstrumentation: router != undefined ? Sentry.vueRouterInstrumentation(router) : undefined,
+      httpClientIntegration(),
+      Sentry.browserTracingIntegration({
+        router,
         tracePropagationTargets: ['localhost', /^https?:\/\/brawltime\.ninja/],
+        enableInp: true,
       }),
-      new Sentry.BrowserProfilingIntegration(),
-      new Sentry.Replay({
+      Sentry.browserProfilingIntegration(),
+      Sentry.replayIntegration({
         maskAllText: false,
         maskAllInputs: false,
         blockAllMedia: false,
@@ -45,7 +46,7 @@ export function initSentry(dsn: string, app: App<Element>, router?: Router) {
       'Tyche blocked',
     ],
     allowUrls: [/https?:\/\/brawltime\.ninja/],
-    replaysSessionSampleRate: 0.001,
+    replaysSessionSampleRate: 0.0005,
     replaysOnErrorSampleRate: 0.01,
     tracesSampleRate: 0.01,
     profilesSampleRate: 0.25, // relative to tracesSampleRate

web/server/index.ts

@@ -7,10 +7,10 @@ import apiMiddleware from '../api/index'
 import { PageContext } from '~/renderer/types'
 import * as Sentry from '@sentry/node'
 import {
-  Dedupe as DedupeIntegration,
-  CaptureConsole as CaptureConsoleIntegration,
-  ExtraErrorData as ExtraErrorDataIntegration,
-  RewriteFrames as RewriteFramesIntegration,
+  dedupeIntegration,
+  captureConsoleIntegration,
+  extraErrorDataIntegration,
+  rewriteFramesIntegration,
 } from '@sentry/integrations'
 
 const isProduction = process.env.NODE_ENV === 'production'
@@ -24,10 +24,10 @@ async function startServer() {
     environment: process.env.NODE_ENV,
     release: process.env.SENTRY_RELEASE,
     integrations: [
-      new DedupeIntegration(),
-      new ExtraErrorDataIntegration(),
-      new RewriteFramesIntegration(),
-      new CaptureConsoleIntegration({
+      dedupeIntegration(),
+      extraErrorDataIntegration(),
+      rewriteFramesIntegration(),
+      captureConsoleIntegration({
         levels: ['error', 'assert'],
       }),
     ],