Skip to content

Commit 5d389c7

Browse files
petyosipetyosi
authored
Demo for distributed tracing between react frontend and FastAPI (#4)
* Demo for distributed tracing between react frontend and FastAPI * Add suggested changes * Remove redundant OPTIONS method * Address review comments * Clarify why maxExportBatchSize
1 parent 7edfe7b commit 5d389c7

File tree

18 files changed

+4603
-0
lines changed

18 files changed

+4603
-0
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,6 @@ wheels/
1111
*.svg
1212

1313
/fastapi-example/images/
14+
15+
node_modules/
16+
/distributed-frontend-example/images/

‎distributed-frontend-example/.node-version‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v22.17.0

‎distributed-frontend-example/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"makefile.configureOnOpen": false
3+
}

‎distributed-frontend-example/Makefile‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.PHONY: install
2+
install:
3+
cd frontend && npm install
4+
uv sync
5+
6+
.PHONY: frontend-dev
7+
frontend-dev:
8+
cd frontend && npm run dev
9+
10+
.PHONY: backend-dev
11+
backend-dev:
12+
uv run main.py

‎distributed-frontend-example/README.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# Distributed tracing demo
2+
3+
This project demonstrates distributed Logfire tracing from the browser (React
4+
app) to the backend (FastAPI Python app using PydanticAI).
5+
6+
# Key concepts
7+
8+
The React application (`frontend/`) is instrumented using the
9+
`@pydantic/logfire-browser` NPM package. Details about the instrumentation
10+
specifics can be found in the `ClientInstrumentationProvider.tsx` file.
11+
12+
For security/performance reasons, the browser instrumentation does not send traces to Logfire directly, but
13+
instead sends them to the backend. The backend then proxies the traces to
14+
Logfire - the `/client-traces` FastAPI endpoint in `main.py`. In that way, the Logfire write token is not exposed in the client-side bundle.
15+
In production, you should ensure that the proxy endpoint is Auth protected and only accessible to your frontend.
16+
17+
# Running the demo
18+
19+
To run the demo, you need to have Python 3.10+ and Node.js 22+ installed. First,
20+
install the dependencies:
21+
22+
```bash
23+
make install
24+
```
25+
26+
Then, export the following environment variables:
27+
28+
```bash
29+
export LOGFIRE_TOKEN=<your-logfire-token>
30+
export LOGFIRE_BASE_URL=https://logfire-us.pydantic.dev/ # e.g. https://logfire-eu.pydantic.dev/ or https://logfire-us.pydantic.dev/
31+
export OPENAI_API_KEY=<your-openai-api-key> # you can get one from https://platform.openai.com/account/api-keys
32+
```
33+
34+
Run the backend:
35+
36+
```bash
37+
make backend-dev
38+
```
39+
40+
Then, in another shell, run the frontend:
41+
42+
```bash
43+
make frontend-dev
44+
```
45+
46+
The App will be available at (http://localhost:5173)[http://localhost:5173]. You
47+
can open your Logfire live view and interact with the App to see the traces in
48+
real-time.
49+
50+
# Further reading
51+
52+
- [Distributed tracing with Logfire](https://logfire.pydantic.dev/docs/how-to-guides/distributed-tracing/)
53+
- [Logfire Python SDK](https://github.com/pydantic/logfire)
54+
- [Logfire JS](https://github.com/pydantic/logfire-js)

‎distributed-frontend-example/frontend/.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VITE_FAST_API_BACKEND_BASE_URL=http://127.0.0.1:8000

‎distributed-frontend-example/frontend/eslint.config.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
import { globalIgnores } from 'eslint/config'
7+
8+
export default tseslint.config([
9+
globalIgnores(['dist']),
10+
{
11+
files: ['**/*.{ts,tsx}'],
12+
extends: [
13+
js.configs.recommended,
14+
tseslint.configs.recommended,
15+
reactHooks.configs['recommended-latest'],
16+
reactRefresh.configs.vite,
17+
],
18+
languageOptions: {
19+
ecmaVersion: 2020,
20+
globals: globals.browser,
21+
},
22+
},
23+
])

‎distributed-frontend-example/frontend/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Pydantic Stack Image Generator</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)