Merge pull request #2408 from Particular/john/stacktrace

Adding new stacktrace visualiser

Author: johnsimons

src/Frontend/src/components/messages2/StacktraceFormatter.vue

@@ -0,0 +1,213 @@
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+
+// Define TypeScript interfaces for settings and supported languages
+interface NetStackOptions {
+  frame?: string;
+  type?: string;
+  method?: string;
+  paramsList?: string;
+  paramType?: string;
+  paramName?: string;
+  file?: string;
+  line?: string;
+}
+
+interface Language {
+  name: string;
+  at: string;
+  in: string;
+  line: string;
+}
+
+type Text = string;
+
+interface Node {
+  params: Array<{ name: string; type: string }>;
+  type: string;
+  lineNumber?: number;
+  file?: string;
+  method: string;
+  spaces: string;
+}
+
+type Element = Text | Node;
+
+// Props
+const props = withDefaults(defineProps<{ stackTrace: string; options?: NetStackOptions }>(), {
+  options: () => ({
+    frame: "st-frame",
+    type: "st-type",
+    method: "st-method",
+    paramsList: "st-frame-params",
+    paramType: "st-param-type",
+    paramName: "st-param-name",
+    file: "st-file",
+    line: "st-line",
+  }),
+});
+
+// Supported languages and their keywords
+const languages: Language[] = [
+  { name: "english", at: "at", in: "in", line: "line" },
+  { name: "danish", at: "ved", in: "i", line: "linje" },
+  { name: "german", at: "bei", in: "in", line: "Zeile" },
+  { name: "spanish", at: "en", in: "en", line: "línea" },
+  { name: "russian", at: "в", in: "в", line: "строка" },
+  { name: "chinese", at: "在", in: "位置", line: "行号" },
+];
+
+// Reactive variables and setup state
+const formattedStack = ref<Element[]>([]);
+const selectedLanguage = ref<Language>(languages[0]);
+
+// Helper function to detect languages in the stack trace
+const detectLanguagesInOrder = (text: string): Language[] => {
+  const languageRegexes = {
+    english: /\s+at .*?\)/g,
+    danish: /\s+ved .*?\)/g,
+    german: /\s+bei .*?\)/g,
+    spanish: /\s+en .*?\)/g,
+    russian: /\s+в .*?\)/g,
+    chinese: /\s+在 .*?\)/g,
+  };
+
+  const detectedLanguages: Language[] = [];
+  for (const lang in languageRegexes) {
+    if (languageRegexes[lang as keyof typeof languageRegexes].test(text)) {
+      const foundLang = languages.find((l) => l.name === lang);
+      if (foundLang) {
+        detectedLanguages.push(foundLang);
+      }
+    }
+  }
+
+  return detectedLanguages;
+};
+
+// Core formatting logic
+const formatStackTrace = (stackTrace: string, selectedLang: Language): Element[] => {
+  const lines = stackTrace.split("\n");
+  const fileAndLineNumberRegEx = new RegExp(`${selectedLang.in} (.+):${selectedLang.line} (\\d+)`);
+  const atRegex = new RegExp(`(\\s*)(${selectedLang.at}) (.+?)\\((.*?)\\)`);
+
+  return lines.map((line) => {
+    const match = line.match(atRegex);
+    if (match) {
+      const [, spaces, , methodWithType, paramsWithFile] = match;
+
+      const [type, method] = (() => {
+        const parts = methodWithType.split(".");
+        const method = parts.pop() ?? "";
+        const type = parts.join(".");
+        return [type, method];
+      })();
+
+      const params = paramsWithFile.split(", ").map((param) => {
+        const [paramType, paramName] = param.split(" ");
+        return { name: paramName, type: paramType };
+      });
+
+      const matchFile = line.match(fileAndLineNumberRegEx);
+      let file, lineNumber;
+      if (matchFile) {
+        [, file, lineNumber] = matchFile;
+      }
+
+      return <Node>{ method, type, params, file, lineNumber, spaces };
+    } else {
+      return line;
+    }
+  });
+};
+
+// Process the provided stack trace
+const processStackTrace = (): void => {
+  const rawContent = props.stackTrace;
+  const detectedLanguages = detectLanguagesInOrder(rawContent);
+
+  if (!detectedLanguages.length) {
+    formattedStack.value = [rawContent]; // If no language detected, output raw content
+    return;
+  }
+
+  selectedLanguage.value = detectedLanguages[0]; // Use the first detected language
+  formattedStack.value = formatStackTrace(rawContent, selectedLanguage.value);
+};
+
+watch(
+  () => props.stackTrace,
+  () => {
+    processStackTrace();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="stack-trace-container">
+    <template v-for="line in formattedStack" :key="line">
+      <template v-if="typeof line === 'string'">
+        <span>{{ line }}</span>
+      </template>
+      <div v-else>
+        {{ line.spaces }}{{ selectedLanguage.at }}
+        <span :class="props.options.frame">
+          <span :class="props.options.type">{{ line.type }}</span
+          >.<span :class="props.options.method">{{ line.method }}</span
+          >(<span :class="props.options.paramsList">
+            <template v-for="(param, index) in line.params" :key="param.name">
+              <span :class="props.options.paramType"> {{ param.type }}</span> <span :class="props.options.paramName">{{ param.name }}</span>
+              <span v-if="index !== line.params.length - 1">, </span>
+            </template> </span
+          >)
+        </span>
+        <template v-if="line.file">
+          {{ selectedLanguage.in }} <span :class="props.options.file">{{ line.file }}</span
+          >:{{ selectedLanguage.line }} <span :class="props.options.line">{{ line.lineNumber }}</span>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.stack-trace-container {
+  font-family: monospace;
+  white-space: pre-wrap;
+}
+
+.st-frame {
+  color: #00729c;
+}
+
+.st-type {
+  color: #a11;
+}
+
+.st-method {
+  color: #164;
+}
+
+.st-file {
+  color: #c67b3d;
+}
+
+.st-line {
+  color: #6c757d;
+}
+
+.st-param-type {
+  font-style: italic;
+  color: #6b82ce;
+}
+
+.st-param-name {
+  font-weight: bold;
+  color: #343a40;
+}
+
+.st-frame-params {
+  color: #495057;
+}
+</style>

src/Frontend/src/components/messages2/StacktraceView.vue

@@ -1,14 +1,43 @@
 <script setup lang="ts">
-import CodeEditor from "@/components/CodeEditor.vue";
 import { useMessageStore } from "@/stores/MessageStore";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
+import StacktraceFormatter from "@/components/messages2/StacktraceFormatter.vue";
+import CopyToClipboard from "@/components/CopyToClipboard.vue";
 
 const { state } = storeToRefs(useMessageStore());
 </script>
 
 <template>
   <div v-if="state.failed_to_load" class="alert alert-info">Stacktrace not available.</div>
   <LoadingSpinner v-else-if="state.loading" />
-  <CodeEditor v-else :model-value="state.data.failure_metadata.exception?.stack_trace!" language="powershell" :read-only="true" :show-gutter="false"></CodeEditor>
+  <div v-else class="wrapper">
+    <div class="toolbar">
+      <CopyToClipboard class="clipboard" :value="state.data.failure_metadata.exception?.stack_trace!" />
+    </div>
+    <StacktraceFormatter :stack-trace="state.data.failure_metadata.exception?.stack_trace!" />
+  </div>
 </template>
+
+<style scoped>
+.toolbar {
+  background-color: #f3f3f3;
+  border: #8c8c8c 1px solid;
+  border-radius: 3px;
+  padding: 5px;
+  margin-bottom: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.wrapper {
+  margin-top: 5px;
+  margin-bottom: 15px;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  background: white;
+}
+</style>