Server side analytics about examples

[GuiBibeau]

👋 I'll take this over and add to @leerob's example making a more complete on in this repo! Should get released within 5-10 days.

[rbrcsk]

I'm seconding this! I see this mentioned as a possible use-case, but honestly, I fail to see how it could work, even after looking at the implementation inside Next.js.

[nyg]

@rbrcsk I also came here looking for an example, maybe I can give an idea of how it would or could work.

The middleware allows you to "intercept" each request and perform some logic. In our case, this logic could store in a database information about the request (e.g. path, user agent, time, IP address), this way you would have statistics about each request made to your server.

The logic could also just call the API of an external web analytics service (e.g. GoatCounter) so you don't have to handle the stats yourself.

I guess it would be better to make this logic asynchronous so as not to impact request time.

[rbrcsk]

Thanks @nyg! I've managed to go that far, my problem is, I'd need to get access to the response that is sent, and that seems like a no-go unfortunately.

[nyg]

@rbrcsk Indeed, I don't think you can get the response just before it is sent back to the browser. Can I ask what info do you need from the response?

[fredericrous]

I tried to use firebase to do serverside analytics but I didn't succeed.
Here's my code: (of course we can't use firebase-admin because it depends on fs module)

import type { NextFetchEvent, NextRequest } from 'next/server';
import { NextResponse } from 'next/server';
import { ref, runTransaction } from 'firebase/database';
import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';
const app = initializeApp(/* my firebaseConfig */);
const db = getDatabase(app);

const logView = async (slug) => {
  const { snapshot } = await runTransaction(ref(db, 'views/' + slug), (currentViews) =>
    currentViews === null ? 1 : currentViews + 1
  );
  return snapshot.val();
};

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  const { pathname } = req.nextUrl;
  if (!/^\/static/.test(pathname)) {
    const noSlashPathName = pathname.replace(/^\//, '').replace(/\//g, '-');
    logView(noSlashPathName).catch(console.log);
  }
  return NextResponse.next();
}

if I await the function logView, the request hangs forever

there is no error logged in the console

[leerob]

I have a WIP version going here for Next.js leerob/leerob.io#431

[GuiBibeau]

Closing this as we merged the example:

Code: https://github.com/vercel/examples/tree/main/edge-functions/analytics
Deployed explainer: https://edge-functions-analytics.vercel.app/