tidewave 0.5.1 → 0.5.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.5.3] - 2025-11-12
+
+* Make sure `instrumentation.ts` is compatible with webpack
+* Handle undefined hosts in Vite
+
+## [0.5.2] - 2025-11-12
+
+* Make sure chalk and commander are added as dependencies
+* Serve /tidewave and /tidewave/config routes from Vite
+
 ## [0.5.1] - 2025-11-11
 
 * Add `npx tidewave install` and trim down dependency list.

package/README.md

@@ -24,6 +24,28 @@ Protocol (MCP) server for your editors.
 
 If you are using Next.js, install Tidewave with:
 
+```sh
+$ npx tidewave install
+# or
+$ yarn dlx tidewave install
+# or
+$ pnpm dlx tidewave install
+# or
+$ bunx tidewave install
+```
+
+And you are almost there! Now make sure
+[Tidewave is installed](https://hexdocs.pm/tidewave/installation.html) and you
+are ready to connect Tidewave to your app.
+
+In case the command abovees do not work, you can toggle the manual installation
+instructions below
+
+<details>
+<summary>Show manual installation steps</summary><br />
+
+**1. Add Tidewave as a dependency**
+
 ```sh
 $ npm install -D tidewave
 # or
@@ -34,6 +56,8 @@ $ pnpm add --save-dev tidewave
 $ bun add --dev tidewave
 ```
 
+**2. Create `pages/api/tidewave.ts`**
+
 Then create `pages/api/tidewave.ts` with:
 
 ```typescript
@@ -60,8 +84,7 @@ export const config = {
 };
 ```
 
-_Note: this uses the **Pages Router**, however it works regardless of the router
-type you use in your application._
+**3. Create the proxy.ts or middleware.ts**
 
 If you are using Next.js 16+, then create (or modify) `proxy.ts` with:
 
@@ -97,11 +120,14 @@ export const config = {
 };
 ```
 
+**4. Create instrumentation.ts**
+
 Finally, we expose your application's spans, events, and logs to Tidewave MCP.
 First install the NodeSDK:
 
 ```sh
 npm install @opentelemetry/sdk-node
+npm install -D @opentelemetry/sdk-trace-base @opentelemetry/sdk-logs
 ```
 
 And then create (or modify) a custom `instrumentation.ts` file in the root
@@ -109,41 +135,38 @@ directory of the project (or inside `src` folder if using one):
 
 ```typescript
 // instrumentation.ts
-import { NodeSDK } from '@opentelemetry/sdk-node';
 import type { SpanProcessor } from '@opentelemetry/sdk-trace-base';
 import type { LogRecordProcessor } from '@opentelemetry/sdk-logs';
 
 export async function register() {
-  const runtime = process.env.NEXT_RUNTIME;
-  const env = process.env.NODE_ENV;
-
-  // Add your app own processes here existing configuration
-  const sdkConfig: {
-    spanProcessors: SpanProcessor[];
-    logRecordProcessors: LogRecordProcessor[];
-  } = {
-    spanProcessors: [],
-    logRecordProcessors: [],
-  };
-
-  // Conditionally add Tidewave processors in development
-  if (runtime === 'nodejs' && env === 'development') {
-    const { TidewaveSpanProcessor, TidewaveLogRecordProcessor } = await import(
-      'tidewave/next-js/instrumentation'
-    );
-
-    sdkConfig.spanProcessors.push(new TidewaveSpanProcessor());
-    sdkConfig.logRecordProcessors.push(new TidewaveLogRecordProcessor());
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    const { NodeSDK } = await import('@opentelemetry/sdk-node');
+
+    // Add your app own processes here existing configuration
+    const sdkConfig: {
+      spanProcessors: SpanProcessor[];
+      logRecordProcessors: LogRecordProcessor[];
+    } = {
+      spanProcessors: [],
+      logRecordProcessors: [],
+    };
+
+    // Conditionally add Tidewave processors in development
+    if (process.env.NODE_ENV === 'development') {
+      const { TidewaveSpanProcessor, TidewaveLogRecordProcessor } =
+        await import('tidewave/next-js/instrumentation');
+
+      sdkConfig.spanProcessors.push(new TidewaveSpanProcessor());
+      sdkConfig.logRecordProcessors.push(new TidewaveLogRecordProcessor());
+    }
+
+    const sdk = new NodeSDK(sdkConfig);
+    sdk.start();
   }
-
-  const sdk = new NodeSDK(sdkConfig);
-  sdk.start();
 }
 ```
 
-Now make sure
-[Tidewave is installed](https://hexdocs.pm/tidewave/installation.html) and you
-are ready to connect Tidewave to your app.
+</details>
 
 ### React + Vite