502 Gateway Timeout when generating large Excel reports (60MB+) with ExcelJS and AWS — works for 1 month, fails for 2-3 months range

I’m working on a Node.js + Express backend where I need to generate and download Excel reports from MongoDB using ExcelJS.
When the user selects a large date range (2-3 months) — around 60 MB of Excel data — the server times out with a 502 Gateway Timeout on AWS.

When I select a 1-month range, it works fine.

What I tried:

Initially, my code generated a single Excel file for the entire range:

   downloadReportsExcel: async (req, res) => {
    try {
    req.setTimeout(0); 
    const { from, to } = req.query;
    const fromDate = new Date(from);
    const toDate = new Date(to);

    const reports = await Report.find({
      createdAt: { $gte: fromDate, $lte: toDate },
    }).populate("case reportedBy");

    const workbook = new ExcelJS.stream.xlsx.WorkbookWriter({ stream: res });
    const worksheet = workbook.addWorksheet("Reports");

    worksheet.columns = [
      { header: "CONTRACTOR NAME", key: "contractorName", width: 25 },
      // ...other columns
    ];

    res.setHeader(
      "Content-Disposition",
      `attachment; filename="Reports_${from}_to_${to}.xlsx"`
    );

    for (const report of reports) {
      worksheet.addRow({
        "CONTRACTOR NAME": report.contractorName || "N/A",
        // ...
      }).commit();
    }
    worksheet.commit();
    await workbook.commit();
  } catch (err) {
    console.error(err);
  }
};

✅ This worked for smaller date ranges (1 month),
❌ But failed for larger ranges (2–3 months, ~60MB file) with 502 Gateway Timeout after 2–3 minutes (AWS default limit).

Attempted fix (split into monthly chunks and zip)

To fix it, I tried splitting the range into monthly chunks, generating separate Excel files for each month, and then zipping them together:

    const chunks = getMonthlyChunks(fromDate, toDate);
    const zip = new JSZip();

for (const chunk of chunks) {
  const reports = await Report.find({
    createdAt: { $gte: chunk.start, $lte: chunk.end },
  });

  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet("Reports");

  worksheet.columns = [...];

  for (const report of reports) {
    worksheet.addRow({...});
  }

  const buffer = await workbook.xlsx.writeBuffer();
  const chunkName = `Reports_${chunk.start.toISOString()}_${chunk.end.toISOString()}.xlsx`;
  zip.file(chunkName, buffer);
}

const zipBuffer = await zip.generateAsync({ type: "nodebuffer" });
res.setHeader("Content-Type", "application/zip");
res.setHeader("Content-Disposition", `attachment; filename="Reports.zip"`);
res.send(zipBuffer);

✅ Works locally for 1-month data,
❌ Still times out for 2–3 months on AWS (file ~60 MB, 2–3 min processing).

How do I load multiple folders in one Astro content collection?

I want to make a blog page where it queries all the blogs I have.
Here’s the current file tree of what I’m thinking of doing. The reason I want to have multiple folders is so I can put these posts in a more organized way.

src
├── blog
│   ├── config.ts
│   ├── dist
│   ├── images
│   └── posts
│       ├── 2024
│       │   └── huntress-ctf.mdx
│       └── 2025
│           └── netcomp-ctf.mdx

But when I try to import the collection, it returns this:

The collection "posts" does not exist or is empty. Please check your content config file for errors.
[]

Here’s what my config currently looks like:

import { z, defineCollection } from "astro:content";
import { glob } from "astro/loaders";

const posts = defineCollection({
  loader: glob({ pattern: "{2024,2025}/**/[^_]*.md", base: "./src/blog/posts" }),
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    description: z.string(),
    tags: z.array(z.string()),
  }),
});

export const collections = { posts };

And I tried loading my collection like this:

---
import { getCollection } from "astro:content";
import Layout from '../layouts/Layout.astro';

const posts = await getCollection("posts");
console.log(posts);
---

I wonder what I’m doing wrong here, I want to find a workable solution of:

  • Keeping my posts organized in folders
  • Importing my post collection through one collection
  • Side note: I also want my posts to be able to refer to the dist (for file downloads) and images (for optimised images embedded using [alt]() instead of something like <Image>), so I also need to know how to reference them properly in my blog posts through imports/collections because I’m still confused on how to approach this

