Skip to content

fix(nitro): check prettyResponse.body type before error overlay #33977

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

Jump to bottom
Merged
danielroe merged 1 commit into from
Dec 27, 2025
Merged

fix(nitro): check prettyResponse.body type before error overlay #33977

danielroe merged 1 commit into from
Dec 27, 2025

Conversation

@YoSoySergio
Copy link
Contributor

@YoSoySergio YoSoySergio commented Dec 27, 2025 •
edited
Loading

🔗 Linked issue

Resolves #33748

📋 Problem Statement

Users are seeing this error in dev mode, commonly triggered by service worker requests (/sw.js, /dev-sw.js):

ERROR  html.replace is not a function

    at generateErrorOverlayHTML (.nuxt/dev/index.mjs:1961:26)
    at errorhandler (.nuxt/dev/index.mjs:2024:53)

🔍 Root Cause

In Nitro's dev error handler, the logic for determining JSON vs HTML response is:

const useJSON = opts?.json || !getRequestHeader(event, "accept")?.includes("text/html");

When defaultHandler(error, event, { json: false }) is called, opts.json is falsy so it still checks the Accept header. Requests like /sw.js don't include Accept: text/html, so useJSON ends up true and returns an object instead of HTML string.

This causes generateErrorOverlayHTML to fail when calling .replace() on a non-string.

✅ Solution

Add a type check before passing prettyResponse.body to generateErrorOverlayHTML:

if (typeof prettyResponse.body === 'string') {
  return send(event, html.replace('</body>', `${generateErrorOverlayHTML(prettyResponse.body, ...)}...`))
}

Falls back to regular error page without overlay when body is not a string.

@bolt-new-by-stackblitz
Copy link

bolt-new-by-stackblitz bot commented Dec 27, 2025

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@danielroe
Copy link
Member

danielroe commented Dec 27, 2025

this has already been solved. the issue was not prettyResponse not being a string - the issue was html not being one which is why we added a check for it.

@coderabbitai
Copy link

coderabbitai bot commented Dec 27, 2025 •
edited
Loading

Walkthrough

A type guard was introduced in the error handler for the development error overlay path to validate that prettyResponse.body is a string before processing it. Previously, the code assumed prettyResponse.body was always a string and attempted to call string methods directly. The updated logic now only generates and sends the overlay HTML if prettyResponse.body is confirmed to be a string; otherwise, it falls back to the original HTML response without the overlay.

Possibly related PRs

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)
Check name Status Explanation
Linked Issues check ✅ Passed The code change directly addresses the linked issue #33748 by adding a type guard to prevent generateErrorOverlayHTML from receiving non-string input.
Out of Scope Changes check ✅ Passed The changes are narrowly scoped to the error handling module and directly address the type checking requirement specified in the linked issue.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check ✅ Passed The title accurately describes the main change: adding a type check for prettyResponse.body before using it in error overlay generation, which directly addresses the PR's core objective.
Description check ✅ Passed The pull request description clearly relates to the changeset by explaining the error, root cause, and solution implemented in the error handler file.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Dec 27, 2025

Open in StackBlitz

@nuxt/kit

npm i https://pkg.pr.new/@nuxt/kit@33977

@nuxt/nitro-server

npm i https://pkg.pr.new/@nuxt/nitro-server@33977

nuxt

npm i https://pkg.pr.new/nuxt@33977

@nuxt/rspack-builder

npm i https://pkg.pr.new/@nuxt/rspack-builder@33977

@nuxt/schema

npm i https://pkg.pr.new/@nuxt/schema@33977

@nuxt/vite-builder

npm i https://pkg.pr.new/@nuxt/vite-builder@33977

@nuxt/webpack-builder

npm i https://pkg.pr.new/@nuxt/webpack-builder@33977

commit: 0f16815

@YoSoySergio YoSoySergio mentioned this pull request Dec 27, 2025
Closed
@codspeed-hq
Copy link

codspeed-hq bot commented Dec 27, 2025

CodSpeed Performance Report

Merging #33977 will not alter performance

Comparing YoSoySergio:fix/error-overlay-html-type-check (0f16815) with main (2f04ec3)

Summary

✅ 10 untouched

@YoSoySergio YoSoySergio changed the title fix(nitro-server): check prettyResponse.body type before error overlay fix(nitro): check prettyResponse.body type before error overlay Dec 27, 2025
danielroe
danielroe approved these changes Dec 27, 2025
View reviewed changes
Copy link
Member

@danielroe danielroe left a comment

Choose a reason for hiding this comment

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

thank you!

@YoSoySergio
Copy link
Contributor Author

YoSoySergio commented Dec 27, 2025

thank you!

@danielroe danielroe merged commit 3293dde into nuxt:main Dec 27, 2025
57 of 60 checks passed
@github-actions github-actions bot mentioned this pull request Dec 25, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@danielroe danielroe danielroe approved these changes

Assignees

No one assigned

Labels

4.x bug

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

html.replace is not a function

2 participants

@YoSoySergio @danielroe