@watchupltd/svelte 1.0.0 → 1.0.3

package/README.md

@@ -0,0 +1,509 @@
+# @watchupltd/svelte
+
+Svelte integration for incident tracking with store-based state management.
+
+## Installation
+
+```bash
+npm install @watchupltd/svelte
+```
+
+## Quick Start
+
+```typescript
+// main.ts
+import { initIncident } from '@watchupltd/svelte';
+import App from './App.svelte';
+
+// Initialize incident tracking
+initIncident({
+  apiKey: 'your-api-key',
+  projectId: 'your-project-id',
+  environment: 'production',
+  captureConsoleErrors: true
+});
+
+const app = new App({
+  target: document.body
+});
+
+export default app;
+```
+
+## Usage in Components
+
+### Using Helper Functions
+
+```svelte
+<script>
+  import { captureError, captureMessage, addBreadcrumb, setUser } from '@watchupltd/svelte';
+
+  async function handleClick() {
+    addBreadcrumb({
+      message: 'User clicked button',
+      category: 'user-action'
+    });
+
+    try {
+      await fetchData();
+      captureMessage('Data loaded successfully', 'info');
+    } catch (error) {
+      captureError(error, {
+        tags: { component: 'DataFetcher' }
+      });
+    }
+  }
+</script>
+
+<button on:click={handleClick}>Load Data</button>
+```
+
+### Using the Store
+
+```svelte
+<script>
+  import { incidentStore } from '@watchupltd/svelte';
+
+  async function handleError() {
+    try {
+      await riskyOperation();
+    } catch (error) {
+      $incidentStore?.captureError(error);
+    }
+  }
+</script>
+```
+
+### Using the Client Directly
+
+```svelte
+<script>
+  import { getIncidentClient } from '@watchupltd/svelte';
+
+  const client = getIncidentClient();
+
+  function trackEvent() {
+    client?.captureMessage('Custom event', 'info');
+  }
+</script>
+```
+
+## What It Tracks
+
+### Automatic Tracking
+
+- **Global JavaScript Errors**: Via `window.onerror`
+- **Unhandled Promise Rejections**: Via `window.onunhandledrejection`
+- **Console Errors**: Optional via `captureConsoleErrors` config
+
+### Manual Tracking
+
+- Custom errors via `captureError()`
+- Log messages via `captureMessage()`
+- User context via `setUser()`
+- Breadcrumbs via `addBreadcrumb()`
+
+## API Reference
+
+### `initIncident(config: SvelteIncidentConfig): IncidentClient`
+
+Initialize the incident tracking SDK. Call once at app startup.
+
+```typescript
+import { initIncident } from '@watchupltd/svelte';
+
+const client = initIncident({
+  apiKey: 'your-api-key',
+  projectId: 'your-project-id',
+  environment: 'production',
+  captureConsoleErrors: true
+});
+```
+
+### Helper Functions
+
+**`captureError(error: Error, context?: any): Promise<string | null>`**
+```typescript
+import { captureError } from '@watchupltd/svelte';
+
+try {
+  await riskyOperation();
+} catch (error) {
+  captureError(error, {
+    tags: { operation: 'data-fetch' },
+    extra: { userId: '123' }
+  });
+}
+```
+
+**`captureMessage(message: string, level?: SeverityLevel, context?: any): Promise<string | null>`**
+```typescript
+import { captureMessage } from '@watchupltd/svelte';
+
+captureMessage('User completed checkout', 'info', {
+  tags: { flow: 'checkout' }
+});
+```
+
+**`addBreadcrumb(breadcrumb: any): void`**
+```typescript
+import { addBreadcrumb } from '@watchupltd/svelte';
+
+addBreadcrumb({
+  message: 'User clicked submit button',
+  category: 'user-action',
+  level: 'info'
+});
+```
+
+**`setUser(user: any): void`**
+```typescript
+import { setUser } from '@watchupltd/svelte';
+
+setUser({
+  id: 'user-123',
+  email: 'user@example.com',
+  username: 'john_doe'
+});
+```
+
+### Store
+
+**`incidentStore`**
+
+A Svelte store containing the `IncidentClient` instance.
+
+```svelte
+<script>
+  import { incidentStore } from '@watchupltd/svelte';
+
+  $: if ($incidentStore) {
+    $incidentStore.setTag('version', '1.0.0');
+  }
+</script>
+```
+
+### Client Access
+
+**`getIncidentClient(): IncidentClient | null`**
+
+Get the current client instance.
+
+```typescript
+import { getIncidentClient } from '@watchupltd/svelte';
+
+const client = getIncidentClient();
+if (client) {
+  client.captureMessage('App initialized', 'info');
+}
+```
+
+## Configuration
+
+```typescript
+interface SvelteIncidentConfig {
+  apiKey: string;                    // Required: Your API key
+  projectId: string;                 // Required: Your project ID
+  endpoint?: string;                 // Optional: Custom API endpoint
+  environment?: string;              // Optional: Environment (default: 'production')
+  batchInterval?: number;            // Optional: Batch interval in ms (default: 5000)
+  maxBatchSize?: number;             // Optional: Max events per batch (default: 10)
+  maxRetries?: number;               // Optional: Max retry attempts (default: 3)
+  enabled?: boolean;                 // Optional: Enable/disable SDK (default: true)
+  captureConsoleErrors?: boolean;    // Optional: Capture console.error (default: false)
+}
+```
+
+## Examples
+
+### Track User Login
+
+```svelte
+<script>
+  import { captureError, captureMessage, setUser, addBreadcrumb } from '@watchupltd/svelte';
+
+  let email = '';
+  let password = '';
+
+  async function handleLogin() {
+    addBreadcrumb({
+      message: 'User attempting login',
+      category: 'auth'
+    });
+
+    try {
+      const user = await login(email, password);
+      
+      setUser({
+        id: user.id,
+        email: user.email,
+        username: user.username
+      });
+
+      captureMessage('User logged in successfully', 'info');
+    } catch (error) {
+      captureError(error, {
+        tags: { flow: 'authentication' }
+      });
+    }
+  }
+</script>
+
+<form on:submit|preventDefault={handleLogin}>
+  <input type="email" bind:value={email} />
+  <input type="password" bind:value={password} />
+  <button type="submit">Login</button>
+</form>
+```
+
+### Track API Calls
+
+```svelte
+<script>
+  import { onMount } from 'svelte';
+  import { captureError, addBreadcrumb } from '@watchupltd/svelte';
+
+  let data = null;
+
+  onMount(async () => {
+    addBreadcrumb({
+      message: 'Fetching user data',
+      category: 'api'
+    });
+
+    try {
+      data = await fetchUserData();
+    } catch (error) {
+      captureError(error, {
+        tags: { api: 'users', endpoint: '/api/users' }
+      });
+    }
+  });
+</script>
+
+{#if data}
+  <div>{data.name}</div>
+{/if}
+```
+
+### Track Form Validation
+
+```svelte
+<script>
+  import { captureMessage } from '@watchupltd/svelte';
+
+  let formData = {
+    email: '',
+    message: ''
+  };
+
+  function validateForm() {
+    const errors = [];
+    
+    if (!formData.email) {
+      errors.push('Email is required');
+    }
+    
+    if (!formData.message) {
+      errors.push('Message is required');
+    }
+    
+    if (errors.length > 0) {
+      captureMessage(
+        `Form validation failed: ${errors.join(', ')}`,
+        'warning',
+        {
+          tags: { form: 'contact' },
+          extra: { errors }
+        }
+      );
+      return false;
+    }
+    
+    return true;
+  }
+
+  function handleSubmit() {
+    if (validateForm()) {
+      // Submit form
+    }
+  }
+</script>
+
+<form on:submit|preventDefault={handleSubmit}>
+  <input type="email" bind:value={formData.email} />
+  <textarea bind:value={formData.message}></textarea>
+  <button type="submit">Submit</button>
+</form>
+```
+
+### Track Store Changes
+
+```svelte
+<script>
+  import { writable } from 'svelte/store';
+  import { addBreadcrumb } from '@watchupltd/svelte';
+
+  const count = writable(0);
+
+  count.subscribe(value => {
+    addBreadcrumb({
+      message: `Count changed to ${value}`,
+      category: 'state-change',
+      data: { count: value }
+    });
+  });
+
+  function increment() {
+    count.update(n => n + 1);
+  }
+</script>
+
+<button on:click={increment}>
+  Count: {$count}
+</button>
+```
+
+### Error Boundary Pattern
+
+```svelte
+<script>
+  import { captureError } from '@watchupltd/svelte';
+
+  let error = null;
+
+  async function loadData() {
+    try {
+      error = null;
+      await fetchData();
+    } catch (e) {
+      error = e;
+      captureError(e, {
+        tags: { component: 'DataLoader' }
+      });
+    }
+  }
+</script>
+
+{#if error}
+  <div class="error">
+    <h2>Something went wrong</h2>
+    <p>We've been notified and are working on it.</p>
+    <button on:click={loadData}>Try Again</button>
+  </div>
+{:else}
+  <!-- Your content -->
+{/if}
+```
+
+## TypeScript Support
+
+Full TypeScript support with type definitions included.
+
+```typescript
+import type { SvelteIncidentConfig, IncidentClient } from '@watchupltd/svelte';
+
+const config: SvelteIncidentConfig = {
+  apiKey: 'your-api-key',
+  projectId: 'your-project-id'
+};
+```
+
+## SvelteKit Support
+
+Works with SvelteKit. Initialize in your root layout:
+
+```svelte
+<!-- +layout.svelte -->
+<script>
+  import { browser } from '$app/environment';
+  import { initIncident } from '@watchupltd/svelte';
+
+  if (browser) {
+    initIncident({
+      apiKey: import.meta.env.VITE_INCIDENT_API_KEY,
+      projectId: import.meta.env.VITE_INCIDENT_PROJECT_ID
+    });
+  }
+</script>
+
+<slot />
+```
+
+## Data Models
+
+### Event Model
+
+```json
+{
+  "id": "550e8400-e29b-41d4-a716-446655440000",
+  "project_id": "proj_abc123",
+  "fingerprint": "a1b2c3d4e5f6...",
+  "title": "Error",
+  "message": "Something went wrong",
+  "stack_trace": "Error: Something went wrong\n    at Component (App.svelte:10:5)",
+  "service": "frontend",
+  "environment": "production",
+  "severity": "error",
+  "timestamp": 1678901234567,
+  "platform": "javascript",
+  "release": "1.2.3",
+  "metadata": {
+    "svelte": {
+      "component": "App"
+    }
+  },
+  "user": {
+    "id": "user-123",
+    "email": "user@example.com",
+    "username": "john_doe"
+  },
+  "tags": {
+    "component": "App",
+    "version": "1.2.3"
+  },
+  "breadcrumbs": [
+    {
+      "timestamp": 1678901230000,
+      "message": "Component mounted",
+      "category": "svelte",
+      "level": "info",
+      "data": {"component": "App"}
+    }
+  ],
+  "context": {
+    "svelte": {
+      "version": "4.0.0"
+    }
+  }
+}
+```
+
+### User Model
+
+```json
+{
+  "id": "user-123",
+  "email": "user@example.com",
+  "username": "john_doe",
+  "ip_address": "192.168.1.1"
+}
+```
+
+### Breadcrumb Model
+
+```json
+{
+  "timestamp": 1678901234567,
+  "message": "User action description",
+  "category": "user-action | navigation | http | database | console",
+  "level": "fatal | error | warning | info | debug",
+  "data": {
+    "key": "value"
+  }
+}
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,16 @@
+import * as svelte_store from 'svelte/store';
+import { IncidentClient, IncidentConfig } from '@watchupltd/core';
+export { Breadcrumb, IncidentClient, IncidentConfig, SeverityLevel, User } from '@watchupltd/core';
+
+declare const incidentStore: svelte_store.Writable<IncidentClient | null>;
+interface SvelteIncidentConfig extends IncidentConfig {
+    captureConsoleErrors?: boolean;
+}
+declare function initIncident(config: SvelteIncidentConfig): IncidentClient;
+declare function getIncidentClient(): IncidentClient | null;
+declare function captureError(error: Error, context?: any): Promise<string | null> | null;
+declare function captureMessage(message: string, level?: any, context?: any): Promise<string | null> | null;
+declare function addBreadcrumb(breadcrumb: any): void;
+declare function setUser(user: any): void;
+
+export { SvelteIncidentConfig, addBreadcrumb, captureError, captureMessage, getIncidentClient, incidentStore, initIncident, setUser };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import * as svelte_store from 'svelte/store';
+import { IncidentClient, IncidentConfig } from '@watchupltd/core';
+export { Breadcrumb, IncidentClient, IncidentConfig, SeverityLevel, User } from '@watchupltd/core';
+
+declare const incidentStore: svelte_store.Writable<IncidentClient | null>;
+interface SvelteIncidentConfig extends IncidentConfig {
+    captureConsoleErrors?: boolean;
+}
+declare function initIncident(config: SvelteIncidentConfig): IncidentClient;
+declare function getIncidentClient(): IncidentClient | null;
+declare function captureError(error: Error, context?: any): Promise<string | null> | null;
+declare function captureMessage(message: string, level?: any, context?: any): Promise<string | null> | null;
+declare function addBreadcrumb(breadcrumb: any): void;
+declare function setUser(user: any): void;
+
+export { SvelteIncidentConfig, addBreadcrumb, captureError, captureMessage, getIncidentClient, incidentStore, initIncident, setUser };

package/dist/index.js

@@ -0,0 +1,105 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  IncidentClient: () => import_core2.IncidentClient,
+  addBreadcrumb: () => addBreadcrumb,
+  captureError: () => captureError,
+  captureMessage: () => captureMessage,
+  getIncidentClient: () => getIncidentClient,
+  incidentStore: () => incidentStore,
+  initIncident: () => initIncident,
+  setUser: () => setUser
+});
+module.exports = __toCommonJS(src_exports);
+var import_store = require("svelte/store");
+var import_core = require("@watchupltd/core");
+var import_core2 = require("@watchupltd/core");
+var client = null;
+var incidentStore = (0, import_store.writable)(null);
+function initIncident(config) {
+  if (client) {
+    return client;
+  }
+  client = new import_core.IncidentClient(config);
+  incidentStore.set(client);
+  if (typeof window !== "undefined") {
+    window.addEventListener("error", (event) => {
+      const error = event.error || new Error(event.message);
+      client?.captureError(error);
+    });
+    window.addEventListener("unhandledrejection", (event) => {
+      const error = event.reason instanceof Error ? event.reason : new Error(String(event.reason));
+      client?.captureError(error);
+    });
+    if (config.captureConsoleErrors) {
+      const originalError = console.error;
+      console.error = (...args) => {
+        originalError.apply(console, args);
+        const message = args.map(
+          (arg) => typeof arg === "object" ? JSON.stringify(arg) : String(arg)
+        ).join(" ");
+        client?.captureMessage(message, "error");
+      };
+    }
+  }
+  return client;
+}
+function getIncidentClient() {
+  return (0, import_store.get)(incidentStore);
+}
+function captureError(error, context) {
+  const client2 = (0, import_store.get)(incidentStore);
+  if (client2) {
+    return client2.captureError(error, context);
+  }
+  return null;
+}
+function captureMessage(message, level, context) {
+  const client2 = (0, import_store.get)(incidentStore);
+  if (client2) {
+    return client2.captureMessage(message, level, context);
+  }
+  return null;
+}
+function addBreadcrumb(breadcrumb) {
+  const client2 = (0, import_store.get)(incidentStore);
+  if (client2) {
+    client2.addBreadcrumb(breadcrumb);
+  }
+}
+function setUser(user) {
+  const client2 = (0, import_store.get)(incidentStore);
+  if (client2) {
+    client2.setUser(user);
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IncidentClient,
+  addBreadcrumb,
+  captureError,
+  captureMessage,
+  getIncidentClient,
+  incidentStore,
+  initIncident,
+  setUser
+});

package/dist/index.mjs

@@ -0,0 +1,73 @@
+// src/index.ts
+import { writable, get } from "svelte/store";
+import { IncidentClient } from "@watchupltd/core";
+import { IncidentClient as IncidentClient2 } from "@watchupltd/core";
+var client = null;
+var incidentStore = writable(null);
+function initIncident(config) {
+  if (client) {
+    return client;
+  }
+  client = new IncidentClient(config);
+  incidentStore.set(client);
+  if (typeof window !== "undefined") {
+    window.addEventListener("error", (event) => {
+      const error = event.error || new Error(event.message);
+      client?.captureError(error);
+    });
+    window.addEventListener("unhandledrejection", (event) => {
+      const error = event.reason instanceof Error ? event.reason : new Error(String(event.reason));
+      client?.captureError(error);
+    });
+    if (config.captureConsoleErrors) {
+      const originalError = console.error;
+      console.error = (...args) => {
+        originalError.apply(console, args);
+        const message = args.map(
+          (arg) => typeof arg === "object" ? JSON.stringify(arg) : String(arg)
+        ).join(" ");
+        client?.captureMessage(message, "error");
+      };
+    }
+  }
+  return client;
+}
+function getIncidentClient() {
+  return get(incidentStore);
+}
+function captureError(error, context) {
+  const client2 = get(incidentStore);
+  if (client2) {
+    return client2.captureError(error, context);
+  }
+  return null;
+}
+function captureMessage(message, level, context) {
+  const client2 = get(incidentStore);
+  if (client2) {
+    return client2.captureMessage(message, level, context);
+  }
+  return null;
+}
+function addBreadcrumb(breadcrumb) {
+  const client2 = get(incidentStore);
+  if (client2) {
+    client2.addBreadcrumb(breadcrumb);
+  }
+}
+function setUser(user) {
+  const client2 = get(incidentStore);
+  if (client2) {
+    client2.setUser(user);
+  }
+}
+export {
+  IncidentClient2 as IncidentClient,
+  addBreadcrumb,
+  captureError,
+  captureMessage,
+  getIncidentClient,
+  incidentStore,
+  initIncident,
+  setUser
+};

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@watchupltd/svelte",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
@@ -12,11 +16,11 @@
     }
   },
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --external svelte",
-    "dev": "tsup src/index.ts --format cjs,esm --dts --external svelte --watch"
+    "build": "tsup src/index.ts --format cjs,esm --dts --external svelte --external @watchupltd/core --no-splitting",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --external svelte --external @watchupltd/core --no-splitting --watch"
   },
   "dependencies": {
-    "@watchupltd/core": "file:../core"
+    "@watchupltd/core": "^1.0.0"
   },
   "peerDependencies": {
     "svelte": ">=3.0.0"

package/src/index.ts

@@ -1,84 +0,0 @@
-import { writable, get } from 'svelte/store';
-import { IncidentClient } from '@watchupltd/core';
-import type { IncidentConfig } from '@watchupltd/core';
-
-let client: IncidentClient | null = null;
-
-export const incidentStore = writable<IncidentClient | null>(null);
-
-export interface SvelteIncidentConfig extends IncidentConfig {
-  captureConsoleErrors?: boolean;
-}
-
-export function initIncident(config: SvelteIncidentConfig): IncidentClient {
-  if (client) {
-    return client;
-  }
-
-  client = new IncidentClient(config);
-  incidentStore.set(client);
-
-  if (typeof window !== 'undefined') {
-    window.addEventListener('error', (event) => {
-      const error = event.error || new Error(event.message);
-      client?.captureError(error);
-    });
-
-    window.addEventListener('unhandledrejection', (event) => {
-      const error = event.reason instanceof Error 
-        ? event.reason 
-        : new Error(String(event.reason));
-      client?.captureError(error);
-    });
-
-    if (config.captureConsoleErrors) {
-      const originalError = console.error;
-      console.error = (...args: any[]) => {
-        originalError.apply(console, args);
-        const message = args.map(arg => 
-          typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
-        ).join(' ');
-        client?.captureMessage(message, 'error');
-      };
-    }
-  }
-
-  return client;
-}
-
-export function getIncidentClient(): IncidentClient | null {
-  return get(incidentStore);
-}
-
-export function captureError(error: Error, context?: any) {
-  const client = get(incidentStore);
-  if (client) {
-    return client.captureError(error, context);
-  }
-  return null;
-}
-
-export function captureMessage(message: string, level?: any, context?: any) {
-  const client = get(incidentStore);
-  if (client) {
-    return client.captureMessage(message, level, context);
-  }
-  return null;
-}
-
-export function addBreadcrumb(breadcrumb: any) {
-  const client = get(incidentStore);
-  if (client) {
-    client.addBreadcrumb(breadcrumb);
-  }
-}
-
-export function setUser(user: any) {
-  const client = get(incidentStore);
-  if (client) {
-    client.setUser(user);
-  }
-}
-
-export { IncidentClient } from '@watchupltd/core';
-export type { IncidentConfig, SeverityLevel, User, Breadcrumb } from '@watchupltd/core';

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "lib": ["ES2020", "DOM"]
-  },
-  "include": ["src/**/*"]
-}