add sentry

.github/workflows/release.yml

@@ -53,5 +53,6 @@ jobs:
  labels: ${{ steps.meta.outputs.labels }}
  build-args: |
  github_token=${{ secrets.GITHUB_TOKEN }}
+ sentry_token=${{ secrets.SENTRY_TOKEN }}
  build_link=https://github.com/${{ env.GITHUB_REPO }}/tree/${{ github.sha }}
  build_name=${{ steps.vars.outputs.sha_short }}

.github/workflows/test.yml

@@ -29,4 +29,4 @@ jobs:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
  - name: Lint
- run: pnpm run lint:code
+ run: pnpm run lint:ci

.gitignore

@@ -97,4 +97,6 @@ public
 .vscode
 
 assets/icons
-resources
+resources
+# Sentry Config File
+.env.sentry-build-plugin

Dockerfile

@@ -13,6 +13,9 @@ COPY . .
 ARG github_token
 ENV GITHUB_TOKEN=$github_token
 
+ARG sentry_token
+ENV SENTRY_AUTH_TOKEN=$sentry_token
+
 ARG build_link
 ENV BUILD_LINK=$build_link
 

config/formkit.config.ts

@@ -1,5 +1,6 @@
 import { generateClasses } from '@formkit/themes'
 import type { DefaultConfigOptions } from '@formkit/vue'
+import { captureException } from '@sentry/vue'
 import { mapValues } from 'lodash-es'
 import { icon, multi } from '~/components/input/formkit/custom'
 
@@ -71,8 +72,9 @@ const config: DefaultConfigOptions = {
  const response = await fetch(`https://cdn.jsdelivr.net/npm/heroicons/outline/${iconName}.svg`)
  const icon = await response.text()
  if (icon.startsWith('<svg')) return icon
- } catch {}
- console.warn(`Unable to find icon '${iconName}'`)
+ } catch (err) {
+ captureException(err)
+ }
  },
 }
 

modules/assets.ts

@@ -10,25 +10,10 @@ function copyFavicon() {
  }
 }
 
-// async function generateIcons() {
-// console.group('Rendering icons')
-// const from = 'resources'
-// const output = join('public', 'icons')
-// const cachedResources = join('.nuxt', 'extracted-resources')
-//
-// if (!existsSync(from)) return
-// if (!existsSync(output)) mkdirSync(output)
-// if (!existsSync(cachedResources)) mkdirSync(cachedResources)
-//
-// await renderFrom(from, { output, keep: true }, { cachedResources })
-// console.groupEnd()
-// }
-
 export default defineNuxtModule({
  setup(_, nuxt) {
  nuxt.hook('build:before', () => {
  copyFavicon()
- // await generateIcons()
  })
  },
 })

nuxt.config.ts

@@ -1,3 +1,5 @@
+import { sentryVitePlugin } from '@sentry/vite-plugin'
+
 export default defineNuxtConfig({
  modules: [
  './modules/assets',
@@ -64,9 +66,25 @@ export default defineNuxtConfig({
  shim: false,
  },
 
+ vite: {
+ build: {
+ sourcemap: true, // Source map generation must be turned on
+ },
+ plugins: [
+ // Put the Sentry vite plugin after all other plugins
+ sentryVitePlugin({
+ authToken: process.env.SENTRY_AUTH_TOKEN,
+ org: 'possible-triangle',
+ project: 'atlas',
+ }),
+ ],
+ },
+
  runtimeConfig: {
  public: {
  apiUrl: 'http://localhost:3000/api',
+ sentryEnvironment: 'development',
+ sentryDsn: '<replace-me>',
  },
  },
 

package.json

@@ -15,6 +15,7 @@
  "fix": "pnpm run format && pnpm run lint:code --fix",
  "lint:code": "eslint **/*.{vue,ts,gql}",
  "lint:style": "stylelint **/*.vue",
+ "lint:ci": "eslint **/*.{vue,ts}",
  "lint": "pnpm lint:code && pnpm lint:style"
  },
  "devDependencies": {
@@ -65,6 +66,8 @@
  "v-network-graph": "^0.9.15"
  },
  "dependencies": {
+ "@sentry/vite-plugin": "^2.22.0",
+ "@sentry/vue": "^8.25.0",
  "vue3-simple-icons": "^13.2.0"
  }
 }

plugins/sentry.ts

@@ -0,0 +1,18 @@
+import { browserTracingIntegration, init, replayIntegration } from '@sentry/vue'
+
+export default defineNuxtPlugin({
+ setup: nuxt => {
+ const config = useRuntimeConfig()
+
+ init({
+ app: nuxt.vueApp,
+ dsn: config.public.sentryDsn,
+ environment: config.public.sentryEnvironment,
+ integrations: [browserTracingIntegration(), replayIntegration()],
+ tracesSampleRate: 1.0,
+ tracePropagationTargets: ['localhost'],
+ replaysSessionSampleRate: 1.0,
+ replaysOnErrorSampleRate: 1.0,
+ })
+ },
+})