Update Svelte Kit example

Author: ejsmith

README.md

@@ -260,13 +260,13 @@ If you find a bug or want to contribute a feature, feel free to create a pull re
     npm install
     ```
 
-4. Build the project by running the following gulp command.
+4. Build the project by running the following command.
 
     ```sh
     npm run build
     ```
 
-5. Test the project by running the following gulp command.
+5. Test the project by running the following command.
 
     ```sh
     npm run test

example/svelte-kit/README.md

@@ -1,38 +1,12 @@
-# create-svelte
+##  Exceptionless Svelte Kit Example
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+This example shows how to use the `@exceptionless/browser` package for client side Svelte Kit and `@exceptionless/node` for server side Svelte Kit. These is both
+a client side error hook `hooks.client.js` and a server side error hook `hooks.server.js`.
 
-## Creating a project
+To run locally, follow these steps:
 
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+1. `git clone https://github.com/exceptionless/Exceptionless.JavaScript`
+2. `cd Exceptionless.Javascript`
+3. `npm install`
+4. `cd example/svelte-kit`
+5. `npm run dev -- --open`

example/svelte-kit/src/hooks.js example/svelte-kit/src/hooks.client.jsexample/svelte-kit/src/hooks.js renamed to example/svelte-kit/src/hooks.client.js

@@ -5,7 +5,8 @@ Exceptionless.startup(c => {
   c.serverUrl = "http://localhost:5000";
 });
 
-/** @type {import('@sveltejs/kit').HandleError} */
-export async function handleError({ error, request }) {
+/** @type {import('@sveltejs/kit').HandleClientError} */
+export async function handleError({ error, event }) {
+  console.log('client error handler');
   await Exceptionless.submitException(error);
 }

example/svelte-kit/src/hooks.server.js

@@ -0,0 +1,12 @@
+import { Exceptionless } from "@exceptionless/node";
+
+Exceptionless.startup(c => {
+  c.apiKey = "LhhP1C9gijpSKCslHHCvwdSIz298twx271n1l6xw";
+  c.serverUrl = "http://localhost:5000";
+});
+
+/** @type {import('@sveltejs/kit').HandleServerError} */
+export async function handleError({ error, event }) {
+  console.log('server error handler');
+  await Exceptionless.submitException(error);
+}

example/svelte-kit/src/routes/+page.svelte

@@ -1,9 +1,82 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
-
 <script>
-  const badVariable = () => {
-    return fakeVariable;
-  }
-  badVariable();
+  import { Exceptionless } from "@exceptionless/browser";
+
+  let message = null;
+  let errorInfo = null;
+
+  async function submitMessage() {
+    await Exceptionless.submitLog("Hello, world!");
+    errorInfo = null;
+    message = "Hello, world!";
+  };
+
+  async function tryCatchExample() {
+    try {
+      throw new Error("Caught in the try/catch");
+    } catch (error) {
+      message = null;
+      errorInfo = error.message;
+      await Exceptionless.submitException(error);
+    }
+  };
+
+  function unhandledExceptionExample() {
+    throw new Error("Unhandled exception");
+  };
 </script>
+
+<div class="App">
+  <header class="App-header">
+    <div class="container">
+      <h1 class="App-title">Exceptionless Svelte Sample</h1>
+      <div>
+        <p>
+          Throw an uncaught error and make sure Exceptionless tracks it.
+        </p>
+        <button on:click={unhandledExceptionExample}>
+          Throw unhandled error
+        </button>
+      </div>
+      <p>
+        The following buttons simulated handled events outside the
+        component.
+      </p>
+      <button on:click={submitMessage}>Submit Message</button>
+      {#if message}
+        <p>
+          Message sent to Exceptionless:{" "}
+          <code>{message}</code>
+        </p>
+      {/if}
+      <button on:click={tryCatchExample}>Try/Catch Example</button>
+      {#if errorInfo}
+        <p>
+          Error message sent to Exceptionless:{" "}
+          <code>{errorInfo}</code>
+        </p>
+      {/if}
+    </div>
+  </header>
+</div>
+
+<style>
+.App {
+  text-align: center;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.container {
+  max-width: 85%;
+  margin: auto;
+}
+</style>