Describe the bug

We are using a custom handler and it seems like we can't catch an error coming from the original handler (triggered in the Next.js app). We are able to see the error bubbling up into the Cloudwatch logs, but neither Bugsnag nor a try/catch block seems to recognize them.

I'm not 100% certain that it's an issue within this library but I narrowed down the issue and wanted to share it with everyone here. Maybe someone got an idea or can direct me to a different place. Apologies if this is not the right way to approach it, but I have tried multiple things now and am out of ideas.

Actual behavior

Errors appear in Cloudfront logs but don't seem to trigger actual errors (e.g. try/catch, Bugsnag) within the custom handler

Expected behavior

Errors should be able to be caught on the custom handler level

Steps to reproduce

1. Throw an error in your getInitialProps of any route/page component
2. Use custom handler (as outlined here and in the docs) to catch/handle the error
3. Error is never called, looks like it's only ending up like a log message?

Screenshots/Code/Logs

customLambdaHandler.js

const originalLambda = require('./index');

exports.handler = async function (event, context) {
    console.log('Using custom lambda handler');

    try {
        console.log('try');

        return originalLambda.handler(event, context);
    } catch (error) {
        console.log('catch');
    }
};

serverless.yml

myapp:
  component: '@sls-next/[email protected]'
  inputs:
    handler: "customLambdaHandler.handler"
    build:
      cmd: "../../node_modules/.bin/next"
    runtime:
      defaultLambda: "nodejs14.x"
    memory:
      defaultLambda: 1024
    timeout:
      defaultLambda: 20

    bucketName: ${env.DEPLOY_BUCKET_NAME}
    cloudfront:
      distributionId: ${env.CLOUDFRONT_DISTRIBUTION_ID}

/pages/mypage.ts

import React from 'react';
import { NextPageContext } from 'next';

interface Props extends PageLayoutProps {
    // ...
}

function MyPage(props: Props) {
    return <SomeComponent {...props} />;
}

(MyPage as any).getInitialProps = async (context: NextPageContext) => {

    // Random error to trigger on every other page load
    if (new Date().getTime() % 2 === 0) {
        console.log('Before Error');

        throw new Error('Error in getInitialProps');
    }

    return {};
};

export default MyPage;

Versions

• OS/Environment: CI/Linux
• @sls-next/serverless-component version: 1.18.0, 1.20.0-alpha.15
• Next.js version: 10.0.7

Additional context

Reason to approach this

We want to capture errors vis Bugsnag on the lambda render. By using the default client library the lambda would shout down before any error goes out. Bugsnag got a solution for this on https://docs.bugsnag.com/platforms/javascript/aws-lambda/ which led me to use custom handlers in the first place. After getting stuck on this for a few days I managed to find out that Bugsnag isn't the issue as a simple try/catch block also doesn't work as expected.

Cloudwatch logs

When running the code above I can see in the Cloudwatch logs:

2021-05-28T18:36:33.535+10:00	START RequestId: some-id Version: 378

2021-05-28T18:36:33.549+10:00	2021-05-28T08:36:33.549Z some-id INFO Using custom lambda handler

2021-05-28T18:36:33.549+10:00	2021-05-28T08:36:33.549Z some-id INFO try

2021-05-28T18:36:33.550+10:00	2021-05-28T08:36:33.550Z some-id INFO Before Error

2021-05-28T18:36:33.568+10:00	2021-05-28T08:36:33.568Z some-id ERROR Unhandled error during request: Error: Error in getInitialProps 

2021-05-28T18:36:33.571+10:00	2021-05-28T08:36:33.571Z some-id ERROR Error: Error in getInitialProps 

2021-05-28T18:36:33.571+10:00	2021-05-28T08:36:33.571Z some-id ERROR Error rendering page: pages/c/[categorySlug].js. Error: Error: Error in getInitialProps Rendering Next.js error page.

2021-05-28T18:36:34.155+10:00	END RequestId: some-id

Thanks so much in advance for looking at this, appreciate the time 🙇