Skip to content

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

Open
@jansedlon

Description

@jansedlon

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions