failed to load resource: server responded with a 403

[samuelstroschein]

Problem

A telefunc function throws a 403 error that should not be thrown. The function of question can be found here https://github.com/inlang/inlang/blob/main/source-code/website/src/services/auth/logic.telefunc.ts

To reproduce

1. Open https://inlang.com/editor/github.com/inlang/example
2. Login with GitHub
3. Error occurs (yet, the user is logged in afterward. The telefunc function must return the correct value somehow)

Investigation

• The problem does not occur in development, only in production. Over two hours of debugging entailed that the telefunc function seems to behave as expected on the server (no crashes) but throws the 403 on the client.
• Try/catch clauses make no difference.
• Telefunc aborts the call for unknown reasons.

Additional information

telefunc-version: "^0.1.41"

Error on oauth callback

Error on SSR the site https://inlang.com/services/auth/oauth-callback

The telefunc call is aborted for unknown reasons.

[brillout]

What's the stack trace of the object that has abort: true?

[samuelstroschein]

@brillout

• The stack trace is empty on client-side navigation WHEN a session exists that is used with getContext, see screenshot 1.

• The stack trace shows fetch as an error that occurred due to sentry's fetch wrapping ... interesting. UPDATE: It is not sentry. I removed sentry and deployed -> the error persists.

• On server-side rendering, the stack trace throws at fetchInterceptor, see screenshot 2.

---

This got to be one of the weirdest bugs I ever encountered. Adding a console.log() solves the bug. See https://github.com/inlang/inlang/commit/0121a2da19db8195f94f5b7815d5ca1ceca18059.

[samuelstroschein]

I found the root cause(s):

1. SolidJS passes arguments in createResource

SolidJS's createResource function is documented to be used as follows:

const [data, { mutate, refetch }] = createResource(fetcher);

The result of using createResource without wrapping the fetcher function in a wrapper like () => fetcher() leads to arguments being passed down to the fetcher function which is somewhat hidden in the documentation.

2. Telefunc aborts function calls with bad arguments with status code 403 instead of 400

Telefunc generates shield functions for arguments automatically. But, passing bad arguments to an API call is not a 403 (forbidden) but a 400 (bad request) status code. The 403 status code lead to an hour-long wandering path that the problem was related to auth.

3. The telefunc function (seemed to) work(ed) regardless because the function was executed twice

After mounting the DOM, the telefunc function was executed again to check if a user is logged in. That led to the phenomenon of "the telefunc function returns the value". The telefunc function responsible for rendering the error throwed as expected.

[brillout]

Thanks for detailed report.

[pencilcheck]

I am also getting the error of 403 when the argument is bad using react. I agree it should be 400 instead of 403, and ideally the response should say that argument is bad. I wonder if there is a proper way to see this error? because it is confusing when I received it.