Blancer.com Tutorials and projects

I’m trying to call an async function and get the result, but instead of the actual data, I get a pending Promise. Here’s a simplified version of my code:

async function getData() {
  const response = await fetch('https://api.example.com/data');
  const result = await response.json();
  return result;
}

const data = getData();
console.log(data); // This logs: Promise { <pending> }

How can I get the actual result instead of a pending Promise? I understand async functions return Promises, but what’s the correct way to handle this so I can use the data?

I’m building an Etch-a-Sketch per The Odin Project’s curriculum.

On page load, makeGrid() creates a default 10×10 grid of divs (adjustable between 2×2 and 64×64). Then draw() is called—both on load and whenever the grid size changes—to enable drawing by clicking and dragging across the grid.

Drawing works using mousedown, mouseup, and mouseover events to track whether the mouse is held down. I use an isMouseDown flag for this.

The problem: when I click and quickly drag, sometimes the mouseup event doesn’t fire, and the mouse stays “stuck” in drawing mode. It continues coloring tiles even after releasing the button. Slower dragging usually works fine.

I initially used just mousedown and mouseover, but added mouseup and the isMouseDown flag to improve accuracy. Still, the issue persists.

There are no errors in the console. Here’s the CodePen link with all the code if you’d like to test it.

https://codepen.io/kevyozev-the-sasster/pen/PwPNGwE

function makeGrid() {
  let number = input.value;
  if (number < 0 || number > 64 || isNaN(number)) {
    promptText.textContent = `Invalid number. Generating 10 x 10 grid. Please enter a number between 2 and 64.`;
  } else {
    promptText.textContent = "";
    input.value = "";
    canvas.innerHTML = "";
  }
  if (number == 0 || number > 64 || number == "") {
    canvas.innerHTML = "";
    for (let i = 0; i < 10; i++) {
      const row = document.createElement("div");
      row.classList.add("rows");
      canvas.appendChild(row);

      for (let j = 0; j < 10; j++) {
        const column = document.createElement("div");
        column.classList.add("columns");
        row.appendChild(column);
      }
    }
  } else {
    promptText.textContent = `Generating a ${number} x ${number} grid...`;
    for (let i = 0; i < number; i++) {
      const row = document.createElement("div");
      row.classList.add("rows");
      canvas.appendChild(row);

      for (let j = 0; j < number; j++) {
        const column = document.createElement("div");
        column.classList.add("columns");
        row.appendChild(column);
      }
    }
    draw();
  }
}


let isMouseDown = false;

document.addEventListener("mousedown", () => {
  isMouseDown = true
});
document.addEventListener("mouseup", () => {
  isMouseDown = false
});



function draw() {
  let columns = document.getElementsByClassName("columns");
  for (let i = 0; i < columns.length; i++) {
    columns[i].addEventListener("mousedown", changeColors);
    columns[i].addEventListener("mouseover", function() {
      if (isMouseDown) {
        changeColors.call(this);
      }
    })
  }
}

<div id="container">
  <div id="canvas"></div>
</div>

I have a PrimeReact DataTable with multiple columns.
Each column has a text header, optionally with sort and filter options.
Alignment of the columns can differ, and I would like the alignment of the headers to match that of the columns. But if the sort and/or filter options are active for that column, I want the sort and filter icons to ALWAYS be right aligned, regardless of the text alignment of that column header.

I can use the alignHeader property of the Column to decide if I want the header text to be aligned left, right of center. But that will make the sort and filter icons left or center aligned as well.

For a right aligned header it’s obvious, as using alignHeader will ensure that both the header text and the icons are right aligned

And if all column headers should be left aligned, I know I could use

            display: flex;
            justify-content: space-between;

to solve this, as it will move the header text to the left and the icons to the right (regardless of the alignHeader values).
But that doesn’t work when I want to have different alignment in the different column headers.

And I can’t figure out how to properly solve it for center aligned header text at all.

So what would be the best/easiest way to handle this?

With the exception of the above mentioned left alignment solution, every solution I tried resulted in the header text and the header icons being grouped together and both being aligned the same, which is not what I want.

I need to create an object whose initial state is something like this:

let myDict = {
   "A": false,
   "B": false,
   ...
   "Z": false
}

But how can I concisely create this in less than 28 lines of code?

