bandolier-template/admin/pages/Errors.svelte

<script>
  import { onMount } from 'svelte';
  import Icon from '$/client/components/Icon.svelte';
  import { link } from 'svelte-spa-router';
  import Code from '$/client/components/Code.svelte';
  import Spinner from '$/client/components/Spinner.svelte';
  import { log } from "$/client/logging.js";
  import api from '$/client/api.js';
  import Layout from "$/admin/Layout.svelte";
  import { defer } from "$/client/helpers.js";

  let errors;
  let error_selected;

  const load_promise = defer();

  const load_info = async () => {
    let [status, data] = await api.get('/api/devtools/info');

    if(status == 200) {
      errors = data.errors;

      if(errors.length > 0) {
        error_selected = errors[0];
      }

      load_promise.resolve();
    } else {
      log.debug("failed to get info", status);
    }
  }

  onMount(async () => {
    await load_info();
  });
</script>

<style>
  /** Sidebar style can be found in static/global.css */
  sidebar.fixed {
    overflow-y: auto;
    max-height: calc(100vh - var(--fixed-header-height));
    min-height: calc(100vh - var(--fixed-header-height));
    height: calc(100vh - var(--fixed-header-height));
  }

  display {
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    max-height: calc(100vh - var(--fixed-header-height));
    min-height: calc(100vh - var(--fixed-header-height));
    height: calc(100vh - var(--fixed-header-height));
    overflow-y: auto;
  }
</style>

<Layout fullwidth={ true } fixed={ true } footer={false} authenticated={ true } testid="page-admin-errors">
  {#await load_promise}
    <Spinner />
  {:then}
  <content>
    <sidebar class="fixed">
        <top>
          <h3><a href="/" use:link><Icon name="arrow-left-circle" size="36"/></a> Errors</h3>
        </top>
        <items>
            {#each errors as error}
              <a on:click={ () => error_selected = error }>{ error.location ? error.location.file : error.filename}</a>
            {:else}
              <h3>No Errors</h3>
              <span>You currently have no errors that are shown. Try refreshing.</span>
            {/each}
        </items>
    </sidebar>

    <display>
    {#if error_selected}
      {#if error_selected.location}
        <h1>{error_selected.location.file} <Icon name="alert-circle" size="36" /></h1>
        <h3>{ error_selected.text }</h3>
          <pre>
          <code>
{#each error_selected.location.lineText.split('\n') as line, i}
<span class:error={ error_selected.location.line === i + 1}>{ `${line}\n` }</span>
{/each}
          </code>
          </pre>

          <h1>Notes</h1>
          {#each error_selected.notes as note}
          <h3>{note.location.file}</h3>
          <p>{note.text}</p>
          <pre>
            <code>
{ note.location.line}: {note.location.lineText}
            </code>
          </pre>
          {/each}
      {:else if error_selected.filename}
        <h1>{error_selected.filename} <Icon name="alert-circle" size="36" /></h1>
        <h3>{ error_selected.message }</h3>
        <pre><code>{error_selected.code}</code></pre>

        <h1>Stack</h1>
        <pre><code>{ error_selected.stack }</code></pre>
      {:else}
        <p>Unknown error I've never seen before. Look in console and in `debug/` for error output files.</p>
      {/if}
    {/if}
  </display>
</content>
{/await}
</Layout>