Hydration mismatch in production on browserbase/gemini-browser (task finishes without launching browser)

# Hydration mismatch in production on **browserbase/gemini-browser** (task finishes without launching browser)

> **Summary**
>
> When running the project in production (VPS with SSL, Nginx reverse proxy), the UI shows "starting gemini" and then "task complete", but **no browser session is launched** and the automation **does not execute**. The console displays a **React/Next.js hydration mismatch** error.

---

## Repository / Version

* Repository: [https://github.com/browserbase/gemini-browser](https://github.com/browserbase/gemini-browser)
* Branch: `main`
* Version/commit: *(please confirm – I used the latest commit as of Oct 8, 2025)*

## Environment

* Deploy: Linux VPS with SSL (Let's Encrypt) and **Nginx** as **reverse proxy**
* Node.js: **v20.x** *(LTS; I can provide the exact subversion if needed)*
* Package manager: `pnpm`
* Runtime: **Next.js (App Router)** in production mode (`next build` + `next start`)
* Test browsers: Chrome 141, Firefox 131

## Relevant environment variables

I followed the `README` and set, among others:

```env
# Optional: Site URL
NEXT_PUBLIC_SITE_URL=http://localhost:3000
```

> **Note:** In production I'm accessing via a public HTTPS domain behind Nginx.

Others (examples):

```env
BROWSERBASE_API_KEY=***
GEMINI_API_KEY=***
NODE_ENV=production
```

## Steps to reproduce

1. Clone the repository and install deps (`pnpm i`).
2. Build for production `pnpm build` and start `pnpm start` (or `next build`/`next start`).
3. Publish behind **Nginx** with **SSL** (proxy to `localhost:3000`).
4. Open the site and run a prompt in the input field (e.g., *"What's the price of NVIDIA stock?"* or a navigation instruction).
5. The UI shows **“starting gemini”** and shortly after **“task complete”**.
6. No remote browser is launched, and the automation **does not occur**.

## Expected behavior

* After submitting the prompt, a **browser session** should be created/launched and the task should **run** to completion with corresponding logs/result.

## Actual behavior

* The UI signals start and immediate completion (**without opening a browser**).
* A **hydration mismatch** error appears in the console (and a red popup in the UI).

## Error/stack (excerpt)

<details>
<summary>View message</summary>

```
Error: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up.
...
- Possible causes listed by React (SSR/client branch, Date.now/Math.random, locale, external data without snapshot, invalid HTML nesting, browser extension changing DOM before React loads).
...
<html lang="en"
-  pwa-launched="true"
-  pwa-extension-id="npnbdojkgkbcdfdjlfdmplppdphlhhcf"
-  pwa-extension-url-root="chrome-extension://npnbdojkgkbcdfdjlfdmplppdphlhhcf/"
>
...
<form ...
-  data-np-autofill-form-type="other"
-  data-np-checked="1"
-  data-np-watching="1"
>
<input ...
-  data-np-intersection-state="visible"
-  pwa2-uuid="EDITOR/input-6CE-721-69BF0-4B2"
-  pwa-fake-editor=""
>
```

</details>

> **Note:** These attributes with `pwa-` and `data-np-` prefixes **do not** exist in the SSR HTML and appear to be **injected on the client** (likely by a browser extension). However, even in incognito/with extensions disabled, the main symptom ("task complete" without launching a browser) still occurs in production.

## Proxy configuration (summary)

*(I can share the full `server` block if helpful; sketch below)*

```nginx
server {
  listen 443 ssl http2;
  server_name example.mydomain.com;

  # SSL ...

  location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
  }
}
```

## What I have already tried

* ✅ Disable extensions and test in an incognito window.
* ✅ Clear browser cache and Next cache (`.next/`).
* ✅ Verify production environment variables.
* ✅ Ensure `X-Forwarded-Proto`/`Host` headers are set in Nginx.
* ✅ Test `NEXT_PUBLIC_SITE_URL` with the public `https://...` domain instead of `http://localhost:3000`.
* ✅ Inspect server and network logs in DevTools (no obvious failing request at the time “task complete” appears).

## Additional context

* In local development (`pnpm dev`) I can render the UI. The problem appears **after deployment** with Nginx+SSL.
* The production domain is public and reachable (I can DM if needed). The hydration error shows attributes injected by extensions, but the primary symptom ("task complete" without launching a browser) also happens without extensions.

## What I can provide

* Full Next server and Nginx logs
* Screenshots and network HAR
* Commit hash and sanitized `env`

---

### Diagnostic suggestions (if helpful)

* Force `NEXT_PUBLIC_SITE_URL` to the **public HTTPS** URL and document this in the `README` for production.
* Check whether `Date.now()`/`Math.random()`/`Intl.DateTimeFormat` are used during SSR without serializing a snapshot.
* Validate whether the event that should start the browser session is failing silently, and expose more explicit error/logging in the UI.
* Add environment checks for reverse proxy scenarios (e.g., trust `X-Forwarded-Proto`).

Thanks for the project! I can test a patch/experimental branch if you point me to one. 🙏


Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Hydration mismatch in production on browserbase/gemini-browser (task finishes without launching browser) #24

Hydration mismatch in production on browserbase/gemini-browser (task finishes without launching browser)

Repository / Version

Environment

Relevant environment variables

Steps to reproduce

Expected behavior

Actual behavior

Error/stack (excerpt)

Proxy configuration (summary)

What I have already tried

Additional context

What I can provide

Diagnostic suggestions (if helpful)

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Uh oh!

Hydration mismatch in production on browserbase/gemini-browser (task finishes without launching browser) #24

Description

Hydration mismatch in production on browserbase/gemini-browser (task finishes without launching browser)

Repository / Version

Environment

Relevant environment variables

Steps to reproduce

Expected behavior

Actual behavior

Error/stack (excerpt)

Proxy configuration (summary)

What I have already tried

Additional context

What I can provide

Diagnostic suggestions (if helpful)

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions