next: stack trace highlighting!

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { SimpleErrorInfo } from '$features/events/models/event-data';
+
+    interface Props {
+        error: SimpleErrorInfo;
+    }
+
+    let { error }: Props = $props();
+</script>
+
+{#if error.stack_trace}<div class="bg-inherit pl-[10px]">{error.stack_trace}</div>{/if}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace-frames.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import type { SimpleErrorInfo } from '$features/events/models/event-data';
+
+    interface Props {
+        error: SimpleErrorInfo;
+    }
+
+    let { error }: Props = $props();
+</script>
+
+<div class="bg-inherit">
+    {#if error.type}<span class="mr-1 font-bold text-purple-400">{error.type}:</span>{/if}{#if error.message}{error.message}{/if}
+</div>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace-header.svelte

@@ -0,0 +1,37 @@
+<script module lang="ts">
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import type { SimpleErrorInfo } from '../../models/event-data';
+
+    import SimpleStackTrace from './simple-stack-trace.svelte';
+
+    const { Story } = defineMeta({
+        component: SimpleStackTrace,
+        tags: ['autodocs'],
+        title: 'Components/Events/SimpleStackTrace'
+    });
+
+    const error: SimpleErrorInfo = {
+        message: 'Unhandled Exception: ea853120-8b1c-45f9-ba05-4f02dd965269',
+        stack_trace:
+            '   at Dictionary<string, string> Acme.SampleAspNetCore.Controllers.ValuesController.Get() in /Acme.SampleAspNetCore/Controllers/ValuesController.cs:line 44\n   at object lambda_method56(Closure, object, object[])\n   at ValueTask<IActionResult> Microsoft.AspNetCore.Mvc.Infrastructure.ActionMethodExecutor+SyncObjectResultExecutor.Execute(ActionContext actionContext, IActionResultTypeMapper mapper, ObjectMethodExecutor executor, object controller, object[] arguments)\n   at async Task Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeActionMethodAsync()+Logged(?)\n   at async Task Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeNextActionFilterAsync()+Awaited(?)\n   at void Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Rethrow(ActionExecutedContextSealed context)\n   at Task Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted)\n   at Task Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeInnerFilterAsync()\n   at async Task Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()+Awaited(?)\n   at async Task Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeAsync()+Logged(?) x 2\n   at async Task Acme.AspNetCore.AcmeMiddleware.Invoke(HttpContext context) in /Acme.AspNetCore/AcmeMiddleware.cs:line 24',
+        type: 'Exception'
+    };
+
+    const nestedErrors: SimpleErrorInfo = {
+        inner: {
+            message: 'Generated exception message.',
+            stack_trace:
+                '   at Dictionary<string, string> Acme.SampleAspNetCore.Controllers.ValuesController.Get() in /Acme.SampleAspNetCore/Controllers/ValuesController.cs:line 44',
+            type: 'System.NullReferenceException'
+        },
+        message: 'Generated exception message.',
+        stack_trace:
+            '   at Dictionary<string, string> Acme.SampleAspNetCore.Controllers.ValuesController.Get() in /Acme.SampleAspNetCore/Controllers/ValuesController.cs:line 44\n   at object lambda_method56(Closure, object, object[])\n   at ValueTask<IActionResult> Microsoft.AspNetCore.Mvc.Infrastructure.ActionMethodExecutor+SyncObjectResultExecutor.Execute(ActionContext actionContext, IActionResultTypeMapper mapper, ObjectMethodExecutor executor, object controller, object[] arguments)\n   at async Task Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeActionMethodAsync()+Logged(?)\n   at async Task Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeNextActionFilterAsync()+Awaited(?)\n   at void Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Rethrow(ActionExecutedContextSealed context)\n   at Task Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted)\n   at Task Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeInnerFilterAsync()\n   at async Task Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()+Awaited(?)\n   at async Task Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeAsync()+Logged(?) x 2\n   at async Task Acme.AspNetCore.AcmeMiddleware.Invoke(HttpContext context) in /Acme.AspNetCore/AcmeMiddleware.cs:line 24',
+        type: 'System.AggregateException'
+    };
+</script>
+
+<Story name="Default" args={{ error: error }} />
+<Story name="Nested Errors" args={{ error: nestedErrors }} />
+<Story name="Empty" args={{ error: undefined }} />

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace.stories.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type { SimpleErrorInfo } from '$features/events/models/event-data';
+
+    import { Code } from '$comp/typography';
+    import { getErrors } from '$features/events/persistent-event';
+
+    import SimpleStackTraceFrames from './simple-stack-trace-frames.svelte';
+    import SimpleStackTraceHeader from './simple-stack-trace-header.svelte';
+
+    interface Props {
+        error: SimpleErrorInfo;
+    }
+
+    let { error }: Props = $props();
+
+    const errors = getErrors(error);
+</script>
+
+<pre class="bg-muted rounded p-2 break-words whitespace-pre-wrap"><Code class="px-0"
+        >{#each errors.reverse() as error, index}<SimpleStackTraceHeader {error} /><SimpleStackTraceFrames {error} />{#if index < errors.length - 1}<br
+                />{/if}{/each}</Code
+    ></pre>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import type { StackFrameInfo } from '$features/events/models/event-data';
+
+    interface Props {
+        frame: StackFrameInfo;
+    }
+
+    let { frame }: Props = $props();
+</script>
+
+{#if frame.file_name}{' '}in
+    <span class="text-blue-400"
+        >{frame.file_name}{#if frame.line_number}:line {frame.line_number}{/if}</span
+    >{#if frame.column}:col <span class="text-blue-400">{frame.column}</span>{/if}{/if}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace-header.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { StackFrameInfo } from '$features/events/models/event-data';
+
+    interface Props {
+        frame: StackFrameInfo;
+    }
+
+    let { frame }: Props = $props();
+</script>
+
+{#if frame.generic_arguments?.length}{'<'}<span class="text-purple-400">{frame.generic_arguments.join(', ')}</span>{'>'}{/if}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace.stories.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { StackFrameInfo } from '$features/events/models/event-data';
+
+    interface Props {
+        frame: StackFrameInfo;
+    }
+
+    let { frame }: Props = $props();
+</script>
+
+<span class="text-emerald-400">{frame.name || '<anonymous>'}</span>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import type { StackFrameInfo } from '$features/events/models/event-data';
+
+    interface Props {
+        frame: StackFrameInfo;
+    }
+
+    let { frame }: Props = $props();
+</script>
+
+{#if frame.declaring_namespace || frame.declaring_type}<span class="text-purple-400"
+        >{#if frame.declaring_namespace}{frame.declaring_namespace}.{/if}{#if frame.declaring_type}{frame.declaring_type.replace('+', '')}.{/if}</span
+    >{/if}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-file-name.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { StackFrameInfo } from '$features/events/models/event-data';
+
+    interface Props {
+        frame: StackFrameInfo;
+    }
+
+    let { frame }: Props = $props();
+</script>
+
+{#if frame.data?.ILOffset || frame.data?.NativeOffset}{' '}at offset <span class="text-blue-400">{frame.data.ILOffset || frame.data.NativeOffset}</span>{/if}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-generic-arguments.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { ParameterInfo } from '$features/events/models/event-data';
+
+    interface Props {
+        parameter: ParameterInfo;
+    }
+
+    let { parameter }: Props = $props();
+</script>
+
+{#if parameter.generic_arguments?.length}{'<'}<span class="text-purple-400">{parameter.generic_arguments.join(', ')}</span>{'>'}{/if}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-method-name.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { ParameterInfo } from '$features/events/models/event-data';
+
+    interface Props {
+        parameter: ParameterInfo;
+    }
+
+    let { parameter }: Props = $props();
+</script>
+
+{#if parameter.name}{' '}{parameter.name}{/if}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-namespace.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import type { ParameterInfo } from '$features/events/models/event-data';
+
+    interface Props {
+        parameter: ParameterInfo;
+    }
+
+    let { parameter }: Props = $props();
+</script>
+
+{#if parameter.type_namespace}<span class="text-purple-400">{parameter.type_namespace}.</span>{/if}{#if parameter.type}<span class="text-purple-400"
+        >{parameter.type.replace('+', '')}</span
+    >{/if}