I have an AWS javascript lambda using CommonJS modules running under Node.js 22.x. I’m running currently with mediainfo.js 0.1.9 and everything works fine. I tried to upgrade to mediainfo.js 0.3.5 and, after making appropriate adjustments (like changing new MediaInfoFactory(..) to mediaInfoFactory(..)), I get the following errors when I’m trying to run:

2025-07-25T05:29:49.977Z    da5eb22d-0494-41dd-8aa8-194b0e8b42be    ERROR   failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): invalid value type 0x64 @+249

2025-07-25T05:29:49.977Z    da5eb22d-0494-41dd-8aa8-194b0e8b42be    ERROR   Aborted(CompileError: WebAssembly.instantiate(): invalid value type 0x64 @+249)

2025-07-25T05:29:49.977Z    da5eb22d-0494-41dd-8aa8-194b0e8b42be    ERROR   RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): invalid value type 0x64 @+249). Build with -sASSERTIONS for more info.
    at abort (/var/task/node_modules/mediainfo.js/dist/cjs/MediaInfoModule.cjs:297:15)
    at instantiateArrayBuffer (/var/task/node_modules/mediainfo.js/dist/cjs/MediaInfoModule.cjs:343:9)
    at async createWasm (/var/task/node_modules/mediainfo.js/dist/cjs/MediaInfoModule.cjs:417:22)
    at async /var/task/node_modules/mediainfo.js/dist/cjs/MediaInfoModule.cjs:2645:23

I temporarily built a custom locateFile function and passed it to the 0.3.5 mediaInfoFactory and I verified that I’m loading MediaInfoModule.wasm from the correct location.

The error is on this statement:
let mi = await mediaInfoFactory({chunkSize: CHUNK_SIZE, coverData: false, format: 'JSON'});

and the require that I’m using is:
const { mediaInfoFactory } = require('mediainfo.js');

I’m not sure what I’m doing wrong or if it’s something with my environment or what.

I appreciate any help. Thanks, Gary

This is the black page shown when I open it on the localhost server.

I have three websites on the localhost XAMPP server. Two of them are on WordPress, which works fine, but when I open the third website, which is a non-WordPress site, it shows a black page. whereas the website from the previous two weeks is working fine. It suddenly began to show a black page. I don’t know what is the reason behind this.

I have deployed an API server and a client to azure containers. The client makes HTTPS requests to the API URL, This URL is set both at build time and as env variable, following the REACT_APP_API naming convention.

If I go to the API swagger, all the endpoints works.
But I’m facing a problem on the client side, when for some endpoints it works and makes the https request, but for others it makes an http request, which ends up with the error:

The page at 'https://myapp.westus.azurecontainerapps.io/jobs' was loaded over HTTPS, 
but requested an insecure XMLHttpRequest endpoint 
'http://myapp-api.westus.azurecontainerapps.io/v1/scheduler'. 
This request has been blocked; the content must be served over HTTPS.

The jobs page has a button that makes the call to /scheduler, they both share the same apiClient object, like this:

const apiURL: string = "https://myapp-api.westus.azurecontainerapps.io"; // also tried process.env.REACT_APP_API;

const apiClient = axios.create({
    baseURL: `${apiURL}/v1`,
    headers: {
        'Content-Type': 'application/json',
    },
});

I’m 100% sure this apiClient is the only one used in all the app, and no hardcoded htpp request is made. I hardcoded for now the HTTPS URL for testing purposes.

For example, in this endpoint it works as expected (and other endpoints as well, post, get, etc):

export async function fetchDatasets(datasetId=null) {
    try {
        const endpoint = datasetId ? `/datasets/${encodeURIComponent(datasetId)}` : '/datasets';
        const response = await apiClient.get(endpoint);
        return response.data;
    } catch (error) {
        console.error('Error fetching datasets:', error);
        throw error;
    }
}

But here is where I’m having the issue:

export async function createSchedule(data: ScheduleRequest): Promise<any> {
    try {
        const response = await apiClient.post('/scheduler/', data);
        return response.data;
    } catch (error) {
        console.error('Error creating schedule request:', error);
        throw error;
    }
}

And also in this one, when jobId is null, it renders the /jobs page and it works, but when jobId is not null, it renders the /jobs/{jobId} page and it fails:

