feat(new tool): Stacktrace Formatter

Fix #631

components.d.ts

@@ -141,6 +141,8 @@ declare module '@vue/runtime-core' {
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NRadio: typeof import('naive-ui')['NRadio']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NSpace: typeof import('naive-ui')['NSpace']
     NTable: typeof import('naive-ui')['NTable']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
@@ -164,6 +166,7 @@ declare module '@vue/runtime-core' {
     SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
     SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
     SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']
+    StacktracePrettier: typeof import('./src/tools/stacktrace-prettier/stacktrace-prettier.vue')['default']
     StringObfuscator: typeof import('./src/tools/string-obfuscator/string-obfuscator.vue')['default']
     SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default']
     TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default']

package.json

@@ -58,6 +58,7 @@
     "cronstrue": "^2.26.0",
     "crypto-js": "^4.1.1",
     "date-fns": "^2.29.3",
+    "dom-to-image-more": "^3.4.5",
     "dompurify": "^3.0.6",
     "email-normalizer": "^1.0.0",
     "emojilib": "^3.0.10",
@@ -69,6 +70,7 @@
     "ibantools": "^4.3.3",
     "js-base64": "^3.7.6",
     "json5": "^2.2.3",
+    "jsstack.js": "^2.0.0",
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",
     "lodash": "^4.17.21",
@@ -79,6 +81,7 @@
     "monaco-editor": "^0.43.0",
     "naive-ui": "^2.35.0",
     "netmask": "^2.0.2",
+    "netstack.js": "^2.0.0",
     "node-forge": "^1.3.1",
     "oui-data": "^1.0.10",
     "pdf-signature-reader": "^1.4.2",

src/tools/index.ts

@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as stacktracePrettier } from './stacktrace-prettier';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -160,6 +161,7 @@ export const toolsByCategory: ToolCategory[] = [
       emailNormalizer,
       regexTester,
       regexMemo,
+      stacktracePrettier,
     ],
   },
   {

src/tools/stacktrace-prettier/dom-to-image-more.d.ts

@@ -0,0 +1,3 @@
+declare module "dom-to-image-more" {
+    export function toPng(el: HTMLElement | undefined, options?: { bgcolor: string }) : Promise<string>;
+}

src/tools/stacktrace-prettier/index.ts

@@ -0,0 +1,12 @@
+import { Stack } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Stacktrace prettier',
+  path: '/stacktrace-prettier',
+  description: 'Highlight .Net and JS stacktraces',
+  keywords: ['stacktrace', 'prettier', 'highlighter'],
+  component: () => import('./stacktrace-prettier.vue'),
+  icon: Stack,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/stacktrace-prettier/jsstack.js.d.ts

@@ -0,0 +1,3 @@
+declare module "jsstack.js" {
+    export default function jsstack(selector: string) : void;
+}

src/tools/stacktrace-prettier/netstack.js.d.ts

@@ -0,0 +1,5 @@
+declare module "netstack.js" {
+    export default class netstack {
+        constructor(el: HTMLElement | undefined, options: { prettyprint: boolean })
+    }
+}

src/tools/stacktrace-prettier/stacktrace-prettier.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import JSStack from 'jsstack.js';
+import NetStack from 'netstack.js';
+import domtoimage from 'dom-to-image-more';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
+import { useStyleStore } from '@/stores/style.store';
+import { useCopy } from '@/composable/copy';
+
+const styleStore = useStyleStore();
+
+const stackType = useQueryParamOrStorage<'net' | 'js'>({ name: 'type', storageName: 'stackfmt:type', defaultValue: 'net' });
+const stackTrace = ref('');
+const formatedStackTrace = ref<HTMLElement>();
+
+const stackTraceText = ref('');
+watchEffect(() => {
+  if (!formatedStackTrace.value) {
+    return;
+  }
+  try {
+    if (stackType.value === 'js') {
+      formatedStackTrace.value.textContent = stackTrace.value;
+      JSStack('.stacktrace');
+    }
+    else if (stackType.value === 'net') {
+      formatedStackTrace.value.innerText = stackTrace.value;
+      const _ = new NetStack(formatedStackTrace.value, { prettyprint: true });
+    }
+    stackTraceText.value = formatedStackTrace.value.innerText;
+  }
+  catch {}
+});
+
+const stackTraceMarkdown = computed(() => {
+  const lang = stackType.value === 'net' ? 'csharp' : 'javascript';
+  return `\`\`\`${lang}\n${formatedStackTrace.value?.innerText}\n\`\`\``;
+});
+
+const { copy: copyText } = useCopy({ source: stackTraceText, text: 'Formatted stacktrace copied to the clipboard' });
+const { copy: copyMarkdown } = useCopy({ source: stackTraceMarkdown, text: 'Markdown Formatted stacktrace copied to the clipboard' });
+
+async function downloadAsPNG() {
+  const dataUrl = await domtoimage.toPng(formatedStackTrace.value, { bgcolor: styleStore.isDarkTheme ? '#333' : '#fff' });
+  const link = document.createElement('a');
+  link.download = 'stacktrace.png';
+  link.href = dataUrl;
+  link.click();
+}
+</script>
+
+<template>
+  <div>
+    <n-radio-group v-model:value="stackType" name="radiogroup" mb-2 flex justify-center>
+      <n-space>
+        <n-radio
+          value="net"
+          label=".Net"
+        />
+        <n-radio
+          value="js"
+          label="Javascript"
+        />
+      </n-space>
+    </n-radio-group>
+
+    <c-input-text
+      v-model:value="stackTrace"
+      label="Stacktrace"
+      placeholder="Paste your stacktrace here.."
+      multiline
+      rows="5"
+    />
+
+    <n-divider />
+
+    <pre ref="formatedStackTrace" class="stacktrace" style="padding: 20px;" />
+
+    <div v-if="stackTraceText" flex justify-center gap-1>
+      <c-button @click="copyText()">
+        Copy Formatted (Text)
+      </c-button>
+      <c-button @click="copyMarkdown()">
+        Copy Formatted (Markdown)
+      </c-button>
+      <c-button @click="downloadAsPNG()">
+        Download as PNG
+      </c-button>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+::v-deep(.stacktrace) {
+pre, code {background-color:#333 !important; color: #fff !important;}
+.st-type {color: #0a8472; font-weight: bolder;}
+.st-method {color: #70c9ba; font-weight: bolder;}
+.st-frame-params {color: #ffffff; font-weight: normal;}
+.st-param-type {color: #0a8472;}
+.st-param-name {color: #ffffff;}
+.st-file {color:#f8b068;}
+.st-line {color:#ff4f68;}
+.st-methodName {color: #70c9ba;font-weight: bolder;}
+.st-column {color: #f8b068;}
+.st-lineNumber {color: #ff4f68;}
+.st-fileName {color: #85dbff;}
+}
+</style>