From 023ef8ff1e9486f9450ee8efc6d66a5e5e95ac97 Mon Sep 17 00:00:00 2001 From: Jerric Lyns John Date: Mon, 24 Jun 2024 18:03:30 +0530 Subject: [PATCH 1/3] Fixing Sveltekit package issues and its implementation in example app --- examples/svelte-app/package.json | 2 +- examples/svelte-app/src/app.html | 2 +- examples/svelte-app/src/hooks.client.ts | 29 +++++++++++++++++++ examples/svelte-app/src/hooks.server.ts | 26 +++++++++-------- examples/svelte-app/src/routes/Header.svelte | 6 ++++ .../src/routes/api/axiom/+server.ts | 14 ++++----- .../src/routes/api/error/+server.ts | 5 ++++ .../routes/client-error-sample/+page.svelte | 7 +++++ .../src/routes/client-error-sample/+page.ts | 5 ++++ .../src/routes/error-sample/+page.svelte | 14 +++++++++ packages/sveltekit/src/runtime.ts | 2 +- packages/sveltekit/src/withAxiom.ts | 2 +- pnpm-lock.yaml | 6 ++-- 13 files changed, 94 insertions(+), 26 deletions(-) create mode 100644 examples/svelte-app/src/hooks.client.ts create mode 100644 examples/svelte-app/src/routes/api/error/+server.ts create mode 100644 examples/svelte-app/src/routes/client-error-sample/+page.svelte create mode 100644 examples/svelte-app/src/routes/client-error-sample/+page.ts create mode 100644 examples/svelte-app/src/routes/error-sample/+page.svelte diff --git a/examples/svelte-app/package.json b/examples/svelte-app/package.json index 7071467..4083a38 100644 --- 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 index 77a5ff5..26b59a3 100644 --- a/examples/svelte-app/src/app.html +++ b/examples/svelte-app/src/app.html @@ -6,7 +6,7 @@ %sveltekit.head% - +
%sveltekit.body%
diff --git a/examples/svelte-app/src/hooks.client.ts b/examples/svelte-app/src/hooks.client.ts new file mode 100644 index 0000000..897723d --- /dev/null +++ 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-client', + }); + + await logger.flush() + + return { message } +} \ No newline at end of file diff --git a/examples/svelte-app/src/hooks.server.ts b/examples/svelte-app/src/hooks.server.ts index 00c022c..5f09663 100644 --- 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: { @@ -25,10 +30,7 @@ export async function handleError({ error, event, status, message }) { method: event.request.method, status: status }, - source: 'hooks', - dev, - version, - browser, + source: 'hooks-server-handle-error', }); await logger.flush() diff --git a/examples/svelte-app/src/routes/Header.svelte b/examples/svelte-app/src/routes/Header.svelte index 792dcff..c74031d 100644 --- a/examples/svelte-app/src/routes/Header.svelte +++ b/examples/svelte-app/src/routes/Header.svelte @@ -20,6 +20,12 @@
  • Sverdle
    • +
  • + Error +
    • +
  • + Client Error +
    • +
    +

    + If it works +

    +
    +
    diff --git a/examples/svelte-app/src/routes/client-error-sample/+page.ts b/examples/svelte-app/src/routes/client-error-sample/+page.ts new file mode 100644 index 0000000..f33e112 --- /dev/null +++ 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"); +}; \ No newline at end of file diff --git a/examples/svelte-app/src/routes/error-sample/+page.svelte b/examples/svelte-app/src/routes/error-sample/+page.svelte new file mode 100644 index 0000000..a80b143 --- /dev/null +++ b/examples/svelte-app/src/routes/error-sample/+page.svelte @@ -0,0 +1,14 @@ + + +
    +
    + +
    +
    diff --git a/packages/sveltekit/src/runtime.ts b/packages/sveltekit/src/runtime.ts index 52ab654..3b036ed 100644 --- 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/packages/sveltekit/src/withAxiom.ts b/packages/sveltekit/src/withAxiom.ts index 9bfc1f0..5f68833 100644 --- a/packages/sveltekit/src/withAxiom.ts +++ b/packages/sveltekit/src/withAxiom.ts @@ -20,7 +20,7 @@ export function withAxiom(logger: Logger, handler: Handle): Handle { status: response.status, durationMs: durationMs, }, - source: 'hooks' + source: 'hooks-server' }); await logger.flush(); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 28ffb7d..65ddb30 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -139,9 +139,9 @@ importers: '@axiomhq/js': specifier: 1.0.0-rc.3 version: 1.0.0-rc.3 - '@axiomhq/svelte': + '@axiomhq/sveltekit': specifier: workspace:* - version: link:../../packages/svelte + version: link:../../packages/sveltekit devDependencies: '@fontsource/fira-mono': specifier: ^4.5.10 @@ -259,7 +259,7 @@ importers: specifier: ^1.2.0 version: 1.2.0 - packages/svelte: + packages/sveltekit: dependencies: '@axiomhq/js': specifier: workspace:* From aebf4ced7b1e2362f3b6d6f842c98c3cfc45394a Mon Sep 17 00:00:00 2001 From: Jerric Lyns John Date: Mon, 1 Jul 2024 22:01:14 +0530 Subject: [PATCH 2/3] fix: renaming the source for hooks.server.ts --- examples/svelte-app/src/hooks.server.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/svelte-app/src/hooks.server.ts b/examples/svelte-app/src/hooks.server.ts index 5f09663..2fad7df 100644 --- a/examples/svelte-app/src/hooks.server.ts +++ b/examples/svelte-app/src/hooks.server.ts @@ -30,7 +30,7 @@ export const handleError: HandleServerError = async ({ error, event, status, me method: event.request.method, status: status }, - source: 'hooks-server-handle-error', + source: 'hooks-server', }); await logger.flush() From 95e8f1ced7784e4ada2e8e063a56eb2c4f181508 Mon Sep 17 00:00:00 2001 From: Jerric Lyns John Date: Sat, 6 Jul 2024 13:18:38 +0530 Subject: [PATCH 3/3] fix: renaming the source to just hooks --- examples/svelte-app/src/hooks.client.ts | 2 +- examples/svelte-app/src/hooks.server.ts | 2 +- packages/sveltekit/src/withAxiom.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/svelte-app/src/hooks.client.ts b/examples/svelte-app/src/hooks.client.ts index 897723d..359fb39 100644 --- a/examples/svelte-app/src/hooks.client.ts +++ b/examples/svelte-app/src/hooks.client.ts @@ -20,7 +20,7 @@ export const handleError: HandleClientError = async ({ error, event, status, mes path: url.pathname, status: status }, - source: 'hooks-client', + source: 'hooks', }); await logger.flush() diff --git a/examples/svelte-app/src/hooks.server.ts b/examples/svelte-app/src/hooks.server.ts index 2fad7df..1a338b2 100644 --- a/examples/svelte-app/src/hooks.server.ts +++ b/examples/svelte-app/src/hooks.server.ts @@ -30,7 +30,7 @@ export const handleError: HandleServerError = async ({ error, event, status, me method: event.request.method, status: status }, - source: 'hooks-server', + source: 'hooks', }); await logger.flush() diff --git a/packages/sveltekit/src/withAxiom.ts b/packages/sveltekit/src/withAxiom.ts index 5f68833..9bfc1f0 100644 --- a/packages/sveltekit/src/withAxiom.ts +++ b/packages/sveltekit/src/withAxiom.ts @@ -20,7 +20,7 @@ export function withAxiom(logger: Logger, handler: Handle): Handle { status: response.status, durationMs: durationMs, }, - source: 'hooks-server' + source: 'hooks' }); await logger.flush();