How do I preserve the colors of an image when I lower its overall opacity to almost transparent? (html javascript) [duplicate]

When I convert an image to almost transparent (1% opacity), either by using imageData or globalAlpha, the original color data is lost in the conversion. When I open up the saved image in any image editing software (I checked and the image editing software is not the problem here) and put it back to full opacity there, I notice that only 16 or 24 colors remain. The image looks like as if it was posterized.

For example, if my image had a color “#90F59A”, after the conversion, the color would now become “#AAFFAA”.

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;

ctx2.clearRect(0, 0, canvas2.width, canvas2.height);

for (let i = 0; i < data.length; i += 4) {
    const red = data[i];
    const green = data[i + 1];
    const blue = data[i + 2];
    const alpha = data[i + 3];
    if (alpha == 0 || (red == 0 && green == 0 && blue == 0)) {
        // black pixels become fully transparent
        data[i] = 0;     // Red
        data[i + 1] = 0; // Green
        data[i + 2] = 0; // Blue
        data[i + 3] = 0; // Alpha
    } else {
        // all other pixels turn almost transparent
        data[i + 3] = 255 * 0.01;
    }
}
ctx2.putImageData(imageData, 0, 0);

I tried using globalAlpha and found that the quality was reduced. I then tried using imageData because I thought it would preserve the image data since I was modifying the image’s data itself (or the array or color values the image contains), but it also didn’t work.

I also tested if the color quality loss would happen with images that are more opaque (like 80%), and saw that the image quality did not get lower. I also tested with an opacity that is just a bit higher than 1% (like 3%) and saw that there was less reduction in color quality, so I assume the color quality loss was because of some computation with transparent pixels.

I was expecting the image to become almost transparent (1% opacity) but still have the colors be the same.

storybook error: “Cannot read properties of undefined (reading ‘tap’)”

trying to run storybook (v8.6.14) in a next.js 14 project with @storybook/nextjs,
but it keeps breaking on startup with this error:

TypeError: Cannot read properties of undefined (reading 'tap')

stack trace points to:
node_modules/next/dist/compiled/webpack/bundle5.js

looks like storybook is somehow using next’s internal webpack instead of its own.

already tried:

removed all addons (even @storybook/addon-styling-webpack)

cleared cache + reinstalled everything

tried forcing storybook to use its own webpack via @storybook/builder-webpack5 and aliasing webpack

made sure everything’s on webpack 5.101

still same thing, crashes the moment it starts

weird thing is – I had it working few times on another local clone of the same repo, but after working on it for a while, it started happening there also, so weird.. feels like cache problem but I really don’t know why non of the things I have done fixed it

I will appreciate your help 🙂

main.ts:

import type { StorybookConfig } from '@storybook/nextjs'

