Finish up otel example with working docker and small guide in readme (#46819)

Finish up OTEL example with HTTP (we don't recommend grpc because that
package is needlessly large).

Also added a link to a simple repo with otel collector and few backends:
https://github.com/vercel/opentelemetry-collector-dev-setup

---------

Co-authored-by: Tim Neutkens <tim@timneutkens.nl>

.vscode/settings.json

@@ -58,7 +58,6 @@
     "*.ts": "$(capture).test.ts, $(capture).test.tsx",
     "*.tsx": "$(capture).test.ts, $(capture).test.tsx"
   },
-
   // Allow to find the cargo project for rust-analyzer.
   "rust-analyzer.linkedProjects": ["packages/next-swc/Cargo.toml"],
   // Compile rust-analyzer in a separate directory to avoid conflicts with the main project.
@@ -68,5 +67,6 @@
   "rust-analyzer.server.extraEnv": {
     "CARGO_TARGET_DIR": "target/rust-analyzer",
     "RUST_BACKTRACE": "0"
-  }
+  },
+  "cSpell.words": ["opentelemetry", "zipkin"]
 }

examples/with-opentelemetry/README.md

@@ -1,30 +1,34 @@
-# Data fetch example
+# OpenTelemetry example
 
-Next.js was conceived to make it easy to create universal apps. That's why fetching data
-on the server and the client when necessary is so easy with Next.js.
+[OpenTelemetry](https://opentelemetry.io/) is a collection of tools for easier instrumentation of you applications.
+You can use it to setup instrumentation for Next.js with the `instrumentation.ts` file.
 
-By using `getStaticProps` Next.js will fetch data at build time from a page, and pre-render the page to static assets.
+In order to collect and inspect traces generated by OpenTelemetry you need a running OpenTelemetry collector and a backend.
+
+You can easily deploy this example on Vercel. It manages OpenTelemetry collector for you, read the [docs](https://vercel.com/docs/concepts/observability/otel-overview/quickstart) for more details. Or you can follow official OpenTelemetry [documentation](https://opentelemetry.io/docs/collector/getting-started/) if you want to use it in your self-hosted Next.js app.
+
+But you need to run your own collector if you want to test OpenTelemetry locally. We recommend cloning pre-made [dev setup](https://github.com/vercel/opentelemetry-collector-dev-setup). It contains pre-configured docker images for Collector, ZipKin, Jaeger and Prometheus.
 
 ## 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/data-fetch)
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/data-fetch&project-name=data-fetch&repository-name=data-fetch)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry&project-name=with-opentelemetry&repository-name=with-opentelemetry)
 
 ## 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 data-fetch data-fetch-app
+npx create-next-app --example with-opentelemetry with-opentelemetry-app
 ```
 
 ```bash
-yarn create next-app --example data-fetch data-fetch-app
+yarn create next-app --example with-opentelemetry with-opentelemetry-app
 ```
 
 ```bash
-pnpm create next-app --example data-fetch data-fetch-app
+pnpm create next-app --example with-opentelemetry with-opentelemetry-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/with-opentelemetry/instrumentation-node.ts

@@ -0,0 +1,22 @@
+import { Resource } from '@opentelemetry/resources'
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'
+import {
+  NodeTracerProvider,
+  SimpleSpanProcessor,
+} from '@opentelemetry/sdk-trace-node'
+
+// You can use gRPC exporter instead
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
+
+// Next.js expects you to use to register TraceProvider. It won't work if you use NodeSDK.
+// We use registered provider to create traces inside of Next.js internals.
+const provider = new NodeTracerProvider({
+  resource: new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'next-app',
+  }),
+})
+
+provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter({})))
+
+// Make sure to register you provider
+provider.register()

examples/with-opentelemetry/instrumentation.js

@@ -1,23 +0,0 @@
-export function register() {
-  if (process.env.NEXT_RUNTIME === 'nodejs') {
-    const opentelemetry = require('@opentelemetry/sdk-node')
-    const {
-      OTLPTraceExporter,
-    } = require('@opentelemetry/exporter-trace-otlp-http')
-    const { Resource } = require('@opentelemetry/resources')
-    const {
-      SemanticResourceAttributes,
-    } = require('@opentelemetry/semantic-conventions')
-
-    const sdk = new opentelemetry.NodeSDK({
-      traceExporter: new OTLPTraceExporter({}),
-      instrumentations: [],
-      resource: new Resource({
-        [SemanticResourceAttributes.SERVICE_NAME]: 'my-next-app',
-        [SemanticResourceAttributes.SERVICE_VERSION]: '1.0.0',
-      }),
-    })
-
-    sdk.start()
-  }
-}

examples/with-opentelemetry/instrumentation.ts

@@ -0,0 +1,7 @@
+export function register() {
+  // We need to make sure that we import these files only in Node.js environment.
+  // OpenTelemetry is **not** supported on Edge or Client side at the moment.
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    require('./instrumentation-node')
+  }
+}

examples/with-opentelemetry/package.json

@@ -8,12 +8,8 @@
   },
   "dependencies": {
     "@opentelemetry/api": "1.4.0",
-    "@opentelemetry/auto-instrumentations-node": "0.36.3",
-    "@opentelemetry/exporter-trace-otlp-grpc": "0.35.1",
     "@opentelemetry/exporter-trace-otlp-http": "0.35.1",
-    "@opentelemetry/instrumentation-fetch": "0.35.1",
     "@opentelemetry/resources": "1.9.1",
-    "@opentelemetry/sdk-node": "0.35.1",
     "@opentelemetry/sdk-trace-base": "1.9.1",
     "@opentelemetry/semantic-conventions": "1.9.1",
     "next": "latest",