Dealing with SPA

[paulushcgcj]

Description

Currently, I'm trying to add this library to my express server that is serving some static content pages generated by VueJS with router. When I access any other URL on express it works just fine, but it is unable to handle those static pages generated by VueJS.

Expected Behaviour

The middleware should be able to identify when express is forwarding requests to this static content and intercept the url parameters generated by VueRouter and generate metrics from it.

Current Behaviour

When accessing urls from this static VueJS file is being handled as / only.

Caveats

I noticed that the library is able to identify the requests when you force a request to browser, like hitting CTRL + R or F5, but if you try to navigate using the VueRouter links, even if the URL itself updates, it doesn't identify it.

Sample Code.

Bellow is my example code that I'm using. I'm doing some normalizePath to remove individual calls to static content files such as images, css and bundled JS files. Also, I used the history property on my vue router to remove that /#/ from the url, as I thought it was due to that, but no change at all.

var express = require('express');
var history = require('connect-history-api-fallback');
const promBundle = require("express-prom-bundle");

var app = express();

const metricsMiddleware = promBundle({
    includeMethod: true,
    includeStatusCode: true,
    includePath: true,
    includeUp: false
    ,
    normalizePath:
        [   
            ['^/(js|css|img|favicon.ico)', '/static'],
            ['^/static/.*', '/static'],
            ['^/#.*', '/edit1']
        ]
});

app.use(metricsMiddleware);

const staticFileMiddleware = express.static('dist');

app.use(staticFileMiddleware);
app.use(history({ index: '/dist/index.html', verbose: true}));
app.use(staticFileMiddleware);

app.listen(3000, function () {
    console.log('Example app listening on port 3000!');
});

[disjunction]

Hi @paulushcgcj I think in the scenario you describe the browser doesn't send any request at all, instead the it stays on the same page and handles everything on the client side. There is no way the server can catch any of this activity.

If I'm wrong, then please provide the exact chain of URLs starting from the first one that is registered and onward to the ones that are missing.

[paulushcgcj]

Hi @disjunction , thank you for your quick answer. I noticed this behavior, and probably I won't be able to do what I want (instrument my VueJS app on my express app).

I will close this thread as it seems to not be possible to achieve what I wanted to do this way.