js error page

Makefile

@@ -76,6 +76,7 @@ generate-fonts:
 	node generate-font.js
 
 node2nix:
+	npm install --lockfile-version 2
 	node2nix --development -18 --input package.json \
 	--lock package-lock.json \
 	--node-env ./flake/node-env.nix \

package.json

@@ -53,7 +53,7 @@
     "svelte-file-dropzone": "^2.0.1",
     "svelte-language-server": "^0.15.0",
     "svelte-local-storage-store": "^0.6.0",
-    "svelte-select": "^5.6.0",
+    "svelte-select": "^5.8.0",
     "svelte-tiny-virtual-list": "^2.0.5",
     "textures": "^1.2.3",
     "tippy.js": "^6.3.7",
@@ -65,9 +65,10 @@
     "@iconify/json": "^2.2.124",
     "@iconify/tools": "^3.0.5",
     "@lezer/generator": "^1.5.0",
-    "@sveltejs/adapter-auto": "^1.0.0",
-    "@sveltejs/adapter-static": "^1.0.0",
-    "@sveltejs/kit": "^1.20.4",
+    "@sveltejs/adapter-auto": "^3.0.1",
+    "@sveltejs/adapter-static": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@types/chroma-js": "^2.1.4",
     "@types/crypto-js": "^4.2.1",
     "@types/d3": "^7.4.0",
@@ -101,7 +102,7 @@
     "tailwindcss": "^3.3.3",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
-    "vite": "^4.0.0",
+    "vite": "^5.0.0",
     "wait-port": "^1.1.0"
   },
   "type": "module"

src/app.d.ts

@@ -55,7 +55,11 @@ declare var USER_CONFIG: UserConfig;
 declare var __now: any;
 
 declare namespace App {
-  // interface Error {}
+  interface Error {
+    message: string;
+    status?: number;
+    stack?: string;
+  }
   // interface Locals {}
   // interface PageData {}
   // interface Platform {}

src/hooks.client.ts

@@ -0,0 +1,50 @@
+import type { HandleClientError } from "@sveltejs/kit";
+import * as toast from "bulma-toast";
+
+export const handleError: HandleClientError = async ({ error, status, message }) => {
+  let stack = null;
+  if (error instanceof Error) {
+    stack = error.stack;
+  }
+  return { message, stack, status, detail: error.toString() };
+};
+
+function formatError(error: any) {
+  if (error.stack) {
+    return error.stack;
+  }
+
+  if (error.message) {
+    return error.message;
+  } else {
+    return error.toString();
+  }
+}
+
+const footer = `
+<p class="mt-3">
+  Please report this issue at <a href="https://github.com/ananthakumaran/paisa/issues"
+    >https://github.com/ananthakumaran/paisa/issues</a
+  >. Closing and reopening the app may help.
+</p>
+`;
+
+function displayError(error: any) {
+  const message = formatError(error);
+  toast.toast({
+    message: `<div class="message invertable is-danger"><div class="message-header">Something Went Wrong</div><div class="message-body">${message}${footer}</div></div>`,
+    type: "is-danger",
+    dismissible: true,
+    pauseOnHover: true,
+    duration: 10000,
+    position: "center",
+    animate: { in: "fadeIn", out: "fadeOut" }
+  });
+}
+
+window.addEventListener("unhandledrejection", (event) => {
+  displayError(event.reason);
+});
+window.addEventListener("error", (event) => {
+  displayError(event.error);
+});

src/lib/investment.ts

@@ -195,7 +195,7 @@ export function renderYearlyInvestmentTimeline(yearlyCards: InvestmentYearlyCard
   const id = "#d3-yearly-investment-timeline";
   const BAR_HEIGHT = rem(20);
   const svg = d3.select(id),
-    margin = { top: rem(50), right: rem(20), bottom: rem(20), left: rem(70) },
+    margin = { top: rem(15), right: rem(20), bottom: rem(20), left: rem(70) },
     width =
       document.getElementById(id.substring(1)).parentElement.clientWidth -
       margin.left -

src/lib/utils.ts

@@ -711,7 +711,7 @@ export async function ajax(route: string, options?: RequestInit, params?: Record
   if (response.status == 401 && route != "/api/ping") {
     logout();
     await goto("/login");
-    throw error(401, "Unauthorized");
+    error(401, "Unauthorized");
   }
 
   return JSON.parse(body, (key, value) => {

src/routes/(app)/ledger/editor/+page.ts

@@ -4,5 +4,5 @@ import type { PageLoad } from "./$types";
 
 export const load: PageLoad = async () => {
   const { files } = await ajax("/api/editor/files");
-  throw redirect(307, `/ledger/editor/${files[0].name}`);
+  redirect(307, `/ledger/editor/${files[0].name}`);
 };

src/routes/+error.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+</script>
+
+<section class="section">
+  <div class="container is-fluid">
+    <div class="columns">
+      <div class="column is-4 is-offset-4 mt-5">
+        {#if $page.error.status === 404}
+          <article class="message invertable is-danger">
+            <div class="message-header">Page not found</div>
+            <div class="message-body">
+              <p>
+                The page you are looking for does not exist. It may have been moved, or removed
+                altogether. Perhaps you can return back to the site's <a href="/">homepage</a> and see
+                if you can find what you are looking for.
+              </p>
+            </div>
+          </article>
+        {:else}
+          <article class="message invertable is-danger">
+            <div class="message-header">Something Went Wrong</div>
+            <div class="message-body">
+              <p>Paisa has encountered a critical error</p>
+              <p class="mt-2">{$page.error.message}</p>
+              {#if $page.error.stack}
+                <pre class="mt-2">{$page.error.stack}</pre>
+              {/if}
+              <p class="mt-5">
+                Please report this issue at <a href="https://github.com/ananthakumaran/paisa/issues"
+                  >https://github.com/ananthakumaran/paisa/issues</a
+                >. Closing and reopening the app may help.
+              </p>
+            </div>
+          </article>
+        {/if}
+      </div>
+    </div>
+  </div>
+</section>

svelte.config.js

@@ -1,5 +1,5 @@
 import adapter from "@sveltejs/adapter-static";
-import { vitePreprocess } from "@sveltejs/kit/vite";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {