Skip to content

Setup otel/tracing example #5552

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Setup otel/tracing example #5552

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a5eb420
Setup otel example
jamiedavenport Oct 20, 2025
4780458
Improve the server entrypoint tracing
jamiedavenport Oct 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions examples/react/start-otel/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
node_modules
package-lock.json
yarn.lock

.DS_Store
.cache
.env
.vercel
.output
.nitro
/build/
/api/
/server/build
/public/build# Sentry Config File
.env.sentry-build-plugin
Comment on lines +14 to +15
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix comment placement and formatting.

The Sentry Config File comment should be on its own line before .env.sentry-build-plugin, not appended to the end of /public/build. Additionally, .gitignore files should end with a newline.

-/public/build# Sentry Config File
+/public/build
+# Sentry Config File
 .env.sentry-build-plugin

Ensure the file ends with a newline after the last entry.

🤖 Prompt for AI Agents 
In examples/react/start-otel/.gitignore around lines 14 to 15, the inline
comment "Sentry Config File" is appended to the `/public/build` entry and the
file is missing a trailing newline; move the comment to its own line immediately
above `.env.sentry-build-plugin` (e.g. a standalone line containing "Sentry
Config File") so it does not annotate `/public/build`, and ensure the file ends
with a single newline character after the last entry.

/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
.tanstack
4 changes: 4 additions & 0 deletions examples/react/start-otel/.prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
**/build
**/public
pnpm-lock.yaml
routeTree.gen.ts
11 changes: 11 additions & 0 deletions examples/react/start-otel/.vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"files.watcherExclude": {
"**/routeTree.gen.ts": true
},
"search.exclude": {
"**/routeTree.gen.ts": true
},
"files.readonlyInclude": {
"**/routeTree.gen.ts": true
}
}
72 changes: 72 additions & 0 deletions examples/react/start-otel/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
# Welcome to TanStack.com!

This site is built with TanStack Router!

