@watchupltd/svelte 1.0.0 → 1.0.2

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@watchupltd/svelte",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -12,11 +12,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"