fix(sentry): Update Sentry integration configuration

- Removed unnecessary imports and improved code formatting.
- Updated the Sentry integration configuration to use the latest syntax.
- Added error logging and toast notifications for detected errors.
- Improved error message handling and displayed toast messages for better user experience.

Note: Sentry is a logging and error tracking tool used to monitor and debug application errors.

apps/wizarr-frontend/src/plugins/sentry.ts

@@ -1,16 +1,11 @@
-import {
- BrowserTracing,
- Replay,
- init,
- vueRouterInstrumentation,
-} from '@sentry/vue';
-import type { Options, TracingOptions } from '@sentry/vue/types/types';
+import { BrowserTracing, Replay, init, vueRouterInstrumentation } from "@sentry/vue";
+import type { Options, TracingOptions } from "@sentry/vue/types/types";
 
-import type { App } from 'vue';
-import DefaultToast from '@/components/Toasts/DefaultToast.vue';
+import type { App } from "vue";
+import DefaultToast from "@/components/Toasts/DefaultToast.vue";
 
 type SentryOptions = Partial<
- Omit<Options, 'tracingOptions'> & {
+ Omit<Options, "tracingOptions"> & {
  tracingOptions: Partial<TracingOptions>;
  }
 >;
@@ -19,13 +14,11 @@ const vuePluginSentry = {
  install: (app: App, options?: SentryOptions) => {
  init({
  app: app,
- dsn: 'https://d1994be8f88578e14f1a4ac06ae65e89@o4505748808400896.ingest.sentry.io/4505780347666432',
+ dsn: "https://d1994be8f88578e14f1a4ac06ae65e89@o4505748808400896.ingest.sentry.io/4505780347666432",
  integrations: [
  new BrowserTracing({
  tracePropagationTargets: [location.origin],
- routingInstrumentation: vueRouterInstrumentation(
- app.config.globalProperties.$router,
- ),
+ routingInstrumentation: vueRouterInstrumentation(app.config.globalProperties.$router),
  }),
  new Replay({
  maskAllText: false,
@@ -39,14 +32,15 @@ const vuePluginSentry = {
  replaysOnErrorSampleRate: 1.0,
  beforeSend(event, hint) {
  if (event.exception) {
- const errorMessage =
- event.exception.values ?? 'Unknown error';
- app.config.globalProperties.$toast.error(
- DefaultToast(
- 'Detected Error',
- `${errorMessage}, this can generally be ignored.`,
- ),
- );
+ console.error(event, hint);
+
+ const originalException = hint.originalException as Error;
+ const message = originalException?.message;
+
+ if (message) {
+ app.config.globalProperties.$toast.error(DefaultToast("Error Message", message));
+ app.config.globalProperties.$toast.warning(DefaultToast("We noticed an error", `Errors occur sometimes naturally, but if you encounter behavior that seems wrong, please report it to us.`));
+ }
  }
  return event;
  },