Skip to content

[Bug?]: Status code mismatch and always return 200 when using createMiddleware #1643

Description

@karlrobeck

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

Hi, I'm creating a middleware that logs the request and format it to corresponding status range. (example 400 - 499). the <HttpStatusCode code={404} /> works fine and it resolves to the correct status code.

image

however, in the middleware part. it always return 200

image

Expected behavior 🤔

it should reflect 404 for both middleware and to the final response. i assume that the problem lies to the middleware itself. createMiddleware has two parameters, onRequest and onBeforeResponse. it doesn't catch the final response before sending it the user. i assume this is the normal flow of the request cycle. it doesn't catch any status code that the developer put before sending the final request to the client. correct me if i'm wrong.

flowchart LR
    user --> onRequest --> server --> onBeforeResponse  --> solid-start --> user
Loading

i found this issue on vinxi that has somewhat the same problem as mine nksaraf/vinxi#182 but haven't fixed yet for months now.

Steps to reproduce 🕹

Steps:

  1. create solid-start project
  2. create a middleware.ts in ./src directory and place the path in app.config.ts
  3. create a middleware for logging
import { createMiddleware } from "@solidjs/start/middleware";
import type { FetchEvent } from "@solidjs/start/server";

async function loggingMiddleware(event: FetchEvent) {
  const status = event.response.status || 0;

  if (status >= 200 && status <= 399) {
    console.log(
      `${event.clientAddress} - ${event.request.method} - ${event.request.url} Status ${event.response.status}`
    );
  }

  if (status >= 400 && status <= 499) {
    console.warn(
      `${event.clientAddress} - ${event.request.method} - ${event.request.url} Status ${event.response.status}`
    );
  }

  return;
}

export default createMiddleware({
  // uncomment it to see
  // onRequest: [loggingMiddleware],
  onBeforeResponse: [loggingMiddleware],
});
  1. add <HttpStatusCode code={404} /> to *404.ts
import { HttpStatusCode } from "@solidjs/start";
const NotFoundPage = () => {
  return (
    <>
      <HttpStatusCode code={404} />
      <div>Page not found</div>
    </>
  );
};

export default NotFoundPage;
  1. visit the 404 route. and check both terminal console and browser developer console for status code.

Context 🔦

No response

Your environment 🌎

System:
   platform: linux 
   Distro: Ubuntu 24.04.1 LTS
   Arch: x86
Binaries:
   Node: 22.6.0
   Bun: 1.1.26
npmPackage:
   solid-start: 1.0.8
   vinxy: 0.4.3

Metadata

Metadata

Assignees

No one assigned

    Labels

    1.x2.xtargeting SolidStart 2.x versionsbugSomething isn't workingvinxirelated to vinxi

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions