Merge pull request #207 from jerriclynsjohn/axiom-svelte

Fixing Sveltekit package and example issues
axiomhq · Jul 8, 2024 · 5af4479 · 5af4479
2 parents 5b1ff7c + 95e8f1c
commit 5af4479
Show file tree

Hide file tree

Showing 12 changed files with 92 additions and 24 deletions.
diff --git a/examples/svelte-app/package.json b/examples/svelte-app/package.json
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@axiomhq/js": "1.0.0-rc.3",
-		"@axiomhq/svelte": "workspace:*"
+		"@axiomhq/sveltekit": "workspace:*"
 	},
 	"type": "module"
 }
diff --git a/examples/svelte-app/src/app.html b/examples/svelte-app/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
+	<body data-sveltekit-preload-data="off">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/examples/svelte-app/src/hooks.client.ts b/examples/svelte-app/src/hooks.client.ts
@@ -0,0 +1,29 @@
+import type { HandleClientError } from '@sveltejs/kit';
+
+import { Logger }  from '@axiomhq/sveltekit';
+
+import { dev, browser, version } from '$app/environment'
+
+
+const logger = new Logger({
+	args: { dev, browser, version }
+});
+
+
+export const handleError: HandleClientError = async ({ error, event, status, message }) => {
+
+	const url = new URL(event.url);
+	console.log({ url })
+	logger.error(`${message}`, {
+		exception: error, request: {
+			host: url.hostname,
+			path: url.pathname,
+			status: status
+		},
+		source: 'hooks',
+	});
+
+	await logger.flush()
+
+	return { message }
+}
diff --git a/examples/svelte-app/src/hooks.server.ts b/examples/svelte-app/src/hooks.server.ts
@@ -1,22 +1,27 @@
+import type { Handle, HandleServerError } from '@sveltejs/kit';
+
+import { resolveRuntime, withAxiom, Logger } from '@axiomhq/sveltekit';
+
 import { AXIOM_TOKEN, AXIOM_DATASET, AXIOM_URL } from '$env/static/private';
-import { resolveRuntime, withAxiom, Logger } from '@axiomhq/svelte';
 import { dev, browser, version } from '$app/environment'
-import type { Handle } from '@sveltejs/kit';
 
 
-console.log({ token: AXIOM_TOKEN, dataset: AXIOM_DATASET, url: AXIOM_URL })
-const logger = new Logger({ token: AXIOM_TOKEN, dataset: AXIOM_DATASET, url: AXIOM_URL }, { runtime: resolveRuntime(), dev, browser, version });
+const logger = new Logger({
+	dataset: AXIOM_DATASET,
+	token: AXIOM_TOKEN,
+	url: AXIOM_URL,
+	runtime: resolveRuntime(),
+	args: { dev, browser, version }
+});
 
 
-// /** @type {import('@sveltejs/kit').Handle} */
 export const handle: Handle = withAxiom(logger, async ({ event, resolve }) => {
-	console.log('hooked')
 	return resolve(event);
 })
 
 
-export async function handleError({ error, event, status, message }) {
-	// console.error({ error, status, message })
+export const handleError: HandleServerError = async  ({ error, event, status, message }) => {
+
 	const url = new URL(event.request.url);
 	logger.error(`${message}`, {
 		exception: error, request: {
@@ -26,9 +31,6 @@ export async function handleError({ error, event, status, message }) {
 			status: status
 		},
 		source: 'hooks',
-		dev,
-		version,
-		browser,
 	});
 
 	await logger.flush()

diff --git a/examples/svelte-app/src/routes/Header.svelte b/examples/svelte-app/src/routes/Header.svelte
@@ -20,6 +20,12 @@
 			<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
 				<a href="/sverdle">Sverdle</a>
 			</li>
+			<li aria-current={$page.url.pathname.startsWith('/error-sample') ? 'page' : undefined}>
+				<a href="/error-sample">Error</a>
+			</li>
+			<li aria-current={$page.url.pathname.startsWith('/client-error-sample') ? 'page' : undefined}>
+				<a href="/client-error-sample">Client Error</a>
+			</li>
 		</ul>
 		<svg viewBox="0 0 2 3" aria-hidden="true">
 			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />

diff --git a/examples/svelte-app/src/routes/api/axiom/+server.ts b/examples/svelte-app/src/routes/api/axiom/+server.ts
@@ -1,15 +1,15 @@
-import { AXIOM_TOKEN, AXIOM_DATASET } from '$env/static/private';
+import type { RequestHandler } from '@sveltejs/kit';
+
 import { AxiomWithoutBatching } from '@axiomhq/js'
-import { PUBLIC_AXIOM_URL } from '$env/static/public';
 
-const axiom = new AxiomWithoutBatching({ token: AXIOM_TOKEN, url: PUBLIC_AXIOM_URL });
+import { AXIOM_TOKEN, AXIOM_DATASET, AXIOM_URL } from '$env/static/private';
+
+const axiom = new AxiomWithoutBatching({ token: AXIOM_TOKEN, url: AXIOM_URL });
 
-/** @type {import('./$types').RequestHandler} */
-export async function POST({ url, platform, request }) {
-    console.log({ url, platform })
+export const POST: RequestHandler = async ({ request }) => {
+
     const events = await request.json()
     axiom.ingest(AXIOM_DATASET, events)
 
-
     return new Response("OK");
 }
diff --git a/examples/svelte-app/src/routes/api/error/+server.ts b/examples/svelte-app/src/routes/api/error/+server.ts
@@ -0,0 +1,5 @@
+import type { RequestHandler } from '@sveltejs/kit';
+
+export const GET: RequestHandler = async () => {
+  throw new Error(" Example API Route Error");
+};
diff --git a/examples/svelte-app/src/routes/client-error-sample/+page.svelte b/examples/svelte-app/src/routes/client-error-sample/+page.svelte
@@ -0,0 +1,7 @@
+<div>
+  <main>
+    <p>
+      If it works
+    </p>
+  </main>
+</div>
diff --git a/examples/svelte-app/src/routes/client-error-sample/+page.ts b/examples/svelte-app/src/routes/client-error-sample/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoad } from "../$types";
+
+export const load: PageLoad = async () => {
+    throw new Error(" Example Page Load Error");
+};
diff --git a/examples/svelte-app/src/routes/error-sample/+page.svelte b/examples/svelte-app/src/routes/error-sample/+page.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  async function failure() {
+    const res = await fetch('/api/error');
+    if (!res.ok) {
+      throw new Error('Example Frontend Error');
+    }
+  }
+</script>
+
+<div>
+  <main>
+      <button type="button" on:click|preventDefault={failure}> Throw error! </button>
+  </main>
+</div>
diff --git a/packages/sveltekit/src/runtime.ts b/packages/sveltekit/src/runtime.ts
@@ -13,7 +13,7 @@ export const isEdgeRuntime = globalThis.EdgeRuntime ? true : false;
 
 export function resolveRuntime() {
     if (isWebWorker) {
-        return 'webworker';
+        return 'worker';
     } else if (isEdgeRuntime) {
         return 'edge';
     } else if (typeof window !== 'undefined') {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml