Skip to content
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.

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

When browser requests source maps, express slows down extremely in production for all Remix based apps #9154

Open
jansedlon opened this issue Mar 28, 2024 · 0 comments
Labels
adapter:express bug:unverified feat:dx Issues related to the developer experience

Comments

@jansedlon
Copy link

jansedlon commented Mar 28, 2024

Reproduction

  1. Go to for example daffy.org (it happened in my app as well, both are remix based)
  2. Try refreshing the page a few times to see the average request time
  3. Open up devtools on Chrome, enable javascript source maps in devtools settings
  4. Try refreshing the page again

System Info

System:
    OS: Linux 5.15 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (16) x64 AMD EPYC 7R13 Processor
    Memory: 42.70 GB / 61.44 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 20.12.0 - ~/project/nodes/node-20.12.0/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.5.0 - ~/project/nodes/node-20.12.0/bin/npm
    pnpm: 8.15.5 - /usr/bin/pnpm
  npmPackages:
    @remix-run/dev: 2.8.1 => 2.8.1 
    @remix-run/express: 2.8.1 => 2.8.1 
    @remix-run/node: 2.8.1 => 2.8.1 
    @remix-run/react: 2.8.1 => 2.8.1 
    @remix-run/router: ^1.15.3 => 1.15.3 
    @remix-run/serve: 2.8.1 => 2.8.1 
    @remix-run/server-runtime: 2.8.1 => 2.8.1 
    @remix-run/testing: 2.8.1 => 2.8.1 
    vite: ^5.2.2 => 5.2.2

Used Package Manager

npm

Expected Behavior

It should load about the same time

Actual Behavior

It actually takes several seconds to load the page even though the source maps don't exist on the server. When I looked at my logs, fetching the source maps took more than 500ms which is way longer than expected for not found files.

To fix this I had to use this middleware

app.use((req, res, next) => {
  if (MODE === "production" && req.path.endsWith(".js.map")) {
    return res.status(404).send("Not found");
  }

  next();
});

While debugging, i was inspecting which middleware (if any) did this. Found out that it's actually the createRequestHandler

app.all(
  "*",
  createRequestHandler({
    mode: MODE,
    getLoadContext: (_, res) => ({
      cspNonce: res.locals.cspNonce,
      serverBuild: getBuild(),
    }),
    // @sentry/remix needs to be updated to handle the function signature
    build: MODE === "production" ? await getBuild() : getBuild,
  }),
);

Not sure if this is an issue in remix or not

@brophdawg11 brophdawg11 added feat:dx Issues related to the developer experience adapter:express labels Mar 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
adapter:express bug:unverified feat:dx Issues related to the developer experience
Projects
None yet
Development

No branches or pull requests

2 participants