pydantic · petyosi · Jul 11, 2025 · Jul 9, 2025 · Jul 9, 2025 · Jul 9, 2025
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,6 @@ wheels/
 *.svg
 
 /fastapi-example/images/
+
+node_modules/
+/distributed-frontend-example/images/
diff --git a/distributed-frontend-example/.node-version b/distributed-frontend-example/.node-version
@@ -0,0 +1 @@
+v22.17.0
diff --git a/distributed-frontend-example/.vscode/settings.json b/distributed-frontend-example/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "makefile.configureOnOpen": false
+}
diff --git a/distributed-frontend-example/Makefile b/distributed-frontend-example/Makefile
@@ -0,0 +1,12 @@
+.PHONY: install
+install:
+cd frontend && npm install
+uv sync
+
+.PHONY: frontend-dev
+frontend-dev: 
+cd frontend && npm run dev
+
+.PHONY: backend-dev
+backend-dev: 
+uv run main.py
diff --git a/distributed-frontend-example/README.md b/distributed-frontend-example/README.md
@@ -0,0 +1,54 @@
+# Distributed tracing demo
+
+This project demonstrates distributed Logfire tracing from the browser (React
+app) to the backend (FastAPI Python app using PydanticAI).
+
+# Key concepts
+
+The React application (`frontend/`) is instrumented using the
+`@pydantic/logfire-browser` NPM package. Details about the instrumentation
+specifics can be found in the `ClientInstrumentationProvider.tsx` file.
+
+For security/performance reasons, the browser instrumentation does not send traces to Logfire directly, but
+instead sends them to the backend. The backend then proxies the traces to
+Logfire - the `/client-traces` FastAPI endpoint in `main.py`. In that way, the Logfire write token is not exposed in the client-side bundle. 
+In production, you should ensure that the proxy endpoint is Auth protected and only accessible to your frontend.
+
+# Running the demo
+
+To run the demo, you need to have Python 3.10+ and Node.js 22+ installed. First,
+install the dependencies:
+
+```bash
+make install
+```
+
+Then, export the following environment variables:
+
+```bash
+export LOGFIRE_TOKEN=<your-logfire-token>
+export LOGFIRE_BASE_URL=https://logfire-us.pydantic.dev/ # e.g. https://logfire-eu.pydantic.dev/ or https://logfire-us.pydantic.dev/
+export OPENAI_API_KEY=<your-openai-api-key> # you can get one from https://platform.openai.com/account/api-keys
+```
+
+Run the backend:
+
+```bash
+make backend-dev
+```
+
+Then, in another shell, run the frontend:
+
+```bash
+make frontend-dev
+```
+
+The App will be available at (http://localhost:5173)[http://localhost:5173]. You
+can open your Logfire live view and interact with the App to see the traces in
+real-time.
+
+# Further reading
+
+- [Distributed tracing with Logfire](https://logfire.pydantic.dev/docs/how-to-guides/distributed-tracing/)
+- [Logfire Python SDK](https://github.com/pydantic/logfire)
+- [Logfire JS](https://github.com/pydantic/logfire-js)
diff --git a/distributed-frontend-example/frontend/.env b/distributed-frontend-example/frontend/.env
@@ -0,0 +1 @@
+VITE_FAST_API_BACKEND_BASE_URL=http://127.0.0.1:8000
diff --git a/distributed-frontend-example/frontend/eslint.config.js b/distributed-frontend-example/frontend/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ js.configs.recommended,
+ tseslint.configs.recommended,
+ reactHooks.configs['recommended-latest'],
+ reactRefresh.configs.vite,
+ ],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: globals.browser,
+ },
+ },
+])
diff --git a/distributed-frontend-example/frontend/index.html b/distributed-frontend-example/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Pydantic Stack Image Generator</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		VITE_FAST_API_BACKEND_BASE_URL=http://127.0.0.1:8000