fix(server): prevent 404 error in fetch adapter when endpoint is set to '/'

[maddsua]

🎯 Changes

Fixed:

Setting endpoint property to '/' in fetchRequestHandler function call will result in url path being trimmed and in a "NOT_FOUND" error in all request attempts

worker.ts:

export default {

  async fetch(request: Request): Promise<Response> {

    return fetchRequestHandler({
      endpoint: '/',
      req: request,
      router: appRouter,
      createContext,
    });
  }
};

Issue

Expected behavior: request succeeds

Actual behavior (error log):

_TRPCClientError: No "mutation"-procedure on path "reateUser"
    at _TRPCClientError.from (C:\Users\maddsua\Downloads\examples-minimal-main\client\index.js:269:16)
    at C:\Users\maddsua\Downloads\examples-minimal-main\client\index.js:677:48  
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  meta: {
    response: Response {
      [Symbol(realm)]: null,
      [Symbol(state)]: [Object],
      [Symbol(headers)]: [HeadersList]
    },
    responseJSON: [ [Object] ]
  },
  shape: {
    message: 'No "mutation"-procedure on path "reateUser"',
    code: -32004,
    data: {
      code: 'NOT_FOUND',
      httpStatus: 404,
      stack: 'TRPCError: No "mutation"-procedure on path "reateUser"\n' +       
        '    at callProcedure (file:///C:/Users/maddsua/AppData/Local/Temp/tmp-14488-OzljTyWav0KP/worker.js:372:11)\n' +
        '    at inputToProcedureCall (file:///C:/Users/maddsua/AppData/Local/Temp/tmp-14488-OzljTyWav0KP/worker.js:516:24)\n' +
        '    at file:///C:/Users/maddsua/AppData/Local/Temp/tmp-14488-OzljTyWav0KP/worker.js:628:49\n' +
        '    at Array.map (<anonymous>)\n' +
        '    at resolveHTTPResponse (file:///C:/Users/maddsua/AppData/Local/Temp/tmp-14488-OzljTyWav0KP/worker.js:628:28)',
      path: 'reateUser'
    }
  },
  data: {
    code: 'NOT_FOUND',
    httpStatus: 404,
    stack: 'TRPCError: No "mutation"-procedure on path "reateUser"\n' +
      '    at callProcedure (file:///C:/Users/maddsua/AppData/Local/Temp/tmp-14488-OzljTyWav0KP/worker.js:372:11)\n' +
      '    at inputToProcedureCall (file:///C:/Users/maddsua/AppData/Local/Temp/tmp-14488-OzljTyWav0KP/worker.js:516:24)\n' +
      '    at file:///C:/Users/maddsua/AppData/Local/Temp/tmp-14488-OzljTyWav0KP/worker.js:628:49\n' +
      '    at Array.map (<anonymous>)\n' +
      '    at resolveHTTPResponse (file:///C:/Users/maddsua/AppData/Local/Temp/tmp-14488-OzljTyWav0KP/worker.js:628:28)',
    path: 'reateUser'
  },
  [cause]: undefined
}

Got this error while trying to setup trpc on cloudflare workers. Actually it's my first interaction with trpc, so please don't judge me too much

Upd: having a trailing slash in endpoing path also causes 404 error

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
trpc-next-app-dir	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 20, 2023 11:18pm
www	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 20, 2023 11:18pm

[vercel]

@maddsua is attempting to deploy a commit to the trpc Team on Vercel.

A member of the Team first needs to authorize it.

[KATT]

Please add a regression test 🙏

[maddsua]

Please add a regression test 🙏

I have one more thing in mind to check, but at the same time I'm not sure how to add a regression test in this project

[maddsua]

9b82c5242a250d832549e9f424099a03901be67c Ensures that this change won't have any effect in case user has defined a procedure that starts with forward slash, like this:

'/getUserById': t.procedure.input(z.string()).query((opts) => {
  return users[opts.input]; // input type is string
}),

[maddsua]

It looks like it won't be possible to just add another test inside https://github.com/trpc/trpc/blob/main/packages/tests/server/adapters/fetch.test.ts, as the server there starts once and it only uses empty endpoint path

[maddsua]

9b82c5242a250d832549e9f424099a03901be67c Ensures that this change won't have any effect in case user has defined a procedure that starts with forward slash, like this:

'/getUserById': t.procedure.input(z.string()).query((opts) => {
  return users[opts.input]; // input type is string
}),

Although, I should probably revert this one, as it actually breaks things. '/proc' procedures work fine without it

[maddsua]

Sorry for too many messages, the tests in this project are a bit overwhelming for me. I've done basic testing locally, but still not sure how to do this properly
@KATT

[KATT]

I can't push to your branch, here's a patch:

0001-add-tests.patch

But I tried with that patch and I couldn't get the test to fail when I reverted your change:

0002-hmm-this-doesn-t-change-anything.patch

[KATT]

you can run the tests with

pnm vitest fetch.test

[maddsua]

I can't push to your branch, here's a patch:

0001-add-tests.patch

But I tried with that patch and I couldn't get the test to fail when I reverted your change:

0002-hmm-this-doesn-t-change-anything.patch

The test is not gonna fail unless there is a procedure with a URL-like name. Thanks for the patch, I'll try to bring it to my branch

[KATT]

Sorry for the slow response on this - could you join our Discord and @ me there and we'll push this over the line?

Had a bit too many open stale PRs and my GitHub notifications are a mess so I just forgot about this

[KATT]

I feel like this is a bit too implicit - isn't it possible to look at the url defined above? Is the problem that .pathname starts with a /?

[maddsua]

I've joined discord, no response there yet. Anyway. The problem is that without this change trpc assumes that if endpoint path is not empty it starts with forward slash and has characters after it. Which doesn't work if endpoint path is set to a single slash with no other characters after. It's a slight oversight in algorithm, as this length + 1 in fact implies that endpoint path has two slashes needed to be removed and here he have just one, so it just "eats" first character of procedure name instead

[maddsua]

Extended this pr with a fix for trailing slash: #5067.
That's why I have a ton of regexes in my code 😄