NextJS app folder api endpoint returns error 500, with no visible error

Question

So I'm trying to create a proxy endpoint to obfuscate the real backend. My frontend is NextJS project and backend is Strapi app. And I'm trying to set up user registration. I have a /app/api/auth/register/route.js which will take the incoming request from the form and then make a request with the same data, modify it a tiny bit and make an actual registering request against the Strapi auth endpoint.

Everything seems to work just fine: the NextJS endpoint receives the request, the data is there, the data is sent to Strapi, the response comes back from Strapi, and then everything just silently ends... The browser gets 500 error responses from NextJs, but no errors are logged anywhere.

Mostly my question is - is this how you're supposed to handle incoming data with /app folder (req.json().then((data) =>)? How can I see the actual error? And how can I make it work?

// /app/api/auth/register/route.js

import { NextResponse } from 'next/server';

const POST = async function (req) {
    return req.json().then((data) => {
        fetch(`${process.env.STRAPI_URL}/api/auth/local/register`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                email: data.email,
                password: data.password,
                // username: data.email, // commented out to trigger validation error
            }),
        })
            .then((response) => {
                console.log('The data', data);
                response.json().then((respData) => {
                    console.log(respData);
                    if (response.ok) {
                        console.log('The success');
                        return NextResponse.json({ message: 'Success' });
                    } else {
                        console.log('The error');
                        return NextResponse.json({ error: 'something went wrong' }, { status: response.status });
                    }
                });
            })
            .catch((error) => {
                console.log('Something went terribly wrong');
                return NextResponse.json({ error: 'something went wrong' }, { status: 500 });
            });
    });
};

export { POST };

// console logs:
strapi_commerce-nextjs-1  | The data { email: '[email protected]', password: 'doe' }
strapi_commerce-nextjs-1  | {
strapi_commerce-nextjs-1  |   data: null,
strapi_commerce-nextjs-1  |   error: {
strapi_commerce-nextjs-1  |     status: 400,
strapi_commerce-nextjs-1  |     name: 'ValidationError',
strapi_commerce-nextjs-1  |     message: 'username is a required field',
strapi_commerce-nextjs-1  |     details: { errors: [Array] }
strapi_commerce-nextjs-1  |   }
strapi_commerce-nextjs-1  | }
strapi_commerce-nextjs-1  | The error

My NextJs version is 13.4.1

Answer 1

Credit goes to https://www.reddit.com/user/Bohjio/ for the answer. And the answer was to make sure all promises are returned from the view. so return fetch(... and return response.json().then(...