Are there means of debugging/logging the output of the static `prerender` function of the Router?

Edgio Q&A
1

For prerendering a list of hardcoded paths, this is not an issue, but when you get into more complicated logic such as async API calls or reading from the file system to determine which paths to prerender, it can be a lot of trial and error if things aren’t working. There’s not much feedback to be obtained as no console.log output is displayed in the build log.

Are there plans to improve upon that? The best I have found is to throw an exception with the information you wish to debug.

import { existsSync, readFileSync } from 'fs'
import { join } from 'path'
import { getCategories } from '../lib/cms'

// Read the Next.js build ID from '.next/BUILD_ID
const buildIdPath = join(process.cwd(), '.next', 'BUILD_ID')

export default async function getPrerenderRequests() {
  const { categories } = await getCategories()
  const requests = categories.map(c => ({ path: c.href }))

  categories.forEach(c => {
    requests.push(...c.items.map(p => ({ path: p.href })))
  })

  // is not logged in the output
  console.log(buildIdPath)

  // kills the prerender process to provide some sort of logging
  throw new Error(`Does file exist for ${buildIdPath}? ${existsSync(buildIdPath)}`)

  if (existsSync(buildIdPath)) {
    const buildId = readFileSync(buildIdPath, 'utf8')
    
    const apiPaths = requests.map(req => ({
      path: `/_next/data/${buildId}/${req.path.replace(/\/$/, '')}.json`,
    }))
    requests.push(...apiPaths)
  }

  return requests
}

…

2020-11-11T17:57:15Z - info - -----------------------
2020-11-11T17:57:15Z - info - PreloadRequests job started
2020-11-11T17:57:15Z - info - Running job 'preloadRequests' on xdn-build-lambda v2.28.0
2020-11-11T17:57:16Z - error - PreloadRequests job failed [unexpected]: Error while invoking lambda "6b465a4a5b7651990159d39b197b44b8eb5790edeedc0e5e2b361c7e6327d069": Does file exist for /var/task/.next/BUILD_ID? false

This at least gives me a starting point for debugging why my path is unable to be located on the file system.

It would be helpful to be able to run this locally to test before deployment for testing.

2

The original issue was resolved by ensuring the .next/BUILD_ID resource is included in the deploy. This needs to be defined in xdn.config.js as includeFiles:

require('dotenv').config()
const { join } = require('path')

module.exports = {
  routes: './routes.ts',
  includeFiles: {
    [join('.next', 'BUILD_ID')]: true,
  }
}

Then I could read in that build ID when defining my prerender paths:

import { existsSync, readFileSync } from 'fs';
import { join } from 'path';
import { getCategories } from '../lib/cms';

// Read the Next.js build ID from '.next/BUILD_ID
// This is configured in `xdn.config.js` to be included in the build/deploy
const buildIdPath = join(process.cwd(), '.next', 'BUILD_ID');

export default async function getPrerenderRequests() {
  const { categories } = await getCategories();
  const requests = categories.map((c) => ({ path: c.href }));

  categories.forEach((c) => {
    requests.push(...c.items.map((p) => ({ path: p.href })));
  });

  if (existsSync(buildIdPath)) {
    const buildId = readFileSync(buildIdPath, 'utf8');
    const apiPaths = requests.map((req) => ({
      path: `/_next/data/${buildId}/${req.path.replace(/^\/|\/$/, '')}.json`,
    }));
    requests.push(...apiPaths);
  }

  return requests;
}

However, improving a way to validate your prerender function or a form of better logging to the build output in the XDN console would be helpful in debugging.

1 Like