chore: add sentry

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@iconscout/unicons": "^4.0.1",
+    "@sentry/vue": "^7.103.0",
     "axios": "^0.21.1",
     "bloom-filters": "^1.3.8",
     "buefy": "^0.9.8",
@@ -36,6 +37,7 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
+    "@sentry/webpack-plugin": "^2.14.2",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-pwa": "~4.5.0",

src/main.js

@@ -63,6 +63,26 @@ Vue.use(VirtualMasonry, {
 });
 Vue.use(InfiniteLoading);
 
+import * as Sentry from "@sentry/vue";
+Sentry.init({
+  Vue,
+  dsn: "https://aacac271449bf7d53d2436726ff5839a@o4506819751968768.ingest.sentry.io/4506819754786816",
+  integrations: [
+    Sentry.browserTracingIntegration(),
+    Sentry.replayIntegration({
+      maskAllText: false,
+      blockAllMedia: false,
+    }),
+  ],
+  // Performance Monitoring
+  tracesSampleRate: 1.0, //  Capture 100% of the transactions
+  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: ["localhost", /^https:\/\/api\.pixivel\.moe/],
+  // Session Replay
+  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+});
+
 new Vue({
   router,
   render: (h) => h(App),

vue.config.js

@@ -1,15 +1,23 @@
 const path = require("path");
+const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");
 
 module.exports = {
-  productionSourceMap: false,
-  configureWebpack: () => ({
-    devtool: "source-map",
+  configureWebpack: {
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "./src"),
       },
     },
-  }),
+    devtool: "source-map", // Source map generation must be turned on
+    plugins: [
+      sentryWebpackPlugin({
+        org: "shugetsu-dev",
+        project: "pixivel",
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+      }),
+    ],
+  },
+  productionSourceMap: true,
   pwa: {
     name: "Pixivel",
     themeColor: "#00e2bc",