Next.JS Error in withClerkMiddleware.js

matteobad commented 1 year ago

[x] Review the documentation: https://docs.clerk.dev/
[x] Search for existing issues: https://github.com/clerkinc/javascript/issues
[x] Go through package changelog files.
[x] Provide the Frontend API key from your application dashboard.

Package + Version

[ ] @clerk/clerk-js
[ ] @clerk/clerk-react
[x] @clerk/nextjs
[ ] @clerk/remix
[ ] @clerk/types
[ ] @clerk/themes
[ ] @clerk/localizations
[ ] @clerk/clerk-expo
[ ] @clerk/backend
[ ] @clerk/clerk-sdk-node
[ ] @clerk/shared
[ ] @clerk/fastify
[ ] gatsby-plugin-clerk
[ ] build/tooling/chore
[ ] other:

Version:

4.10.2

Browser/OS

If applicable e.g. Chrome latest

Description

Hello, I'm running a turborepo based on https://github.com/clerkinc/t3-turbo-and-clerk/, a T3 Stack with Clerk instead on Next-Auth. Everything works fine except for one error that gets triggered apparently randomly in the middleware.

I'm using Next.JS version 13.1.6 with the same middleware.ts of the example repo and I get the following error:

@badget/web:dev: error - ../../node_modules/@clerk/nextjs/dist/server/withClerkMiddleware.js (11:0) @ decorateResponseWithObservabilityHeaders
@badget/web:dev: error - Cannot convert argument to a ByteString because the character atindex 126 has a value of 8217 which is greater than 255.
@badget/web:dev: null

If I understand correctly it seems that the middleware is trying to set some additional headers in the response but failing to do so, because of conversion. As I said my middleware is just using the withClerkMiddleware without any custom logic. How can I fix it or debug it further to provide more info?

Thank you in advance and keep up the great work!

dimkl commented 1 year ago

Hello @matteobad , thank you for reporting. Let me take a look and get back to you.

dimkl commented 1 year ago

This seems to be the same case as https://github.com/vercel/next.js/issues/44780#issuecomment-1380030158 Could you provide the request body and headers that cause this issue to investigate it further? Until then, i will try to pinpoint it if there is an invalid character in our codebase.

matteobad commented 1 year ago

Right now the error is present on every page. I'm using tRPC to call my backend but this doesn't seem to be the problem because I get the same error if I try to create a new Page with nothing in it like this one:

export default function TestPage {
  return (
    <>
      <Head>
        <title>Create T3 App</title>
        <meta name="description" content="Generated by create-t3-app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      Budget
    </>
  );
};

And this is the content of my middleware.ts:

import { withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";
import type { NextRequest } from 'next/server'

export default withClerkMiddleware((req: NextRequest) => {
  return NextResponse.next();
});

// Stop Middleware running on static files
export const config = { matcher:  '/(.*?trpc.*?|(?!static|.*\\..*|_next|favicon.ico).*)',};

dimkl commented 1 year ago

We are setting some headers when it's unclear if the user is authenticated to access the server for debug purposes. The issue is related to the encoding of the header value which can only contain ISO-8859-1 (latin1) characters. Either the generated error messages or the values used from the JWT or request contain a non-ISO-8859-1 character. Thank you for the follow up. Let me try a few more things and add a guard to avoid invalid characters and i will come back to you.

matteobad commented 1 year ago

Hi @dimkl, I just saw your PR which should solve my problem (I'll try later). I also tried to debug the middleware to give more information on the above error:

The error is related to the requestState.message that has values like: 'JWT is expired. Expiry date: Wed Feb 22 2023 15:25:56 GMT+0100 (Ora standard dell’Europa centrale), Current date: Wed Feb 22 2023 15:26:35 GMT+0100 (Ora standard dell’Europa centrale). (reason=token-expired, token-carrier=cookie)'

The error seems to be at index 116 where the: ’ char is at. Maybe its because of the IT locale? Since that piece of string is in Italian with that apos

dimkl commented 1 year ago

Fixed is deployed in the latest release!

clerk / javascript