examples(next+node): basic app with zero-code instrumentation

examples/quick-start-playwright-test-observability-nodejs/.env.template

@@ -0,0 +1,12 @@
+# Get the required information here: https://app.tracetest.io/retrieve-token
+
+TRACETEST_TOKEN="token"
+TRACETEST_ENVIRONMENT_ID="env"
+
+AVAILABILITY_HOST="availability"
+
+REACT_URL="http://host.docker.internal:3000/"
+REACT_APP_APP_HOST="host.docker.internal"
+REACT_APP_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT="http://host.docker.internal:4318/v1/traces"
+
+OTEL_EXPORTER_OTLP_TRACES_ENDPOINT="http://tracetest-agent:4318/v1/traces"

examples/quick-start-playwright-test-observability-nodejs/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+.DS_Store
+.env
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+trace.zip

examples/quick-start-playwright-test-observability-nodejs/Dockerfile.tracetest

@@ -0,0 +1,11 @@
+FROM alpine
+
+WORKDIR /app
+ARG TRACETEST_IMAGE_VERSION=v1.4.0
+
+RUN apk --update add bash jq curl
+RUN curl -L https://raw.githubusercontent.com/kubeshop/tracetest/main/install-cli.sh | bash -s -- $TRACETEST_IMAGE_VERSION
+
+WORKDIR /resources
+
+ENTRYPOINT ["echo", "Tracetest CLI installed"]

examples/quick-start-playwright-test-observability-nodejs/docker-compose.yaml

@@ -0,0 +1,111 @@
+version: "3"
+services:
+  # next:
+  #   image: quick-start-nextjs
+  #   build:
+  #     context: ./next-app
+  #     dockerfile: ./Dockerfile
+  #   command: npm start
+  #   ports:
+  #     - "3000:3000"
+  #   environment:
+  #     - OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=${OTEL_EXPORTER_OTLP_TRACES_ENDPOINT}
+  #     - APP_HOST=${APP_HOST}
+  #   depends_on:
+  #     app:
+  #       condition: service_started
+  #     tracetest-agent:
+  #       condition: service_started
+
+  react:
+    image: quick-start-reactjs
+    build:
+      context: ./react-app
+      dockerfile: ./Dockerfile
+      args:
+        - REACT_APP_APP_HOST=${REACT_APP_APP_HOST}
+        - REACT_APP_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=${REACT_APP_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT}
+    ports:
+      - "3000:80"
+    depends_on:
+      app:
+        condition: service_started
+      tracetest-agent:
+        condition: service_started
+
+  app:
+    image: quick-start-nodejs-app
+    build:
+      context: ./node-app
+      dockerfile: ./Dockerfile
+    command: npm run app
+    ports:
+      - "8081:8081"
+    environment:
+      - OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=${OTEL_EXPORTER_OTLP_TRACES_ENDPOINT}
+      - AVAILABILITY_HOST=${AVAILABILITY_HOST}
+    depends_on:
+      tracetest-agent:
+        condition: service_started
+      availability:
+        condition: service_started
+
+  availability:
+    image: quick-start-nodejs-availability
+    build:
+      context: ./node-app
+      dockerfile: ./Dockerfile
+    command: npm run availability
+    ports:
+      - "8082:8082"
+    environment:
+      - OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=${OTEL_EXPORTER_OTLP_TRACES_ENDPOINT}
+    depends_on:
+      tracetest-agent:
+        condition: service_started
+
+  # Cloud-based Managed Tracetest
+  tracetest-agent:
+    image: kubeshop/tracetest-agent:latest
+    environment:
+      # Get the required information here: https://app.tracetest.io/retrieve-token
+      - TRACETEST_API_KEY=${TRACETEST_TOKEN}
+      - TRACETEST_ENVIRONMENT_ID=${TRACETEST_ENVIRONMENT_ID}
+    ports:
+      - "4318:4318"
+
+  tracetest-apply:
+    build:
+      dockerfile: Dockerfile.tracetest
+    volumes:
+      - ./resources:/resources
+    environment:
+      TRACETEST_TOKEN: ${TRACETEST_TOKEN}
+      TRACETEST_ENVIRONMENT_ID: ${TRACETEST_ENVIRONMENT_ID}
+    entrypoint:
+      - bash
+      - /resources/apply.sh
+    networks:
+      default: null
+    depends_on:
+      react:
+        condition: service_started
+      tracetest-agent:
+        condition: service_started
+
+  tracetest-run:
+    build:
+      dockerfile: Dockerfile.tracetest
+    volumes:
+      - ./resources:/resources
+    environment:
+      TRACETEST_TOKEN: ${TRACETEST_TOKEN}
+      TRACETEST_ENVIRONMENT_ID: ${TRACETEST_ENVIRONMENT_ID}
+    entrypoint:
+      - bash
+      - /resources/run.sh
+    networks:
+      default: null
+    depends_on:
+      tracetest-apply:
+        condition: service_completed_successfully

