feat: try out sentry integration

.github/workflows/build.yml

@@ -24,4 +24,6 @@ jobs:
         run: npm ci
 
       - name: Build VuePress site
+        env:
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
         run: yarn docs:build

.github/workflows/deploy.yml

@@ -25,6 +25,8 @@ jobs:
         run: npm ci
 
       - name: Build VuePress site
+        env:
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
         run: yarn docs:build
 
       # please check out the docs of the workflow for more details

.gitignore

@@ -104,3 +104,6 @@ dist
 .tern-port
 
 .idea
+
+# Sentry Auth Token
+.env.sentry-build-plugin

docs/.vuepress/client.js

@@ -41,6 +41,8 @@ import GapAnimation from "./theme/components/examples/gap/GapAnimation.vue";
 import Dash from "./theme/components/examples/dash/Dash.vue";
 import Dot from "./theme/components/examples/dot/Dot.vue";
 import "@iconscout/unicons/css/line.css";
+import * as Sentry from "@sentry/browser";
+
 const components = [
   Slider,
   VEP,
@@ -90,4 +92,16 @@ export default defineClientConfig({
       app.component(c.name ?? c.__name, c);
     }
   },
+  setup() {
+    const dsn = SENTRY_DSN;
+    if (dsn) {
+      Sentry.init({
+        dsn,
+        integrations: [new Sentry.BrowserTracing()],
+        tracesSampleRate: 1.0,
+      });
+    } else {
+      console.warn("Couldn't setup Sentry. DSN not provided!");
+    }
+  },
 });

docs/.vuepress/config.js

@@ -1,6 +1,10 @@
 import { defaultTheme } from "vuepress";
 import { searchPlugin } from "@vuepress/plugin-search";
 import { viteBundler } from "vuepress";
+import { sentryVitePlugin } from "@sentry/vite-plugin";
+import * as dotenv from "dotenv";
+
+dotenv.config();
 
 const isDevMode = process.env.NODE_ENV === "development";
 const basePath = process.env.BASE_PATH || "/vue-ellipse-progress-docs/";
@@ -10,16 +14,34 @@ export default {
   title: "vue-ellipse-progress",
   description: "This is not my first VuePress site",
   base: isDevMode ? "/" : basePath,
+  define: {
+    SENTRY_DSN: process.env.SENTRY_DSN,
+    IS_PRODUCTION: isDevMode,
+  },
   markdown: {
     code: {
       lineNumbers: false,
     },
   },
   bundler: viteBundler({
     viteOptions: {
+      /* build: {
+        sourcemap: true,
+      },*/
+      server: {
+        port: 8081,
+      },
       ssr: {
         noExternal: "@vueform/slider",
       },
+      /*plugins: [
+        // Put the Sentry vite plugin after all other plugins
+        sentryVitePlugin({
+          authToken: process.env.SENTRY_AUTH_TOKEN,
+          org: "setaman",
+          project: "setaman",
+        }),
+      ],*/
     },
   }),
   theme: defaultTheme({

docs/.vuepress/theme/components/Base/VEP.vue

@@ -20,9 +20,11 @@
 import { shallowRef, onMounted } from "vue";
 
 const component = shallowRef(null);
+
 onMounted(() =>
   import("vue-ellipse-progress").then((module) => {
     component.value = module.VeProgress;
+    throw new Error("Sentry Error");
   })
 );
 </script>

docs/.vuepress/theme/components/examples/animation/Animation.vue

@@ -57,6 +57,9 @@ export default {
       return !["in", "out"].includes(this.mode);
     },
   },
+  mounted() {
+    throw new Error("Error for Sentry Test");
+  },
 };
 </script>
 

docs/guide/options/emptyLinePosition.md

@@ -14,7 +14,7 @@ In general, this prop makes it possible to mimic the SVG2 `stroke-aligment`, whi
 
 ```vue
 <ve-progress empty-line-position="in 10" />
-<ve-progress empty-line-mode="out" />
+<ve-progress empty-line-position="out" />
 ```
 
 ### Example