NGINX access logs from single page application

I have a frontend angular app of single page application with the following nginx configuration:

events{}
http {
    include /etc/nginx/mime.types;

    default_type  application/octet-stream;

    access_log  /var/log/nginx/access.log;

    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;
        location / {
            try_files $uri $uri/ $uri.html /index.html;
        }
    }
}

The problem is that the access log only writes logs when the whole page is refreshed and not in each user action (ie click different elements of the page).

I want to be able to log every user action, not only when the page is opened or refreshed. Any suggestion on how to achieve that?

nginx is a server-side piece of the puzzle. With a single page application, the user hits your server (ideally) at most once to download the bundle, and then never again, until the application makes requests of its own accord, for instance to load some data or submit a form.

You say you want to log "every user action". Even on static HTML sites, nginx access logs are not the correct tool for that job. User actions happen in the user's browser, not your server software. Logging as much as you can from the server side, you can still only guess at what the user is doing. Did they click on the link to go back home, the icon at the top of the page, a bookmark they have saved, open a new tab where their homepage is set to your website, etc.? You can never know.

The correct solution to your problem of wanting to log user interaction with an Angular SPA, is to log user interaction in the Angular SPA.

No affiliation or experience, but I hear Sentry is good. You can also write something yourself without too much trouble depending on your level of experience. In React applications, I generally dump the redux action history to a JSON blob to attach to crash reports and that works perfectly well as a low-tech solution.

nginx access logging is great and has its place, but its place is figuring out which endpoints are being hit at which times and by who, keeping tabs on active attacks, abusive request flooding, and so forth.

You can also try Zipy, an alternative to Sentry. Zipy is an error-tracking tool that helps developers monitor and track errors in their applications. It provides real-time alerts for errors, as well as detailed reports and analytics to help developers diagnose and fix issues quickly.