Issue/#103 extend sentry report

src/entities/sentry/types.ts

@@ -42,6 +42,7 @@ export type SentryContexts = Omit<SentryTypes.Contexts, 'device' | 'app'> & {
 }
 
 export interface Sentry extends Omit<SentryTypes.Event, 'request' | 'exception' | 'breadcrumbs' | 'level' | 'contexts'> {
+  platform?: string,
   contexts?: SentryContexts,
   request?: SentryRequest,
   exception?: {
@@ -50,5 +51,8 @@ export interface Sentry extends Omit<SentryTypes.Event, 'request' | 'exception'
   breadcrumbs?: {
     values: SentryBreadcrumb[]
   },
-  level?: SentryLevel
+  level?: SentryLevel,
+  modules?: {
+    [key: string]: string
+  }
 }

src/screens/sentry/ui/sentry-page-extra/index.ts

@@ -0,0 +1,3 @@
+import SentryPageExtra from './sentry-page-extra.vue'
+
+export { SentryPageExtra }

src/screens/sentry/ui/sentry-page-extra/sentry-page-extra.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { useSentry } from "~/src/entities/sentry";
+import { sentryLaravelMock, sentrySpiralMock } from '~/src/entities/sentry/mocks';
+import SentryPageExtra from './sentry-page-extra.vue';
+
+const { normalizeSentryEvent } = useSentry();
+
+export default {
+  title: "Screens/sentry/SentryPageExtra",
+  component: SentryPageExtra
+} as Meta<typeof SentryPageExtra>;
+
+export const Laravel: StoryObj<typeof SentryPageExtra> = {
+  args: {
+    extra: normalizeSentryEvent(sentryLaravelMock).payload.extra,
+  }
+};
+
+export const Spiral: StoryObj<typeof SentryPageExtra> = {
+  args: {
+    extra: normalizeSentryEvent(sentrySpiralMock).payload.extra,
+  }
+};

src/screens/sentry/ui/sentry-page-extra/sentry-page-extra.vue

@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import type { Sentry } from "~/src/entities/sentry/types";
+import { IconSvg, TableBase, TableBaseRow } from "~/src/shared/ui";
+
+type Props = {
+  extra: Sentry["extra"];
+};
+
+const props = defineProps<Props>();
+
+const ddStates = ref(
+  Object.keys(props.extra || {}).reduce(
+    (acc, key) => {
+      acc[key] = false;
+      return acc;
+    },
+    {} as Record<string, boolean>,
+  ),
+);
+</script>
+
+<template>
+  <section class="sentry-page-extra">
+    <h3 class="sentry-page-extra__head">Extra</h3>
+
+    <div class="sentry-page-extra__in">
+      <div
+        v-for="(value, key) in extra"
+        :key="key"
+        class="sentry-page-extra__wrapper"
+        :class="{
+          'sentry-page-extra__wrapper--open': ddStates[key],
+        }"
+      >
+        <h3
+          class="sentry-page-extra__title"
+          @click="ddStates[key] = !ddStates[key]"
+        >
+          {{ key }}
+
+          <IconSvg
+            class="sentry-page-extra__title-dd"
+            :class="{
+              'sentry-page-extra__title-dd--open': ddStates[key],
+            }"
+            name="dd"
+          />
+        </h3>
+
+        <TableBase v-if="value" class="sentry-page-extra__content">
+          <TableBaseRow
+            v-for="(v, t) in value"
+            :key="t"
+            :title="String(t || '')"
+          >
+            {{ JSON.stringify(v) }}
+          </TableBaseRow>
+        </TableBase>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+@import "src/assets/mixins";
+
+.sentry-page-extra {
+}
+
+.sentry-page-extra__wrapper {
+  @apply dark:bg-gray-900 bg-gray-100 p-3 border border-purple-300 dark:border-gray-400;
+
+  &:first-child {
+    @apply rounded-t-md;
+  }
+
+  &:last-child {
+    @apply rounded-b-md;
+  }
+}
+
+.sentry-page-extra__head {
+  @include text-muted;
+  @apply font-bold uppercase text-sm flex justify-between mb-3;
+}
+
+.sentry-page-extra__title {
+  @include text-muted;
+  @apply font-bold uppercase text-sm flex justify-between;
+}
+
+.sentry-page-extra__url {
+  @apply mb-1 text-lg font-medium;
+}
+
+.sentry-page-extra__title-dd {
+  @apply ml-2 w-5 ml-auto transform rotate-180;
+}
+
+.sentry-page-extra__title-dd--open {
+  @apply rotate-0;
+}
+
+.sentry-page-extra__content {
+  display: none;
+  @apply mt-3;
+
+  .sentry-page-extra__wrapper--open & {
+    display: block;
+  }
+}
+</style>

src/screens/sentry/ui/sentry-page-request/sentry-page-request.vue

@@ -30,7 +30,7 @@ const normalizeHeaderValue = (value: unknown) =>
         <TableBaseRow
           v-for="(value, title) in request.headers"
           :key="title"
-          :title="title"
+          :title="String(title)"
         >
           {{ normalizeHeaderValue(value) }}
         </TableBaseRow>