chrome devtools does not work properly while using server actions in nextjs 14
00:08 09 Jul 2024

I was inspecting the network request in devTools which goes out for the server action in nextjs. In the response section it randomly sometimes shows the response correctly and sometimes it shows Failed to load response data: No data found for resource with given identifier. I know about the issue with the devTools that it shows this error message after you navigated to some different website, but it happens particularly with server actions in nextjs even when I'm on the same website.

I think its a issue particularly with server actions in nextjs. Can someone elaborate on what exactly is the issue with server actions.

PS: All the console-logs work as expected in every request and I get the response working completely fine in firefox devTools

This is the app/test_1/page.tsx code

"use client"
import { sayHello } from '../actions/testing';

function test_1() {
  async function handleClick() {
    console.log('Button clicked');
    try {
        const response = await sayHello();
        console.log('Response from server action:', response); // Should log { message: 'Hello, world!' }
    } catch (error) {
        console.error('Error calling server action:', error);
    }
}

  return (
      
); } export default test_1

This is the code for sayHello function in app/actions/testing.ts

'use server';

export async function sayHello() {
    console.log('Server action called');
    const response = { message: 'Hello, world!' };
    console.log('Server action response:', response);
    return response;
}
request google-chrome-devtools response nextjs14 server-action