프론트 Sentry SDK 연동

Author: Neibce

frontend/build/webpack.base.conf.js

@@ -13,16 +13,10 @@ function resolve(dir) {
 }
 
 function getEntries() {
-  const base = {
+  return {
     oj: ["./src/pages/oj/index.js"],
     admin: ["./src/pages/admin/index.js"],
   }
-  if (process.env.USE_SENTRY === "1") {
-    Object.keys(base).forEach((entry) => {
-      base[entry].push("./src/utils/sentry.js")
-    })
-  }
-  return base
 }
 
 // get all entries

frontend/build/webpack.dll.conf.js

@@ -17,7 +17,6 @@ const vendors = [
   "vuex",
   "axios",
   "moment",
-  "raven-js",
   "browser-detect",
 ]
 

frontend/config/dev.env.js

@@ -2,11 +2,19 @@
 // let commit = require('child_process').execSync('git rev-parse HEAD').toString().slice(0, 5)
 // let version = `"${date}-${commit}"`
 let version = JSON.stringify(process.env.VUE_APP_VERSION || "dev")
+let useSentry = JSON.stringify(
+  process.env.USE_SENTRY || (process.env.NODE_ENV === "production" ? "1" : "0"),
+)
+let sentryDsn = JSON.stringify(
+  process.env.SENTRY_DSN ||
+    "https://143814aaa2d6e0b4550b2e5effefe90d@o4511586463776768.ingest.us.sentry.io/4511586483634176",
+)
 
 console.log(`current version is ${version}`)
 
 module.exports = {
   NODE_ENV: '"development"',
   VERSION: version,
-  USE_SENTRY: "0",
+  USE_SENTRY: useSentry,
+  SENTRY_DSN: sentryDsn,
 }

frontend/package-lock.json

@@ -17,6 +17,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^2.0.10",
+    "@sentry/vue": "^10.58.0",
     "axios": "^0.33.0",
     "browser-detect": "^0.2.27",
     "core-js": "^3.49.0",
@@ -29,7 +30,6 @@
     "katex": "^0.10.0",
     "moment": "^2.22.1",
     "papaparse": "^5.5.3",
-    "raven-js": "^3.25.0",
     "regenerator-runtime": "^0.14.1",
     "screenfull": "^3.3.2",
     "splitpanes": "^2.4.1",

frontend/package.json

@@ -24,6 +24,7 @@ import "./style.less"
 
 import ECharts from "vue-echarts"
 import "@/utils/echarts"
+import { initSentry } from "@/utils/sentry"
 
 const legacyPanelTag = "Panel"
 const legacySaveTag = "Save"
@@ -66,4 +67,6 @@ Vue.prototype.$success = (msg) => {
   }
 }
 
+initSentry(Vue)
+
 new Vue(Vue.util.extend({ router, store, i18n }, App)).$mount("#app")

frontend/src/pages/admin/index.js

@@ -23,6 +23,7 @@ import filters from "@/utils/filters.js"
 
 import ECharts from "vue-echarts"
 import "@/utils/echarts"
+import { initSentry } from "@/utils/sentry"
 
 const legacyPanelTag = "Panel"
 
@@ -57,4 +58,6 @@ Vue.prototype.$error = (s) => Vue.prototype.$Message.error(s)
 Vue.prototype.$info = (s) => Vue.prototype.$Message.info(s)
 Vue.prototype.$success = (s) => Vue.prototype.$Message.success(s)
 
+initSentry(Vue)
+
 new Vue(Vue.util.extend({ router, store, i18n }, App)).$mount("#app")

frontend/src/pages/oj/index.js

@@ -1,9 +1,11 @@
-import Vue from "vue"
-import Raven from "raven-js"
-import RavenVue from "raven-js/plugins/vue"
+import { init, setContext } from "@sentry/vue"
+
+const SENTRY_DSN =
+  "https://143814aaa2d6e0b4550b2e5effefe90d@o4511586463776768.ingest.us.sentry.io/4511586483634176"
 
 const options = {
   release: process.env.VERSION,
+  environment: process.env.NODE_ENV,
   ignoreUrls: [
     // Chrome extensions
     /extensions\//i,
@@ -13,16 +15,25 @@ const options = {
     // Ignore Google flakiness
     /\/(gtm|ga|analytics)\.js/i,
   ],
+  dataCollection: {
+    userInfo: false,
+    httpBodies: [],
+  },
 }
 
-Raven.config(
-  "https://6234a51e61a743b089ed64c51d2f6ea9@sentry.io/258234",
-  options,
-)
-  .addPlugin(RavenVue, Vue)
-  .install()
+export function initSentry(Vue) {
+  if (process.env.USE_SENTRY !== "1") {
+    return
+  }
+
+  init({
+    Vue,
+    dsn: process.env.SENTRY_DSN || SENTRY_DSN,
+    ...options,
+  })
 
-Raven.setUserContext({
-  version: process.env.VERSION,
-  location: window.location,
-})
+  setContext("app", {
+    version: process.env.VERSION,
+    location: window.location.href,
+  })
+}