create-svelte

Everything you need to build a Svelte project, powered by create-svelte.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# 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:

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:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

---

Umami Analytics Integration

The application includes a comprehensive Umami Analytics integration that tracks page views and logs detailed request information. This integration is implemented using SvelteKit server hooks.

Configuration

To configure Umami Analytics, add the following environment variables to your .env file:

# Umami Analytics Configuration
UMAMI_COLLECTION_ENDPOINT=https://your-umami-instance.com/api/collect
UMAMI_WEBSITE_ID=your-website-id-here
UMAMI_ENABLE_LOGGING=true
UMAMI_DEBUG_MODE=false
UMAMI_BATCH_INTERVAL=5000       # Batch interval in ms (default: 5000)
UMAMI_MAX_BATCH_SIZE=10         # Maximum batch size (default: 10)
UMAMI_TIMEOUT_MS=10000          # Request timeout in ms (default: 10000)

Features

1. Comprehensive Logging: Detailed request logging with timestamps, request IDs, method, path, query parameters, headers, IP, and user agent
2. Batch Processing: Requests are batched to reduce API calls and improve performance
3. Error Handling: Robust error handling with detailed error logging
4. Device Detection: User agent parsing to detect browser, OS, device type, and screen size
5. Performance Tracking: Tracks request duration and includes performance metrics
6. Location Tracking: Client IP address is included in payload for accurate location tracking
7. Configurable: All aspects are configurable via environment variables

Log Levels

The integration supports different log levels:

• info: General information (default)
• warn: Warnings about potential issues
• error: Errors that need attention

Implementation Details

The Umami integration is implemented in src/hooks.server.ts and includes:

1. Request Tracking: Intercepts all incoming requests and logs detailed information
2. Payload Creation: Creates comprehensive payloads with device information, performance metrics, and request details
3. IP Address Tracking: Includes client IP address in payload for accurate location tracking
4. Batch Processing: Collects requests and sends them in batches to reduce API calls
5. Cleanup: Properly handles process exit to ensure pending requests are sent

Error Handling

The integration includes comprehensive error handling:

• Network errors
• Timeout errors
• Invalid responses
• Configuration errors
• Payload creation errors

All errors are logged with detailed information to help with debugging.

Debugging

To enable debug mode, set:

UMAMI_DEBUG_MODE=true
UMAMI_ENABLE_LOGGING=true

Debug mode provides detailed JSON output of all logged information.

Type Safety

The integration includes TypeScript type definitions in src/app.d.ts for all Umami-related environment variables.