fix(nextjs): copy _error.js component

Author: subzero10

packages/nextjs/package.json

@@ -12,7 +12,7 @@
     "name": "Pangratios Cosma",
     "email": "pangratios.cosma@honeybadger.io"
   },
-  "homepage": "https://github.com/honeybadger-io/honeybadger-js/packages/nextjs#readme",
+  "homepage": "https://github.com/honeybadger-io/honeybadger-js/tree/master/packages/nextjs",
   "license": "MIT",
   "main": "dist/honeybadger-nextjs.cjs.js",
   "module": "dist/honeybadger-nextjs.esm.js",

packages/nextjs/src/copy-config-files.ts

@@ -5,21 +5,36 @@ const fs = require('fs')
 
 const debug = process.env.HONEYBADGER_DEBUG === 'true'
 
+async function copyErrorJs() {
+  const targetPath = path.join('pages', '_error.js')
+  const errorJsAlreadyExists = fs.existsSync(targetPath)
+  if (errorJsAlreadyExists) {
+    // Don't overwrite an existing _error.js file.
+    // Create a _error.js.bak file instead.
+    const backupPath = path.join('pages', '_error.js.bak')
+    await fs.promises.copyFile(targetPath, backupPath)
+  }
+
+  const sourcePath = path.resolve(__dirname, '../templates/_error.js')
+
+  return fs.promises.copyFile(sourcePath, targetPath)
+}
+
 async function copyConfigFiles() {
   if (debug) {
     console.debug('cwd', process.cwd())
   }
 
-  const templateDir = path.resolve(__dirname, '../templates');
-  const files = await fs.promises.readdir(templateDir);
+  const templateDir = path.resolve(__dirname, '../templates')
+  const files = await fs.promises.readdir(templateDir)
   const copyPromises = files.map((file) => {
     if (debug) {
       console.debug('copying', file)
     }
-    return fs.promises.copyFile(path.join(templateDir, file), file);
+
+    return file === '_error.js' ? copyErrorJs() : fs.promises.copyFile(path.join(templateDir, file), file)
   });
   await Promise.all(copyPromises);
-
   console.log('Done copying config files.')
 }
 

packages/nextjs/src/index.ts

@@ -1,5 +1,6 @@
 import fs from 'fs'
 import path from 'path'
+import Honeybadger from '@honeybadger-io/js';
 import HoneybadgerSourceMapPlugin from '@honeybadger-io/webpack'
 import type { WebpackConfigContext } from 'next/dist/server/config-shared';
 import { HoneybadgerNextJsConfig, NextJsRuntime, HoneybadgerWebpackPluginOptions } from './types'
@@ -25,15 +26,6 @@ function shouldUploadSourceMaps(honeybadgerNextJsConfig: HoneybadgerNextJsConfig
   return true
 }
 
-export function setupHoneybadger(config, honeybadgerNextJsConfig: HoneybadgerNextJsConfig) {
-  _silent = honeybadgerNextJsConfig?.silent ?? true
-
-  return {
-    ...config,
-    webpack: mergeWithExistingWebpackConfig(config.webpack, honeybadgerNextJsConfig)
-  }
-}
-
 function mergeWithExistingWebpackConfig(nextJsWebpackConfig, honeybadgerNextJsConfig: HoneybadgerNextJsConfig) {
   return function webpackFunctionMergedWithHb(webpackConfig, context: WebpackConfigContext) {
 
@@ -167,3 +159,33 @@ function getWebpackPluginOptions(honeybadgerNextJsConfig: HoneybadgerNextJsConfi
     silent: _silent,
   }
 }
+
+export function setupHoneybadger(config, honeybadgerNextJsConfig: HoneybadgerNextJsConfig) {
+  _silent = honeybadgerNextJsConfig?.silent ?? true
+
+  return {
+    ...config,
+    webpack: mergeWithExistingWebpackConfig(config.webpack, honeybadgerNextJsConfig)
+  }
+}
+
+export async function notifyFromNextErrorComponent(contextData) {
+  const { req, res, err } = contextData;
+
+  // exclude 40x except when this component is rendered from a routing error or a custom server
+  // https://nextjs.org/docs/advanced-features/custom-error-page#caveats
+  const statusCode = (res && res.statusCode) || contextData.statusCode;
+  if (statusCode && statusCode < 500) {
+    Honeybadger.config.logger.debug(`_error.js skipping because statusCode is ${statusCode}`);
+    return Promise.resolve();
+  }
+
+  await Honeybadger.notifyAsync(err || `_error.js called with falsy error (${err})`, {
+    context:
+        {
+          url: req.url,
+          method: req.method,
+          statusCode: res.statusCode,
+        }
+  });
+}

packages/nextjs/templates/_error.js

@@ -0,0 +1,15 @@
+// eslint-disable-next-line import/no-unresolved
+import { notifyFromNextErrorComponent } from '@honeybadger-io/nextjs';
+import NextErrorComponent from 'next/error';
+
+const CustomErrorComponent = props => {
+  return <NextErrorComponent statusCode={props.statusCode} />;
+};
+
+CustomErrorComponent.getInitialProps = async contextData => {
+  await notifyFromNextErrorComponent(contextData);
+
+  return NextErrorComponent.getInitialProps(contextData);
+};
+
+export default CustomErrorComponent;