- [TanStack Router Docs](https://tanstack.com/router)

It's deployed automagically with Netlify!

- [Netlify](https://netlify.com/)

## Development

From your terminal:

```sh
pnpm install
pnpm dev
```

This starts your app in development mode, rebuilding assets on file changes.

## Editing and previewing the docs of TanStack projects locally

The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app.
In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system.

Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally :

1. Create a new directory called `tanstack`.

```sh
mkdir tanstack
```

2. Enter the directory and clone this repo and the repo of the project there.

```sh
cd tanstack
git clone git@github.com:TanStack/tanstack.com.git
git clone git@github.com:TanStack/form.git
```

> [!NOTE]
> Your `tanstack` directory should look like this:
>
> ```
> tanstack/
> |
> +-- form/
> |
> +-- tanstack.com/
> ```
> [!WARNING]
> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found.
3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode:
```sh
cd tanstack.com
pnpm i
# The app will run on https://localhost:3000 by default
pnpm dev
```
4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`.

> [!NOTE]
> The updated pages need to be manually reloaded in the browser.
> [!WARNING]
> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page!
Comment on lines +1 to +72
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Replace README content to match the OTEL example.

The README describes the TanStack.com documentation site workflow, including instructions for editing docs across TanStack projects. However, this is the start-otel example demonstrating OpenTelemetry integration with TanStack Router, not the tanstack.com website.

The README should describe:

  • What the OTEL example demonstrates
  • How to run the example (pnpm install, pnpm dev)
  • How to start the Jaeger instance (Docker Compose)
  • How to view traces
  • Any specific instrumentation patterns demonstrated

Apply this diff to provide appropriate documentation:

-# Welcome to TanStack.com!
+# TanStack Start + OpenTelemetry Example
 
-This site is built with TanStack Router!
+This example demonstrates OpenTelemetry tracing integration with TanStack Router and React Start.
 
-- [TanStack Router Docs](https://tanstack.com/router)
-
-It's deployed automagically with Netlify!
-
-- [Netlify](https://netlify.com/)
+## Features
+
+- Manual OpenTelemetry instrumentation
+- Jaeger for trace visualization
+- Server-side tracing with TanStack Start
 
 ## Development
 
-From your terminal:
+1. Start the Jaeger instance:
 
 ```sh
-pnpm install
-pnpm dev
+docker-compose up -d

-This starts your app in development mode, rebuilding assets on file changes.

-## Editing and previewing the docs of TanStack projects locally

-The documentations for all TanStack projects except for React Charts are hosted on https://tanstack.com, powered by this TanStack Router app.
-In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system.

-Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's TanStack/form) and preview them locally :

-1. Create a new directory called tanstack.

-sh -mkdir tanstack -

-2. Enter the directory and clone this repo and the repo of the project there.
+2. Install dependencies and start the dev server:

-cd tanstack
-git clone git@github.com:TanStack/tanstack.com.git
-git clone git@github.com:TanStack/form.git
+pnpm install
+pnpm dev

-> [!NOTE]
-> Your tanstack directory should look like this:
->
-> -> tanstack/ -> | -> +-- form/ -> | -> +-- tanstack.com/ ->

-> [!WARNING]
-> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, tanstack/form must be cloned into form (this is the default) instead of some-other-name, because that way, the doc pages won't be found.

-3. Enter the tanstack/tanstack.com directory, install the dependencies and run the app in dev mode:
+3. Open the application at http://localhost:3000

-sh -cd tanstack.com -pnpm i -# The app will run on https://localhost:3000 by default -pnpm dev -
+4. View traces in Jaeger at http://localhost:16686

-4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in tanstack/form/docs.
+## Resources

-> [!NOTE]
-> The updated pages need to be manually reloaded in the browser.

-> [!WARNING]
-> You will need to update the docs/config.json file (in the project's repo) if you add a new doc page!
+- TanStack Router Docs
+- OpenTelemetry JavaScript
+- Jaeger


<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 LanguageTool</summary>

[uncategorized] ~25-~25: Did you mean the formatting language “Markdown” (= proper noun)?
Context: ...TanStack Router app. In production, the markdown doc pages are fetched from the GitHub r...

(MARKDOWN_NNP)

---

[style] ~71-~71: Using many exclamation marks might seem excessive (in this case: 8 exclamation marks for a text that’s 1725 characters long)
Context: ...e manually reloaded in the browser.  > [!WARNING] > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! 

(EN_EXCESSIVE_EXCLAMATION)

</details>
<details>
<summary>🪛 markdownlint-cli2 (0.18.1)</summary>

46-46: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

---

53-53: Blank line inside blockquote

(MD028, no-blanks-blockquote)

---

66-66: Bare URL used

(MD034, no-bare-urls)

---

70-70: Blank line inside blockquote

(MD028, no-blanks-blockquote)

</details>

</details>

<details>
<summary>🤖 Prompt for AI Agents</summary>

In examples/react/start-otel/README.md around lines 1-72, the README currently
contains the tanstack.com docs workflow instead of documentation for the
OpenTelemetry example; replace that top section with a focused OTEL README that
explains what the example demonstrates (OpenTelemetry + TanStack Router
instrumentation patterns), how to run it (pnpm install, pnpm dev), how to start
Jaeger (docker-compose up -d), where to view traces (http://localhost:16686) and
any specific instrumentation patterns used (e.g., router span creation, manual
spans for loaders/actions), and add a short Resources section linking to
TanStack Router docs, OpenTelemetry JS, and Jaeger.


</details>

<!-- This is an auto-generated comment by CodeRabbit -->

14 changes: 14 additions & 0 deletions examples/react/start-otel/docker-compose.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
version: "3.9"
services:
jaeger:
image: jaegertracing/all-in-one:1.57
container_name: jaeger
environment:
- COLLECTOR_OTLP_ENABLED=true
ports:
- "16686:16686" # Jaeger UI
- "4317:4317" # OTLP gRPC
- "4318:4318" # OTLP HTTP (used by app)
restart: unless-stopped


36 changes: 36 additions & 0 deletions examples/react/start-otel/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
{
"name": "tanstack-start-example-otel",
"private": true,
"sideEffects": false,
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "vite build && tsc --noEmit",
"start": "node .output/server/index.mjs"
},
Comment on lines +6 to +10
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify the start script output path.

Vite usually emits to dist/ by default; the script starts .output/server/index.mjs. Ensure your build config writes to .output/server.

🏁 Script executed:

#!/bin/bash
set -euo pipefail
# Check for vite config and SSR/output settings
fd -HI '^vite\.config\.(ts|mjs|js)$' .
rg -n --no-messages -C2 'outDir|ssr|build' $(fd -HI '^vite\.config\.(ts|mjs|js)$' . || echo)
# Confirm referenced file exists (if already built)
test -f examples/react/start-otel/.output/server/index.mjs && echo "Found .output/server/index.mjs" || echo "Note: .output/server/index.mjs not present (build not run or outDir differs)."

Length of output: 33906

#!/bin/bash
# Extract vite config for start-otel specifically
cat examples/react/start-otel/vite.config.ts

---

🏁 Script executed:

```shell
#!/bin/bash
cat examples/react/start-otel/vite.config.ts

Length of output: 416


---

🏁 Script executed:

```shell
#!/bin/bash
# Check the package.json for start-otel to confirm the start script
cat examples/react/start-otel/package.json

echo "---"

# Check a few other start examples to see the pattern
cat examples/react/start-basic/package.json 2>/dev/null | grep -A5 '"scripts"'

Length of output: 1180


---

🌐 Web query:

```web
TanStack Start tanstackStart vite plugin outDir .output configuration

💡 Result:

Short answer: TanStack Start's Vite plugin no longer always produces a .output folder by itself — to get the traditional .output server bundle you must enable Nitro in your Vite build (either Nitro v3's vite plugin or the compatibility @tanstack/nitro-v2-vite-plugin). Add the Nitro Vite plugin alongside tanstackStart and the framework plugin; Nitro will generate the .output/server entry (or a dist/ server bundle if you don't use the Nitro plugin). [1][2][3]

Example (vite.config.ts):
import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { nitro } from 'nitro/vite' // or use @tanstack/nitro-v2-vite-plugin
import viteReact from '@vitejs/plugin-react'

export default defineConfig({
plugins: [
tanstackStart(),
nitro({ /* nitro config / preset */ }),
viteReact(),
],
})

Notes:

  • Use @tanstack/nitro-v2-vite-plugin as a fallback for older Start RCs; Nitro v3's vite plugin is the official path. [1][2]
  • If you run build without the Nitro plugin you may get dist/ (server + client) and not .output; adding the Nitro plugin makes .output/server/index.mjs available for Node/Bun deployment. [3][2]

Sources:

  • TanStack Start hosting docs (Nitro + nitro-v2 plugin recommendation). [1][2]
  • Community writeup on missing .output when Nitro isn't used. [3]

---

🏁 Script executed:

```shell
#!/bin/bash
# Search for nitro references in start-otel vite config
echo "=== start-otel vite.config.ts ===" 
grep -i nitro examples/react/start-otel/vite.config.ts || echo "(no nitro reference)"

echo ""
echo "=== Checking start-basic vite.config.ts ===" 
cat examples/react/start-basic/vite.config.ts

echo ""
echo "=== Checking start-basic for nitro import ===" 
grep -i nitro examples/react/start-basic/vite.config.ts || echo "(no nitro reference found)"

Length of output: 590

Add Nitro plugin to vite.config.ts or update the start script path to match actual build output.

The vite.config.ts for start-otel uses tanstackStart() but lacks the Nitro plugin required to produce the .output/server/index.mjs that the start script expects. Without Nitro, Vite builds to dist/ by default, causing the start script to fail. Either add the Nitro plugin (e.g., @tanstack/nitro-v2-vite-plugin or nitro/vite) to generate .output/server, or update the start script to reference the actual build output directory.

🤖 Prompt for AI Agents 
In examples/react/start-otel/package.json around lines 6 to 10, the "start"
script expects .output/server/index.mjs but the Vite config uses tanstackStart()
without a Nitro plugin so the build produces dist/ instead; either add a Nitro
Vite plugin (for example @tanstack/nitro-v2-vite-plugin or nitro/vite) to
vite.config.ts so the build emits .output/server/index.mjs, or change the
"start" script to point to the actual build output (e.g., dist/ or the correct
server entry) to match what the current build produces.

"dependencies": {
"@opentelemetry/api": "^1.9.0",
"@opentelemetry/exporter-trace-otlp-proto": "^0.206.0",
"@opentelemetry/sdk-node": "^0.206.0",
"@opentelemetry/sdk-trace-node": "^2.1.0",
"@tanstack/react-router": "^1.133.15",
"@tanstack/react-router-devtools": "^1.133.15",
"@tanstack/react-start": "^1.133.15",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwind-merge": "^2.6.0",
"zod": "^3.24.2"
},
Comment on lines +11 to +23
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Use workspace: for internal TanStack packages in the monorepo.*

This keeps examples pinned to local workspace builds and avoids version drift.

-    "@tanstack/react-router": "^1.133.15",
-    "@tanstack/react-router-devtools": "^1.133.15",
-    "@tanstack/react-start": "^1.133.15",
+    "@tanstack/react-router": "workspace:*",
+    "@tanstack/react-router-devtools": "workspace:*",
+    "@tanstack/react-start": "workspace:*",

As per coding guidelines.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"dependencies": {
"@opentelemetry/api": "^1.9.0",
"@opentelemetry/exporter-trace-otlp-proto": "^0.206.0",
"@opentelemetry/sdk-node": "^0.206.0",
"@opentelemetry/sdk-trace-node": "^2.1.0",
"@tanstack/react-router": "^1.133.15",
"@tanstack/react-router-devtools": "^1.133.15",
"@tanstack/react-start": "^1.133.15",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwind-merge": "^2.6.0",
"zod": "^3.24.2"
},
"dependencies": {
"@opentelemetry/api": "^1.9.0",
"@opentelemetry/exporter-trace-otlp-proto": "^0.206.0",
"@opentelemetry/sdk-node": "^0.206.0",
"@opentelemetry/sdk-trace-node": "^2.1.0",
"@tanstack/react-router": "workspace:*",
"@tanstack/react-router-devtools": "workspace:*",
"@tanstack/react-start": "workspace:*",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwind-merge": "^2.6.0",
"zod": "^3.24.2"
},
🤖 Prompt for AI Agents 
In examples/react/start-otel/package.json around lines 11 to 23, the three
internal TanStack packages (@tanstack/react-router,
@tanstack/react-router-devtools, @tanstack/react-start) are pinned to external
versions; replace their version strings with "workspace:*" so the example uses
local monorepo builds, then run the workspace package manager (pnpm/npm/yarn) to
refresh lockfiles; keep other dependencies unchanged.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Align OpenTelemetry package versions (avoid mixing 0.x, 1.x, 2.x).

Mixing majors across OTel core packages can cause runtime incompatibilities. Align all @opentelemetry/* core packages to a single compatible line and avoid redundant SDKs (sdk-node vs sdk-trace-node).

Example (illustrative — pick one coherent version set used by the repo):

-    "@opentelemetry/api": "^1.9.0",
-    "@opentelemetry/exporter-trace-otlp-proto": "^0.206.0",
-    "@opentelemetry/sdk-node": "^0.206.0",
-    "@opentelemetry/sdk-trace-node": "^2.1.0",
+    "@opentelemetry/api": "^1.9.0",
+    "@opentelemetry/sdk-node": "<aligned-version>",
+    "@opentelemetry/exporter-trace-otlp-proto": "<aligned-version>",
+    // Remove if using sdk-node:
+    // "@opentelemetry/sdk-trace-node": "<aligned-version>",
+    // Optional but recommended for stable keys:
+    "@opentelemetry/semantic-conventions": "<aligned-version>",

🏁 Script executed:

#!/bin/bash
set -euo pipefail
pkg=examples/react/start-otel/package.json
echo "OTel package versions in $pkg"
jq -r '
  [.dependencies,.devDependencies]|add|to_entries
  | map(select(.key|startswith("@opentelemetry/")))
  | .[] | "\(.key) = \(.value)"
' "$pkg" | sort
echo
echo "Distinct major.minor groups:"
jq -r '
  [.dependencies,.devDependencies]|add|to_entries
  | map(select(.key|startswith("@opentelemetry/")))
  | .[] | .value
' "$pkg" | sed -E 's/[^0-9]*([0-9]+)\.([0-9]+).*/\1.\2/' | sort -u

Length of output: 261

</web_search>

🏁 Script executed:

#!/bin/bash
# Check for internal workspace dependencies in this package.json
echo "=== Internal dependencies in examples/react/start-otel/package.json ==="
jq -r '.dependencies | to_entries[] | select(.value | startswith("workspace:")) | "\(.key): \(.value)"' examples/react/start-otel/package.json 2>/dev/null || echo "No workspace dependencies found"
echo
# Find all package.json files in the repo and extract OTel versions
echo "=== OpenTelemetry versions across all package.json files ==="
find . -name "package.json" -type f | while read -r pf; do
  otel_count=$(jq -r '[.dependencies,.devDependencies]|add|to_entries|map(select(.key|startswith("@opentelemetry/")))|length' "$pf" 2>/dev/null || echo "0")
  if [ "$otel_count" -gt 0 ]; then
    echo "$pf:"
    jq -r '[.dependencies,.devDependencies]|add|to_entries|map(select(.key|startswith("@opentelemetry/")))|.[]|"\(.key) = \(.value)"' "$pf" 2>/dev/null | sort
    echo
  fi
done | head -100

Length of output: 366

🌐 Web query:

OpenTelemetry compatibility matrix versions 0.206 1.9 2.1

💡 Result:

Do you mean the OpenTelemetry package compatibilities between the "experimental" 0.* series and the "stable" 1.* / 2.* series (SDK/API/semantic-conventions packages)? If so, can you confirm which language or package (Java, JS, Python, semantic-conventions, Collector, etc.) you need the matrix for?

🌐 Web query:

JavaScript Node.js OpenTelemetry sdk-node sdk-trace-node compatibility

💡 Result:

Short answer

  • @opentelemetry/sdk-node (NodeSDK) is a wrapper/kit that composes the OpenTelemetry JS SDK pieces for Node — it commonly uses @opentelemetry/sdk-trace-node for tracing functionality. Use sdk-node + sdk-trace-node together (they’re designed to interoperate). [1][2]

Compatibility guidance

  • Match major versions: keep @opentelemetry/* packages on the same major (e.g., 2.x) to avoid API/behavior mismatches. The 2.0 SDK release introduces breaking changes, so mix-and-matching 1.x and 2.x packages is not recommended. [1]
  • Node runtime and TS requirements changed in SDK 2.x: minimum Node.js is ^18.19.0 || >=20.6.0 and TypeScript >=5.0.4; check the SDK 2.x migration guide before upgrading. [1]

Practical notes

  • If you use the Node getting-started examples, NodeSDK imports ConsoleSpanExporter (or other exporters) from @opentelemetry/sdk-trace-node and registers auto-instrumentations via @opentelemetry/auto-instrumentations-node — that’s the normal composition. [2][3]
  • For custom/manual tracing you can use @opentelemetry/sdk-trace-base directly, but sdk-trace-node provides Node-specific defaults (async_hooks context manager, resource detection, instrumentations). [1][2]

If you want I can:

  • check your package.json and recommend exact versions to align (e.g., upgrade path from 1.x → 2.x), or
  • fetch the 2.x migration guide and list the breaking-change steps.

Sources
[1] OpenTelemetry blog — Announcing the OpenTelemetry JavaScript SDK 2.0 (release notes & migration).
[2] OpenTelemetry JS docs — Node.js getting started / package list (describes @opentelemetry/sdk-node and @opentelemetry/sdk-trace-node).
[3] OpenTelemetry JS repo/docs — @opentelemetry/sdk-trace-base vs sdk-trace-node (module descriptions).

Align OpenTelemetry package versions to a single major (currently mixing 0.x, 1.x, 2.x).

Matching major versions is required to avoid API/behavior mismatches, and mix-and-matching 1.x and 2.x packages is not recommended. Your package.json currently has:

  • @opentelemetry/api: ^1.9.0 (1.x)
  • @opentelemetry/exporter-trace-otlp-proto: ^0.206.0 (0.x)
  • @opentelemetry/sdk-node: ^0.206.0 (0.x)
  • @opentelemetry/sdk-trace-node: ^2.1.0 (2.x)

@opentelemetry/sdk-node and @opentelemetry/sdk-trace-node are designed to interoperate and should be used together. Align all @opentelemetry/* packages to the same major version (recommend 2.x as the latest stable).

🤖 Prompt for AI Agents 
In examples/react/start-otel/package.json around lines 11 to 23, the
OpenTelemetry dependencies use mixed major versions (0.x, 1.x, 2.x) which can
cause API/behavior mismatches; update all @opentelemetry/* packages to the same
major (recommend migrating @opentelemetry/api,
@opentelemetry/exporter-trace-otlp-proto, @opentelemetry/sdk-node, and
@opentelemetry/sdk-trace-node to matching 2.x releases), adjust their version
ranges consistently (e.g., ^2.x), run npm install to update lockfile, and run
tests/build to verify compatibility.

"devDependencies": {
"@types/node": "^22.5.4",
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3",
"@vitejs/plugin-react": "^4.6.0",
"autoprefixer": "^10.4.20",
"postcss": "^8.5.1",
"tailwindcss": "^3.4.17",
"typescript": "^5.7.2",
"vite": "^7.1.7",
"vite-tsconfig-paths": "^5.1.4"
}
}
6 changes: 6 additions & 0 deletions examples/react/start-otel/postcss.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Binary file added examples/react/start-otel/public/android-chrome-192x192.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/react/start-otel/public/android-chrome-512x512.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/react/start-otel/public/apple-touch-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/react/start-otel/public/favicon-16x16.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/react/start-otel/public/favicon-32x32.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/react/start-otel/public/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file added examples/react/start-otel/public/favicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions examples/react/start-otel/public/site.webmanifest
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"name": "",
"short_name": "",
Comment on lines +2 to +3
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Add placeholder values for PWA manifest names.

The name and short_name fields are empty strings, which may cause PWA installation prompts to display incorrectly or fail to appear. For an example project, consider adding descriptive placeholder values.

Apply this diff to add example values:

-  "name": "",
-  "short_name": "",
+  "name": "TanStack Router OTEL Example",
+  "short_name": "OTEL Example",
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"name": "",
"short_name": "",
"name": "TanStack Router OTEL Example",
"short_name": "OTEL Example",
🤖 Prompt for AI Agents 
In examples/react/start-otel/public/site.webmanifest around lines 2 to 3, the
PWA manifest's "name" and "short_name" fields are empty; update them to
meaningful placeholder values so install prompts and UI show correctly (e.g.,
set "name" to a descriptive project title and "short_name" to a shorter display
label). Ensure the values are plain strings, keep short_name under ~12
characters for display, and save the manifest.

"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
53 changes: 53 additions & 0 deletions examples/react/start-otel/src/components/DefaultCatchBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import {
ErrorComponent,
Link,
rootRouteId,
useMatch,
useRouter,
} from '@tanstack/react-router'
import type { ErrorComponentProps } from '@tanstack/react-router'

export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
const router = useRouter()
const isRoot = useMatch({
strict: false,
select: (state) => state.id === rootRouteId,
})

console.error('DefaultCatchBoundary Error:', error)

return (
<div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
<ErrorComponent error={error} />
<div className="flex gap-2 items-center flex-wrap">
<button
onClick={() => {
router.invalidate()
}}
className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
>
Try Again
</button>
{isRoot ? (
<Link
to="/"
className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
>
Home
</Link>
) : (
<Link
to="/"
className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
onClick={(e) => {
e.preventDefault()
window.history.back()
}}
>
Go Back
</Link>
)}
</div>
</div>
)
}
25 changes: 25 additions & 0 deletions examples/react/start-otel/src/components/NotFound.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { Link } from '@tanstack/react-router'

export function NotFound({ children }: { children?: any }) {
return (
<div className="space-y-2 p-2">
<div className="text-gray-600 dark:text-gray-400">
{children || <p>The page you are looking for does not exist.</p>}
</div>
<p className="flex items-center gap-2 flex-wrap">
<button
onClick={() => window.history.back()}
className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
>
Go back
</button>
<Link
to="/"
className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
>
Start Over
</Link>
</p>
</div>
)
}
6 changes: 6 additions & 0 deletions examples/react/start-otel/src/components/PostError.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { ErrorComponent } from '@tanstack/react-router'
import type { ErrorComponentProps } from '@tanstack/react-router'

export function PostErrorComponent({ error }: ErrorComponentProps) {
return <ErrorComponent error={error} />
}
6 changes: 6 additions & 0 deletions examples/react/start-otel/src/components/UserError.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { ErrorComponent } from '@tanstack/react-router'
import type { ErrorComponentProps } from '@tanstack/react-router'

export function UserErrorComponent({ error }: ErrorComponentProps) {
return <ErrorComponent error={error} />
}
16 changes: 16 additions & 0 deletions examples/react/start-otel/src/otel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { NodeSDK } from '@opentelemetry/sdk-node'
import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-node'
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto'

const sdk = new NodeSDK({
serviceName: 'tanstack-start',
spanProcessors: [
new SimpleSpanProcessor(
new OTLPTraceExporter({
url: 'http://localhost:4318/v1/traces',
}),
),
],
})

sdk.start()
Loading