export async function fetchJobs(jobId = null) {
    try {
        const endpoint = jobId ? `/jobs/${encodeURIComponent(jobId)}` : '/jobs';

        const response = await apiClient.get(endpoint);
        return response.data;
    } catch (error) {
        console.error('Error fetching Jobs:', error);
        throw error;
    }
}

The only difference I can tell, and I’m not sure if it might be the issue, it’s that in the cases that work, the browser url (e.g /datasets) is the same as the API request, but for example, in the scheduling case, it happens that it’s made from the browser page /jobs and requesting /scheduler. But anyways the api and client are deployed to different urls

I am currently trying to use Emailjs for the first time on a react form but I am having all kinds of trouble to get things to work accordingly. I have read documentation and tried to implement some of solutions, but nothing seems to work. I am lost in regards to what is wrong with the form.

On Submit, the content of the form does show up on console but I am not receiving the email with contents from the form.

My contact.jsx component is as follows:

import { useState } from "react";
import React, { useRef } from 'react';
import emailjs from "@emailjs/browser";


const initialState = {
  name: "",
  email: "",
  message: "",
};
export const Contact = (props) => {
  const [{ name, email, message }, setState] = useState(initialState);
  const form = useRef();

 const handleChange = (e) => {
  const { name, value } = e.target;
  setState((prevState) => ({ ...prevState, [name]: value }));};

const clearState = () => setState({ ...initialState });


const handleSubmit = (e) => {
e.preventDefault();
console.log(name, email, message);
emailjs
  .sendForm(process.env.SERVICE_ID,  process.env.TEMPLATE_ID, e.target, process.env.PUBLIC_KEY)
  .then(
    (result) => {
      console.log(result.text);
      clearState();
    },
    (error) => {
      console.log(error.text);
    }
  );
 };

 return (
<div>
  <div id="contact">
    <div className="container">
      <div className="col-md-8">
        <div className="row">
          <div className="section-title">
            <h2>Get In Touch</h2>
            <p>
              Please fill out the form below to send us an email and we will
              get back to you as soon as possible.
            </p>
          </div>
          <form name="sentMessage" validate onSubmit={handleSubmit}>
            <div className="row">
              <div className="col-md-6">
                <div className="form-group">
                  <input
                    type="text"
                    id="name"
                    name="name"
                    className="form-control"
                    placeholder="Name"
                    required
                    onChange={handleChange}
                  />
                  <p className="help-block text-danger"></p>
                </div>
              </div>
              <div className="col-md-6">
                <div className="form-group">
                  <input
                    type="email"
                    id="email"
                    name="email"
                    className="form-control"
                    placeholder="Email"
                    required
                    onChange={handleChange}
                  />
                  <p className="help-block text-danger"></p>
                </div>
              </div>
            </div>
            <div className="form-group">
              <textarea
                name="message"
                id="message"
                className="form-control"
                rows="4"
                placeholder="Message"
                required
                onChange={handleChange}
              ></textarea>
              <p className="help-block text-danger"></p>
            </div>
            <div id="success"></div>
            <button type="submit" className="btn btn-custom btn-lg">
              Send Message
            </button>
          </form>
        </div>
      </div>
     </div>
     </div>
     

Background

I’m migrating a complex multi-page application from Webpack to Vite. Each HTML file has a corresponding .ts script, and the files live in nested directories.

Note: These entry HTML and TS files do not refer to each other (Webpack automate this injection)

src/
  index.html
  index.ts
  user/login/index.html
  user/login/index.ts
  admin/dashboard.html
  admin/dashboard.ts

Goal:

• Automatically inject the matching .ts script into each HTML file
• Preserve the nested folder structure in the final release/ build
• Output HTML and JS like:

release/
  index.html
  user/login/index.html
  admin/dashboard.html
  scripts/
    index.js
    user/login/index.js
    admin/dashboard.js

What I’ve tried:

I used vite-plugin-html and vite-plugin-html-template-mpa with a list of page definitions. I also defined the input entries using .ts files.

However:

• The HTML files were either flattened (e.g. dashboard.html instead of admin/dashboard.html)
• Or they didn’t get emitted at all
• Script injection was inconsistent or missing

This is my vite.config.js

import { defineConfig } from "vite";
import path from "path";
import htmlTemplateMpa from "vite-plugin-html-template-mpa";

const pages = [
  "index",
  "user/login/index",
  "admin/dashboard"
];

export default defineConfig(() => {
  const entries = pages.reduce((acc, page) => {
    acc[page] = path.resolve(__dirname, `src/${page}.ts`);
    return acc;
  }, {});

  return {
    build: {
      outDir: "release",
      rollupOptions: {
        input: entries,
        output: {
          entryFileNames: "scripts/[name].js",
          chunkFileNames: "scripts/chunks/[name].js",
          assetFileNames: "assets/[name].[ext]"
        }
      }
    },
    plugins: [
      htmlTemplateMpa({
        pages: pages.map((page) => ({
          template: `src/${page}.html`,
          entry: `${page}.ts`,
          filename: `${page}.html`
        })),
        minify: true
      })
    ]
  };
});

Problem

• The HTML files are not included in the output directory at all.
• The corresponding .ts files build correctly and show up in release/scripts, but no HTML.
• If I change the input to use .html, then no JS is injected.

How can I configure Vite to:

• Use my .html files as templates
• Inject the matching .ts entry automatically
• Preserve the nested folder structure in the final build output

I’m trying to return a range I’ve gotten results with via cell formula with the app script equivalent so I can in turn overwrite the array with different values.

This is the formula I’m using which returns the correct range:

=FILTER( FILTER($10:$500, Beginning_Date <= Date_Range, End_Date >= Date_Range, Jobs_Range=Job), Employee_Name = Names_Range)

What this does is create an array by searching the rows of Date and Job ranges where conditions are True to return a range of columns, before being filtered a 2nd time on Names in a column to return the correct row.

How can I implement something that will return the resulting array in Apps Script?

function onOpen() {
    var ui = SpreadsheetApp.getUi();
    var menu = ui.createMenu('Replace Projected Hours')
    menu.addItem("Replace Hours","ReplaceProjectedHours").addToUi();
}

function ReplaceProjectedHours() {
  const ss = SpreadsheetApp.getActive();
  const sn = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Projected Hours');
  const sheetrange = sn.getRange("$1:$500").getValues();

  const dateRangeBeginning = ss.getRangeByName("Date_Range_Beginning").getValue();
  var dateRangeBeginningNumber = dateRangeBeginning.getTime()/1000/86400 + 25569;
  
  const dateRangeEnd = ss.getRangeByName("Date_Range_End").getValue();
  var dateRangeEndingNumber = dateRangeEnd.getTime()/1000/86400 + 25569;

  const daterange = ss.getRangeByName("Date_Support_Range").getValues();
  //Logger.log(Array.isArray(daterange));
  var dateCriteria = SpreadsheetApp.newFilterCriteria().whenNumberBetween(dateRangeBeginningNumber,dateRangeEndingNumber);
  var dateFilter = daterange.filter(function(d){return d[1]==dateCriteria});
  Logger.log(dateFilter);
  Logger.log(Array.isArray(dateFilter));

  var employeeName = ss.getRangeByName("Employee_Name").getValues();
  var employeeNameRange = ss.getRangeByName("Employee_Names_Range").getValues();
  //var employeeCriteria = employeeNameRange.getValues(employeeName);
  var employeeFilter = employeeNameRange.filter(function(e){return e[1]==employeeName})
  Logger.log(employeeFilter);
  Logger.log(Array.isArray(employeeFilter));

  const job = ss.getRangeByName("Job").getValue();
  const jobNameRange = ss.getRangeByName("Job_Names_Range").getValues();
  //var jobCriteria = SpreadsheetApp.newFilterCriteria().jobNameRange.getRange().getValues(job);
  var jobFilter = jobNameRange.filter(function(j){return j[1]==job});

  const projectedHoursPerWeek = ss.getRangeByName("Projected_Hours_per_Week").getValues();

  var filteredRowResults = sheetrange.filter(function(r){return r[1]==dateFilter && r[2]==jobFilter &&r[3]==employeeFilter});
  Logger.log(filteredRowResults);
   Logger.log(Array.isArray(filteredRowResults));

  //var filteredColumnResults = filteredRowResults.filter(function(c){return c[1]==employeeFilter});
  
  //var newSheet = ss.insertSheet();
  //newSheet.getRange(2,1,filteredRowResults.length).setValues(filteredRowResults);

  //filteredColumnResults.setValue(projectedHoursPerWeek);
 
  

}

Currently I’m not seeing any results from each individual filter function. They’re returning arrays but no values, and frankly I’m not sure if the filter function is the right tool for the formula equivalent in script.

There is also currently a problem with my dates comparison since I need to change the values from the dateRange into numbers correctly but I think that’s out of scope for this question.

3rd time’s a charm. Let me apologize for not knowing proper StackOverflow etiquette in my previous two question attempts.

I am trying to validate a page. By design, it is allowable for the user to move to the next page of the application when there are invalid fields. Invalid fields need to be completed before a final submit on a subsequent page, but not to just move to the next page.

In addition to the validators, there is a UserControl that displays a validation summary. I am aware of the ValidationSummary control, but I need something different. My UserControl always shows all the items in it. If they are valid, they get a check mark, if not, no check mark.

Most of the validators on my page are plain RequiredFieldValidators. I validate the Textboxes with CustomValidators, using the ClientValidationFunction property.

I think my problem is that when I choose an item from a dropdown, and that server side validation fires, it incorrectly overwrites the client side validation that has already happened on the Textboxes.

How can I correct this behavior? I’ve already tried EnableClientScript=False on the dropdown.

The JavaScript and controls in question are as follows:

function Page_ClientValidate_NoBlock(strGroup)
{
    Page_ClientValidate(strGroup);
    Page_BlockSubmit = false;
}

function Validate_txtSample_CS(sender, args)
{
    args.IsValid = ValidateTextboxContent("<%=txtSample.ClientID%>", "<%=SFRvs.Line11_GreenCheck_ClientID%>");
}

function ValidateTextboxContent(strTextboxID, strGreenCheckID)
{
    var strValue = document.getElementById(strTextboxID).value;
    var booValid = (strValue != null && strValue != "");
    var strStyle;
    if (booValid == true)
        strStyle = 'visible';
    else
        strStyle = 'hidden';

    document.getElementById(strGreenCheckID).style.visibility = strStyle;
    return booValid;
}

<telerik:RadComboBox ID="cbDispo" runat="server" AutoPostBack="true" 
    EmptyMessage="? select"
    EnableVirtualScrolling="true" RenderMode="Lightweight" Width="180"
    OnSelectedIndexChanged="cbDispo_SelectedIndexChanged" >
</telerik:RadComboBox>
<asp:RequiredFieldValidator ID="valDispo" runat="server" 
    ControlToValidate="cbDispo" ValidationGroup="vgPage04" 
    Display="Static" CssClass="cssRF_splat"
    Text="*" ErrorMessage="Employee Disposition" >
</asp:RequiredFieldValidator>

<telerik:RadTextBox ID="txtSample" runat="server" AutoPostBack="false"
    RenderMode="Lightweight" style="max-width:none;" Resize="None" Width="330px"
    OnBlur="Page_ClientValidate_NoBlock('vgPage04');" >
</telerik:RadTextBox>
<asp:CustomValidator ID="valSample" runat="server" 
    ControlToValidate="txtSample"
    ClientValidationFunction="Validate_txtSample_CS" 
    ValidationGroup="vgPage04" ValidateEmptyText="True" 
    Display="Static" CssClass="cssRF_splat" 
    Text="*" ErrorMessage="Part of Body">
</asp:CustomValidator>

In Page_Load, both IsPostBack and !IsPostBack Page_Load call

Page.Validate();

Thanks!

Recently I’ve been working on a drawing web app using React.js and Pixi.js. I’ve encountered a problem with simulating drawing with a “brush” where, if I use a Graphic object and add lines to it for every mouse movement, the lines accumulate and make the app run slow at some point.
So I settled for an approach where instead of drawing every line and keeping it in memory, every line I draw, I clear immediately and the result of the line draw is recorded in a texture of a Sprite element which is then used to add that texture to the texture of a Container. I mimicked this approach from Pixi.js’s official website: Render Texture Advanced.
The code that handles the drawing:

bg // Graphic for input detection
.rect(0, 0, app.width, app.height)
.fill('white')
.on('pointermove', e => {
    const mouse = mousePos(e, app);
    stroke
    .clear()
    .moveTo(last.x, last.y)
    .lineTo(mouse.x, mouse.y)
    .stroke({
        color: 'red',
        width: 4,
        cap: 'round'
     });
const strokeTexture = app.renderer.generateTexture(stroke);
brush.texture = strokeTexture;

brush.position.set(last.x, last.y);

const temp = rt1;
rt1 = rt2;
rt2 = temp;

canvas.texture = rt1;

app.renderer.render({
    container: app.stage,
    target: rt2,
    clear: false
});

last = mouse;

The result of this is a brush stroke that is jagged and the stroke has an irregular path

I’m not sure what’s causing this.

I’ve tinkered a bit by either removing the .moveTo or brush.position.set parts of the code or changing their arguments up, but nothing seems to work.

I am working on an application with electron js which requires system audio to be recorded. I actually want the microphone+system audio just like a screen recorder(I just need audio).
I have researched a lot and found there are limitations in macOS that doesn’t allow capturing system audio. We have to use something like BlackHole.
I don’t want users to install BlackHole or similar to use my app on their system.
There is an app https://www.granola.ai/ which records system audio without BlackHole and yes they are also using electron js.

What I have tried:
Here is my current code which uses ffmpeg to record and save audio.

ipcMain.on('start-recording', () => {
  // save in the current folder
  const outputPath = path.join(app.getAppPath(), `meeting-${Date.now()}.mp3`);
  console.log(`Recording to: ${outputPath}`);

  // Check device indexes from ffmpeg -f avfoundation -list_devices true -i ""
  ffmpegProcess = spawn('ffmpeg', [
    '-f',
    'avfoundation',
    '-i',
    '1:0', // 1:0 = mic + system audio, tweak as needed
    '-acodec',
    'libavdevice',
    '-q:a',
    '4',
    outputPath,
  ]);

  ffmpegProcess.stderr.on('data', (data: any) => {
    console.log(`[ffmpeg] ${data}`);
  });

  ffmpegProcess.on('close', (code: any) => {
    console.log(`ffmpeg exited with code ${code}`);
    mainWindow?.webContents.send('recording-complete', outputPath);
  });
});

ipcMain.on('stop-recording', () => {
  console.log('stop-recording--2', ffmpegProcess);
  if (ffmpegProcess) {
    console.log('stop-recording');
    ffmpegProcess.stdin.write('q'); // Graceful stop
    ffmpegProcess.stdin.end();
    ffmpegProcess = null;
  }
});

I am trying to delete all the data points that are associated with a particular email Id, but I am encountering the following error.

source code:

app.get('/cleanUpResources', async (req, res) => {
    const _id = req.query.email;
    const embeddings = new VertexAIEmbeddings({
        model: "text-embedding-004",
    });

    const vectorStore = await QdrantVectorStore.fromExistingCollection(embeddings, {
        url: <url>,
        apiKey: <api-key>,
        collectionName: 'pdf-docs',
    });

    // Delete all points with payload field 'id' equal to req.body.email
    await vectorStore.delete({
        filter: {
            must: [
                {
                    key: "id",
                    match: { value: JSON.stringify(_id) },
                },
            ],
        },
    });

    return res.json({ message: `Deleted all points with id: ${id}` });
})

Error:

Error: Bad Request
    at Object.fun [as deletePoints] (file:///C:/Users/abhis/OneDrive/Desktop/PROJECTS/PDF-RAG/server/node_modules/@qdrant/openapi-typescript-fetch/dist/esm/fetcher.js:169:23)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async QdrantClient.delete (file:///C:/Users/abhis/OneDrive/Desktop/PROJECTS/PDF-RAG/server/node_modules/@qdrant/js-client-rest/dist/esm/qdrant-client.js:628:26)
    at async QdrantVectorStore.delete (file:///C:/Users/abhis/OneDrive/Desktop/PROJECTS/PDF-RAG/server/node_modules/@langchain/qdrant/dist/vectorstores.js:140:13)
    at async file:///C:/Users/abhis/OneDrive/Desktop/PROJECTS/PDF-RAG/server/app.js:73:5

qDrant DB Collection structure:

metadata: {
"source":"uploads1753380027445-401326695-CT20244465298_Appl…"
"pdf":{}
"loc":{}
"id":"<email_address>"
}

I have also gone through the documentation but not able to debug this.
https://v03.api.js.langchain.com/classes/_langchain_qdrant.QdrantVectorStore.html#delete

https://qdrant.tech/documentation/concepts/points/#delete-points

I want to show dialog box with custom message on unload. the behavior is inconsistent.

  // Handle browser tab close or refresh
  useEffect(() => {
    const handleBeforeUnload = (e) => {
      e.preventDefault();
      e.returnValue = '';
    };
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, []);