examples/quick-start-playwright-test-observability-nodejs/next-app/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/quick-start-playwright-test-observability-nodejs/next-app/Dockerfile

@@ -0,0 +1,7 @@
+FROM node:slim
+WORKDIR /usr/src/app/
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+EXPOSE 3000

examples/quick-start-playwright-test-observability-nodejs/next-app/README.md

@@ -0,0 +1,27 @@
+# Next.js + Playwright
+
+This example shows how to configure Playwright to work with Next.js.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-playwright)
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-playwright&project-name=with-playwright&repository-name=with-playwright)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-playwright with-playwright-app
+```
+
+```bash
+yarn create next-app --example with-playwright with-playwright-app
+```
+
+```bash
+pnpm create next-app --example with-playwright with-playwright-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/quick-start-playwright-test-observability-nodejs/next-app/app/layout.tsx

@@ -0,0 +1,11 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

examples/quick-start-playwright-test-observability-nodejs/next-app/app/page.tsx

@@ -0,0 +1,22 @@
+const { APP_HOST = 'localhost' } = process.env 
+
+export default async function Page() {
+  let data = await fetch(`http://${APP_HOST}:8081/books`)
+  let books = await data.json()
+  return (
+    <div>
+      <h1>Bookstore</h1>
+      <h2>http://{APP_HOST}:8081/books</h2>
+      <ul>
+        {books.map((book) => (
+          <li key={book.id}>
+            {book.title}
+            <span>
+              &nbsp;{book.isAvailable == true ? "✅": "❌" }
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

examples/quick-start-playwright-test-observability-nodejs/next-app/e2e/app.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from "@playwright/test"
+
+test.beforeEach(async ({ page }, info) => {
+  await page.goto("/")
+})
+
+test("should have a h1 heading of Bookstore", async ({ page }) => {
+  await expect(await page.locator("h1")).toContainText("Bookstore")  
+})
+
+test("should have a list with 3 items", async ({ page }) => {
+  await expect(await page.getByRole('listitem')).toHaveCount(3)  
+})
+
+test("should have one list item with a red X", async ({ page }) => {
+  await expect(await page.getByRole('listitem').filter({ hasText: '❌' })).toHaveCount(1)
+})

examples/quick-start-playwright-test-observability-nodejs/next-app/instrumentation.edge.ts

@@ -0,0 +1,2 @@
+import { registerOTel } from '@vercel/otel'
+registerOTel({ serviceName: 'next-app' })

examples/quick-start-playwright-test-observability-nodejs/next-app/instrumentation.node.ts

@@ -0,0 +1,33 @@
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
+import { Resource } from '@opentelemetry/resources'
+import { NodeSDK } from '@opentelemetry/sdk-node'
+import { ATTR_SERVICE_NAME } from '@opentelemetry/semantic-conventions'
+import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node'
+import { NodeTracerProvider } from '@opentelemetry/sdk-trace-node'
+import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'
+
+const resource = new Resource({
+  [ATTR_SERVICE_NAME]: 'next-app',
+})
+
+const provider = new NodeTracerProvider({ resource: resource })
+const exporter = new OTLPTraceExporter()
+const processor = new BatchSpanProcessor(exporter)
+provider.addSpanProcessor(processor)
+provider.register()
+
+const sdk = new NodeSDK({
+  traceExporter: exporter,
+  instrumentations: [
+    getNodeAutoInstrumentations({
+      '@opentelemetry/instrumentation-fs': {
+        enabled: false
+      },
+      '@opentelemetry/instrumentation-net': {
+        enabled: false
+      },
+    })
+  ],
+  serviceName: 'next-app'
+})
+sdk.start()

examples/quick-start-playwright-test-observability-nodejs/next-app/instrumentation.ts

@@ -0,0 +1,7 @@
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('./instrumentation.edge')
+  } else {
+    await import('./instrumentation.node')
+  }
+}

examples/quick-start-playwright-test-observability-nodejs/next-app/next.config.js

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    instrumentationHook: true,
+  },
+  pageExtensions: ['mdx', 'md', 'jsx', 'js', 'tsx', 'ts', 'node.ts'],
+  output: 'standalone',
+}
+
+module.exports = nextConfig