https://serverless-stack.com/ logo
Join Slack
Powered by
I'm trying to implement a more data-driven user ou...
# help
k
I'm trying to implement a more data-driven user outreach strategy, so yesterday evening I added Google Analytics into my project. Events were loading into the GA dashboard and the local setup was running smoothly, so I pushed it out to prod... and got hit with a fun little CloudFront error (also not critical since I'm basically just collecting emails at this point):
Copy code
503 ERROR
The request could not be satisfied.
The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
Generated by cloudfront (CloudFront)
Request ID: <Request_ID>
Couple notes/observations as I continue to investigate this: • The most suspect change I can think of are updates to the CSP policy to accept traffic from Google Analytics. Adding the code below for reference. • I saw from several past threads that this could be a Next JS issue. Could also be a me issue as I have overlooked stuff in the past (and will again 😃 )
Copy code
// next.config.js
const ContentSecurityPolicy = `
  default-src 
    'self';
  script-src 
    <https://www.googletagmanager.com/>
    'self' 
    'unsafe-eval' 
    'unsafe-inline';
  style-src 
    'self' 
    'unsafe-inline';
  img-src 
    * 
    blob: 
    data:;
  media-src 
    'none';
  connect-src 
    *;
  font-src 
    'self';
  frame-src 
    'none';
`;

const securityHeaders = [
  // <https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP>
  {
    key: "Content-Security-Policy",
    value: ContentSecurityPolicy.replace(/\n/g, ""),
  },
 // ... other headers
];
I'm also exploring the CNAMEs associated with my hosted zone... seems like the # has increased since the last deployment. What's also curious is that I've identified two separate ACM certificates with the same underlying CNAME (also referencing the same domain). That strikes me as odd so may just 
rm -rf
the stack and see if an infrastructure reset solves the issue. If that's the case though I'll likely do additional research into past 
npx sst deploy
commands since I'm not generating any manual infra
Continuing on the Route 53 record set review, I'm wondering if specifying the same domain name for separate SST deployments is leading to some sort of collision. I'm using the same certificate + hosted zone within the 
NextjsSite
construct... and that just seems like a recipe for a bad time.
Copy code
const site = new sst.NextjsSite(this, "MySite", {
  path: "frontend",
  customDomain: {
    domainName:
      scope.stage === "prod" ? "<http://websiteName.io|websiteName.io>" : `${scope.stage}.<http://websiteName.io|websiteName.io>`,
    domainAlias: scope.stage === "prod" ? "<http://www.websiteName.io|www.websiteName.io>" : undefined,
    cdk: {
      certificate: Certificate.fromCertificateArn(
        this,
        "WebsiteCert",
        process.env.WEBSITE_CERT_ARN
      ),
    },
    hostedZone: HostedZone.fromHostedZoneAttributes(this, "WebsiteZone", {
      hostedZoneId: process.env.HOSTED_ZONE_ID,
      zoneName: process.env.ZONE_NAME,
    }),
  },
});
Continuing on that, would be awesome to hear how others manage Route 53 infra IRT production deployments if anyone has experience here ^
d
Two certs is no big deal, it creates new certs if the wind blows.
I believe your error is exactly as it states. There was an error during deployment and the lambda at edge didnt get permissions. This is flukey and happens intermittently on new sites, try just deploying again.
k
Gotcha ok, I'll give that a shot. Currently rotating between CloudFront, CloudWatch, Lambda and Route53 without much direction... redeploy sounds more ideal.
d
You will learn in this scenario it is almost always cloudfront, specifically edge functions. They are a deployment nightmare, especially if you arent in 
us-east-1
.
But, I will say, that once you get it working, it seems to just work forever.
You can delete and start over, just note that edge functions can take HOURS to delete (this is ok since they get new names, just annoying)
k
Cool good to know.. I'm already thinking whether it would be worth writing utilities to clear this out if/when it happens again. Though hopefully wouldn't need to go there.
Going for the redeploy and I'll update back here to close the loop (crossing fingers)
d
There has been much discussion here about how to handle deleting the edge functions, feel free to read while you wait 😁 : NextjsSite: clean up Lambda@Edge function on remove · Issue #835 · serverless-stack/serverless-stack (github.com)
k
Oh perfect thanks! Could go for a little light reading here.. appreciate the link!
Awesome, looks like that is going to do the trick. Can't access the site though I think the DNS records just need to rotate out their cache and it should be good. Appreciate the direction (again!)
Ah still getting the 503... maybe I tried to redeploy too soon? In any case, tearing down the stack and will give it the work day to reset. Also going to look into adding logs for the edge functions and upgrade to V1.
d
that’s an odd one, not sure where to go from here, but I still think it is a legitimate permissions issue, it almost always is.
f
@Kevin Grimm have u had a chance to look into the CloudWatch logs for the Edge functions?
k
Copy code
I still think it is a legitimate permissions issue, it almost always is.
very true, "it's a permission issue" is relatedly a safe bet on the AWS exams
so I'm going to check out (1) permissions and (2) logs through the night and will report back!
Got a suspect. On a related note I suppose these types of investigations end w/ ppl migrating to TypeScript
Copy code
{
  "errorType": "SyntaxError",
  "errorMessage": "Unexpected token '.'",
  "stack": [
    "/var/task/chunks/647.js:66",
    "    window.gtag?.(\"event\", action, {",
    "                ^",
    "",
    "SyntaxError: Unexpected token '.'",
    "    at wrapSafe (internal/modules/cjs/loader.js:915:16)",
    "    at Module._compile (internal/modules/cjs/loader.js:963:27)",
    "    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)",
    "    at Module.load (internal/modules/cjs/loader.js:863:32)",
    "    at Function.Module._load (internal/modules/cjs/loader.js:708:14)",
    "    at Module.require (internal/modules/cjs/loader.js:887:19)",
    "    at require (internal/modules/cjs/helpers.js:74:18)",
    "    at Object.__webpack_require__.f.require (/var/task/webpack-runtime.js:162:28)",
    "    at /var/task/webpack-runtime.js:73:40",
    "    at Array.reduce (<anonymous>)"
  ]
}
Back up and running! Appreciate the replies @Derek Kershner @Frank !!
Open in Slack
PreviousNext
Powered by