const config: StorybookConfig = {
  stories: [
    '../ui/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  staticDirs: ['../public'],
  docs: {
    autodocs: 'tag',
  },
}
export default config

Is it possible to use the “/” route for a controller in Laravel with Inertia?

What I want to set up in .routesweb.php is something like

Route::resource('/main', CallController::class);

So, if user goes to www.sitename.com/, the index of CallController should be executed and displayed. However, if I try to compile that with npx vite build, I am invariably met with an error of such type:

Expected identifier but found ":"
216 |   * @route '/{}'
217 |   */
218 |  export const show = (args: { : string | number } | [param: string | number ] | string | number, options?: RouteQueryOptions): RouteDefinition<'get'> => ({
    |                               ^
219 |      url: show.url(args, options),
220 |      method: 'get',

The error only seems to go away, if some other path other that / is being assigned to as the path for the CallController‘s index.

The only workaround that I have found is to set the resource route as /calls and redirect from it from `/’:

Route::get('/', function () {
        return redirect('/main');
    })->name('home');

But I wonder, whether it is the intended behaviour and if it is possible to use / as a route for a resource/controller?

Why are my Laravel validation errors not showing in the Blade view? [closed]

I made a form in Laravel and added validation rules in the store() method.
The validation works because when I submit invalid data, the page refreshes and the form doesn’t submit — but I don’t see any error messages on the page.

Here’s part of my form in Blade:

<form action="{{ route('register') }}" method="POST">
    @csrf
    <input type="text" name="name" placeholder="Name">
    <button type="submit">Register</button>
</form>

And the validation inside my request file:

public function rules()
{
    return [
        'name' => 'required|min:3',
    ];
}

I tried using @error('name') inside my form, but it still doesn’t display anything.
I expected to see the validation message like “The name field is required.” but the form just reloads.
How can I properly show Laravel validation errors in a Blade view?

How can I display dynamic menu items like the 7 Brew Menu using JavaScript?

I’m trying to build a dynamic coffee shop menu for a project, kind of like the 7 Brew Menu, where each category (like drinks, flavors, add-ons, etc.) updates based on user selection.

I’m using HTML, CSS, and vanilla JavaScript, but I’m not sure how to structure the data so it’s easy to update and display.

For example:

When a user clicks on “Iced Drinks,” it should show only iced drink items.

Each item should have a name, price, and maybe an image.

What’s the best way to store and render this kind of data — should I use an array of objects or fetch it from a JSON file?

Any advice or code examples would be super helpful!

What I tried:
I tried creating an array of menu items in JavaScript and displaying them using a simple forEach loop. It works, but all items show at once instead of updating when I select a category (like “Iced Drinks” or “Blended Drinks”).

What I expected:
I expected only the selected category items to display — similar to how the 7 Brew Menu updates depending on drink type.

What actually happened:
All the menu items appeared together on the page, and the filter buttons didn’t change the displayed results.

Why doesn’t my v-model show the initial value in Vue 3?

I’m building a simple component in Vue 3 that uses v-model to bind an input field.
When I set the variable value inside mounted(), it updates correctly in the paragraph but the input itself stays empty.
Here’s my component:

<template>
  <div>
    <input type="text" v-model="name">
    <p>{{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { name: '' }
  },
  mounted() {
    this.name = 'John'
  }
}
</script>

I tried setting the initial value directly in the data() function and it worked, but I need to assign it dynamically later.
I also checked the browser console and saw no errors.
I expected the input to show “John” automatically when the component loads, but it only updates when I type something manually.
Why doesn’t the input reflect the data value on mount?

How do I change the Google PlaceAutocompleteElement width?

Unlike the past, Google’s new PlaceAutocompleteElement imposes its own styling on the input and it clashes with my site.

In particular, the width is not full-width / fill. I see Google allows a small handful of overrides. However, is there any way to ensure the autocomplete to fills its container?

In one example, the autocomplete is appended to the body and it does fill the width. In another example, the autocomplete appears to be constrained. But neither examples explain how the width is controlled.

I did try the following and it does not work:

const autocompleteElement = new window.google.maps.places.PlaceAutocompleteElement()
autocompleteElement.style.colorScheme = "light"
autocompleteElement.style.width="100%"
autocompleteElement.width = "100%"
myElement.appendChild(autocompleteElement)

Difference in date between Js code in React project and Browser

Currently creating a simple React project which displays the date and shows future / past dates based on the user inputting the number of days difference. The date I’ve inputted as the date to measure from doesn’t come up as the same when on the Browser. I have no idea why this has happened but I’m assuming its something with Vite because this doesn’t happen when not using it.
Code for displaying time
Browser Output

Initially tried showing the current date with ‘new Date()’ but even with a specific date (e.g. new Date(‘october 04 2025’), a completely different date is logged by the console.

PayStackAPIError: Bearer Authorization header may not have been set | Unauthorized (401)

This is my first time of integrating payment gateway to my website using official paystack-node sdk package in my node.js application, but after following through the documentation i’m facing this error: PayStackAPIError: Bearer Authorization header may not have been set | Unauthorized (401).

This is my code sequence on the server side:

    const Paystack = require('paystack-node');
    const {PaystackPaymentSetupValidator,throwValidationError} = require('../utils/schemas');
    const router = require('express').Router();
    const ExpressError = require('../utils/express_error');
    const paystack = new Paystack(process.env.PAYSTACK_SECRET_KEY, process.env.NODE_ENV);
    const _isDevt = (process.env.NODE_ENV !== 'production');
    const callback_url = process.env.PAYSTACK_CALLBACK_URL;

// Middleware to validate Paystack requests
    const _validateRequest = async (req, resp, next) => {
        try{
            const {req_typ} = req.body;
            const {error} = await req_typ=='paystack-payment-setup-req'? PaystackPaymentSetupValidator.validate(req.body,{abortEarly:false}) : throwValidationError(req.body);
            if (error) {
                let msg = error? error.details.map(el => el.message).join('n# ') : 'Invalid Session Data!';
                if(_isDevt){
                    console.log('validation err:',error,msg);
                    msg = `n# ${msg}.`;
                } else {
                    msg = '';
                } // end if
                req.app.locals.appfx.log(new ExpressError('Validation Error',msg,0,req.body));
                return resp.send({error: {text: msg||'Invalid Request format.'}});
            } // end if
            return next();
        } catch(err) {
            if(_isDevt){
                console.log('catch err:',error);
            } // end if
            req.app.locals.appfx.log(error);
            return resp.send({error: {text:`Request Error!${_isDevt?`n${error}`:''}`}});
        } // end catch    
    } // end fx

    // Middleware to initialize Paystack
    const _initiatePayment = async (req, resp) => {
        try {
            const {email, amount, metadata} = req.body;
            const response = await paystack.initializeTransaction({
                email: email,
                amount: amount * 100, // Amount in kobo
                metadata: metadata || {},
                callback_url: callback_url
            });
            console.log('resp:',response);
            if(response.status) {
                return resp.send({success: {text: 'Paystack initialized successfully.', data: response.data}});
            } else {
                return resp.status(400).send({error: {text: 'Failed to initialize Paystack transaction.'}});
            } // end if
        } catch (error) {
            if(_isDevt){
                console.log('catch err:',error);
            } // end if
            req.app.locals.appfx.log(error);
            return resp.status(500).send({error: {text:`Request Error!${_isDevt?`n${error}`:''}`}});        
        } // end catch
    } // end fx

    // Middleware to verify Paystack transaction
    const _verifyPayment = async (req, resp, next) => {
        const {reference} = req.body||req.query;
        if(!reference) {
            return resp.status(400).send({error: {text: 'Transaction reference is required.'}});
        } // end if
        try {
            const response = await paystack.verifyTransaction({reference});
            // Handle successful verification (e.g., update order status)
            if(response.data.status && response.data.data.status === 'success') {
                req.transaction = response.data.data;
                return next();
            } else {
                return resp.status(400).send({error: {text: 'Transaction verification failed.'}});
            } // end if
        } catch (error) {
            if(_isDevt){
                console.log('catch err:',error);
            } // end if
            req.app.locals.appfx.log(error);
            return resp.status(500).send({error: {text: 'An error occurred while verifying the transaction.'}});
        } // end catch
    } // end fx

    // Define routes
    router.get('/', (req, resp) => {
        return resp.render('paystack', { title: 'Paystack Payment Gateway Handler', user: req.user, _csrf: req.app.locals._csrf, payment_setup_url:'payment_setup/initiate' });
    });
    router.route('/initiate').post(_validateRequest, _initiatePayment);
    router.route('/verify').post(_validateRequest, _verifyPayment, (req, resp) => {
        return resp.send({success: {text: 'Transaction verified successfully.', data: req.transaction}});
    });

    module.exports = router;

After running this, I get this error:
PayStackAPIError: Bearer Authorization header may not have been set | Unauthorized (401).

I was hoping for smooth running, please can anyone help me through this…

There is a syntax error somewhere within this code [closed]

There is a syntax error on the result line

I have watched so many videos but i need a good ttorial or help please

image is here – https://1drv.ms/i/c/36fc60b41c9287f8/EW6nARgyeilNgyVWKVhUDcMBiyytOFryjcX13FzUaMLdtg?e=t3XG7l

code–

<?php 
if(isset($_POST['create'])){
    $firstname = $_POST['firstname']; 
    $lastname = $_POST['lastname'];
    $email = $_POST['email'];
    $phonenumber = $_POST['phonenumber'];
    $password = $_POST['password'];
    
    $sql = "INSERT INTO useraccounts (firstname, lastname, email, phonenumber, password) VALUES (?,?,?,?,?)";
    $stmtinsert = $db->prepare($sql);
    $result = $stmtinsert->execute([$firstname, $lastname, $email, $phonenumber, $password]);
    
    if($result){
        echo 'successfully saved';  
    }else{
        echo ('errors found, contact the admins');  
    }
}
?>