Merge pull request #119 from buggregator/hotifx/performance

Code optimization

Author: butschster

src/entities/sentry/ui/sentry-exception/sentry-exception.vue

@@ -16,10 +16,10 @@ const exceptionFrames = computed(() => {
   const frames = props.exception.stacktrace.frames || [];
 
   if (props.maxFrames > 0) {
-    return frames.slice(0, props.maxFrames);
+    return frames.slice(0 - props.maxFrames).reverse();
   }
 
-  return [...frames].reverse();
+  return frames.slice().reverse();
 });
 </script>
 

src/shared/lib/use-api-transport/use-api-transport.ts

@@ -24,14 +24,15 @@ export const useApiTransport = () => {
   } = useEventsRequests()
 
   const getWSConnection = () => connectionStore.isConnectedWS
-  const checkWSConnectionFail = (onConnectionLost: () => void) => {
-    if (!getWSConnection()) {
-      onConnectionLost()
-    }
-    setTimeout(() => {
-      checkWSConnectionFail(onConnectionLost)
-    }, CHECK_CONNECTION_INTERVAL)
-  }
+  // todo: move to useCentrifuge
+  // const checkWSConnectionFail = (onConnectionLost: () => void) => {
+  //   if (!getWSConnection()) {
+  //     onConnectionLost()
+  //   }
+  //   setTimeout(() => {
+  //     checkWSConnectionFail(onConnectionLost)
+  //   }, CHECK_CONNECTION_INTERVAL)
+  // }
 
   const subscribeToEvents = (): void => {
     centrifuge.on('connected', () => {
@@ -64,10 +65,12 @@ export const useApiTransport = () => {
     isEventsEmitted = true
   }
 
-  checkWSConnectionFail(async () => {
-    const events = await getAll();
-    eventsStore.addList(events);
-  })
+  // todo: move to useCentrifuge
+  // checkWSConnectionFail(async () => {
+  //   const events = await getAll();
+  //
+  //   eventsStore.addList(events);
+  // })
 
   const deleteEvent = (eventId: EventId) => {
     if (getWSConnection()) {

src/shared/ui/preview-card/preview-card.vue

@@ -2,9 +2,8 @@
 // TODO: move component out of shared/ui
 import download from "downloadjs";
 import { toBlob, toPng } from "html-to-image";
-import debounce from "lodash.debounce";
 import moment from "moment";
-import { ref, computed, onMounted, onBeforeUnmount, onBeforeMount } from "vue";
+import { ref, computed, onBeforeMount } from "vue";
 import { REST_API_URL } from "../../lib/io";
 import { useEvents } from "../../lib/use-events";
 import type { NormalizedEvent } from "../../types";
@@ -123,37 +122,9 @@ const copyCode = () => {
   }
 };
 
-const optimiseRenderHidden = debounce(() => {
-  if (eventRef.value) {
-    const eventNode = eventRef.value as HTMLElement;
-    const { top, height } = eventNode.getBoundingClientRect();
-
-    const extraDelta = height;
-    const isVisible =
-      top - extraDelta <= window.innerHeight &&
-      top + height + extraDelta * 2 >= 0;
-
-    if (!isVisible && !isOptimized.value) {
-      isOptimized.value = true;
-      eventNode.style.height = `${eventNode.clientHeight}px`;
-    } else if (isVisible && isOptimized.value) {
-      isOptimized.value = false;
-      eventNode.style.height = "auto";
-    }
-  }
-}, 30);
-
 onBeforeMount(() => {
   isLocked.value = lockedIds.items.value.includes(props.event.id);
 });
-
-onMounted(() => {
-  window.addEventListener("scroll", optimiseRenderHidden);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener("scroll", optimiseRenderHidden);
-});
 </script>
 
 <template>

stores/events.ts

@@ -2,20 +2,25 @@ import { defineStore } from "pinia";
 import type { EventId, EventType, ServerEvent } from '~/src/shared/types';
 import { useLockedIdsStore } from "~/stores/locked-ids";
 
+const MAX_EVENTS_COUNT: number = 500;
 
 export const useEventStore = defineStore("useEventStore", {
   state: () => ({
     events: [] as ServerEvent<unknown>[],
   }),
   actions: {
-    initialize(events: ServerEvent<unknown>[]) {
-      this.events = events;
+    initialize(events: ServerEvent<unknown>[]): void {
+      this.events = events.slice(0, MAX_EVENTS_COUNT);
     },
-    addList(events: ServerEvent<unknown>[]) {
+    addList(events: ServerEvent<unknown>[]): void {
       events.forEach((event) => {
-        const isExistedEvent = this.events.some((el) => el.uuid === event.uuid);
+        const isExistedEvent: boolean = this.events.some((el): boolean => el.uuid === event.uuid);
         if (!isExistedEvent) {
-          this.events.unshift(event);
+          this.events.unshift(event)
+
+          if (this.events.length > MAX_EVENTS_COUNT) {
+            this.events.pop()
+          }
         } else {
           this.events = this.events.map((el) => {
             if (el.uuid !== event.uuid) {