RxJS@6 fromFetch with catchError does not catching the errors

I wanted to use the fromFetch method from RxJS in vanilla JS to improve pure fetch calls in legacy code.

It looks like this:

fromFetch(`${requestUrl}`, {
  method: 'GET',
  headers: {
    Authorization: `Bearer ${token}`
  },
  selector: (response) => response.json(),
}).pipe(
  catchError((err) => {
    // Do something with the error, then throw a custom error:
    return throwError('My Custom Error Message');
  }),
);

And in the place where I subscribe to this looks like:

observable.subscribe({
  next: () => {},
  error: () => {
    // Handle errors
  },
});

After all these error handling, sometimes (I have no idea why), but error message appears on the screen:
enter image description here

How should I catch the error from the fetch? Maybe the error is coming from the selector: (response) => response.json() and I should move it out and handle the error there?

how to horizontally Scrolling to specfic point in a slider

I’m creating a piano key style slider where once an element is clicked its grows in width. This creates a problem where if i click an item that is close to the edges of the screen or is already being cut of by the edge, the content is out of view and the user needs to scroll left or right to see the content.

My question is this: Is there a way to get an element in a slider, once, clicked, to move to a specific point past the left edge of the screen? For example have it position itself (with smooth transitions) 50px to the right of the far left edge of the screen?

this is what I’ve tried


<div id="slider-container">
  <div class="slider-content">
      <div class="cards-wrapper" id="card-wrapper">
        <div class="card slide-1 ">
          <div class="card-content">
          <div class="slider-hidden-text">
            content goes here
          </div>
        </div>
      </div>
  </div>


  <div class="slider-controls-wrapper">
    <div class="controls">
      <img id="left-arrow" src="">
      <img id="right-arrow" src="">        
    </div>    
  </div>
</div>

Javascript:


const buttonRight = document.getElementById("right-arrow");
const buttonLeft = document.getElementById("left-arrow");
const slider = document.getElementById("card-wrapper");
const sliderCards = document.querySelectorAll('.card');buttonLeft.addEventListener("click", ()=> {
    slider.scrollLeft -= 400;
});buttonRight.addEventListener("click", ()=> {
    slider.scrollLeft += 400;
});sliderCards.forEach((item) => {
    item.addEventListener('click', () => {
             if (item.classList.contains('active')) {
                  item.classList.remove('active')             }
                 else {
                    document.querySelectorAll('.card').forEach((el) => {
                    el.classList.remove('active');
                    });                    item.classList.add('active');
                    item.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});                 };
            });    });

Puppeteer page evaluate with node-html-parser

I am using puppeteer to automate-test a page, yet I want to do the DOM parsing with the npm node-html-parser, here is a sample code :

var { parse }    = require( 'node-html-parser');
const puppeteer = require('puppeteer');

var browser = await puppeteer.launch({ headless:true,
executablePath: chromium.path
});

const page = await browser.newPage();
await page.goto(myURL, {timeout: 0, waitUntil: 'domcontentloaded'});
var domm = await page.evaluate(() => { return document.querySelector('*').outerHTML.toString() });
const dom = parse(domm);

console.log(dom.querySelectorAll('div.myClass div')[0].querySelectorAll("a")[0].href); //this returns error or null

so when I parse it through puppeteer, the .href attribute doesn’t work. Normally it does.
If I try to log the anchor tag, I get something like the following

console.log(dom.querySelectorAll('div.myClass div')[0].querySelectorAll("a")[0]); 

...more stuff above
  childNodes: [
    HTMLElement {
      parentNode: [Circular *1],
      childNodes: [Array],
      rawAttrs: 'class="clickOn"',
      voidTag: [VoidTag],
      nodeType: 1,
      rawTagName: 'span',
      id: '',
      _parseOptions: {},
      classList: [DOMTokenList]
    }
  ],
  rawAttrs: 'class="clickOn" href="/clickedPath"',                  
  voidTag: VoidTag {
    addClosingSlash: false,
    voidTags: Set(28) {
      'area',
      'AREA',
      'base',
      'BASE',
...more stuff down below

If i try to log the rawAttrs, i get this like below

console.log(dom.querySelectorAll('div.myClass div')[0].querySelectorAll("a")[0].rawAttrs) //output below 

class="clickOn" href="/clickedPath"

So it means that the parser somehow fails to parse some attributes when I am passing through evaluation of puppeteer.. I need to use the parser for performance for later use. How can I parse the .href or what is called rawAttrs with this parser, or somehow fix it through the puppeeteer ?

Angular Okta-SignIn-Widget – observe event or hook when Allowed into an application or not

Right now, everything is working great – just need to be able to subscribe, or find an event or hook so I can log a successful login vs:

user is not assigned to the client application

Now these both come back from Okta as a success because the user is Authenticated, but not necessarily a user with access to said application. We have users that can be part of one or many applications, my question is:

How do I hook into the widget to whether or not a user has logged in successfully, and is there a way to tell if this error pops up (ie not allowed to use said Okta application)?

Object.FromEntries is not creating json array as it is supposed to

Im working on a webscraper in Node.js and trying to create a JSON array from it.
Ive created a map in the way it is explained in the documentation like this:

// GET ALL TEXT VALUES
    const innerTexts = await page.evaluate(
      () => {
        const nodes = [...document.querySelectorAll('.result-page-list-results #wt-watches .article-item-container.article-image-carousel')];
        const texts = nodes.map(node => [
          ['title', node.querySelector('.article-item-container > a > div > .text-sm.text-sm-md')?.innerText.trim()],
          ['reference', node.querySelector('.article-item-container div div .text-sm.text-sm-md.text-bold')?.innerText.trim()],
          ['price', node.querySelector('.article-item-container > a > div > .d-flex.justify-content-between > div > .text-bold')?.innerText.trim()],
          ['shipping', node.querySelector('.article-item-container > a > div > .d-flex.justify-content-between > div > .text-muted')?.innerText.trim()],
          ['location', node.querySelector('.article-item-container > a > div > .d-flex.justify-content-between > div > button > span')?.innerText.trim()],
          ['images', node.querySelector('.article-item-container > a img').getAttribute("src").trim()],
          ['link', 'https://www.chrono24.nl' + node.querySelector('.article-item-container > a').getAttribute("href").trim()],
          ['shop', 'Chrono24'],
        ]);
        return texts;
      }
    );

This correctly forms the array and it looks the way I need it to convert it into a json array. I then use Object.FromEntries to create a json array from it. As you can see, it does not translate correctly and almost looks like it just ignores some quote marks and skips most of the data.
Does anybody know why this happens?

{
  'title,SBGE285 Mistflake': [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  'title,SBGE285': [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  'title,Spring drive SBGE285 (NEW)': [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  'title,Spring Drive GMT SBGE285': [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  'title,SBGE285 Grand Seiko Evolution 9 Collection 9R66 NEW watch': [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  'title,Spring Drive GMT Ref SBGE285': [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  'title,Spring drive watch SBGE285': [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  'title,Spring drive SBGE285 SBGE285G': [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  "title,Spring drive men's watch SBGE285": [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  'title,41mm Titanium Case Silver Dial Titanium Bracelet SBGE285 NEW - Warranty: 2024': [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  'title,Spring Drive': [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  'title,Spring Drive GMT Titanium EVOLUTION 9 (SBGE285G)': [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  'title,SBGE285 SBGE285G Spring drive watch': [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  'title,Grand Seiko Evolution 9 Collection': [ 'reference', 'Seiko GS' ],
  'title,SBGE285G': [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  'title,Spring Drive GMT Titanium': [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  'title,"Mistflake" Spring Drive GMT Titanium Caliber 9R66 SBGE285': [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  'title,グランドセイコー エボリューション9 コレクション スプリングドライブ GMT / GRANDSEIKO EVOLUTION 9 COLLECTION SPRINGDRIVE GMT': [ 'reference', 'Seiko GS' ],  
  'title,Spring Drive SBGE285': [ 'reference', 'Grand Seiko Evolution 9 Collection' ],
  'title,Spring Drive GMT': [ 'reference', 'Grand Seiko Evolution 9 Collection' ]
}

I tried cleaning up the values with trim() and deleting breaks but this has not worked. I am using Puppeteer to do the scraping.

How To Dismiss Parent Navigator In React Native?

I have a layout as per the below;

const CheckoutStack = createNativeStackNavigator();
export default function CheckoutLayout() {
  return (
    <CheckoutStack.Navigator
      initialRouteName="Checkout"
      screenOptions={{ headerShown: true }}>
      <CheckoutStack.Screen
        name="Checkout"
        component={CheckoutScreen}
        options={{
          headerShadowVisible: false,
          headerTitle: "",
          headerRight: () => <CloseButton />,
        }}
      />
      <CheckoutStack.Screen
        name="PaymentSuccess"
        component={PaymentSuccessScreen}
        options={{
          headerShown: false,
          presentation: "fullScreenModal",
        }}
      />
    </CheckoutStack.Navigator>
  );
}

I am currently in the PaymentSuccessScreen and I want to dismiss both the current screen AND the CheckoutScreen. Essentially dismiss the CheckoutLayout. How do I do this?

I have tried;

navigation.dispatch(StackActions.pop(2));
navigation.dispatch(StackActions.popToTop());

Here is how I present the CheckoutLayout;

  <AuthorizedStack.Screen
    name="CheckoutLayout"
    component={CheckoutLayout}
    options={{
      presentation: "fullScreenModal",
      headerShown: false,
    }}
  />

ReferenceError: “y” is not defined [closed]

so i was following this tutorial (https://www.youtube.com/watch?v=JEEcbVjLyr0&list=PLpmb-7WxPhe0ZVpH9pxT5MtC4heqej8Es&index=7) and i had an issue

code :

const fs = require('fs');
const path = require('path');

module.exports = (directory, foldersOnly = false) => {
   let fileNames = [];

   const files = fs.readdirSync(directory, { withFileTypes: true });

   for (const file of files) {
    const filePath = path.join(directory, file.name);

    if (foldersOnly) {
        if (file.isDirectory()) {
            fileNames.push(filePath)
        }
    } else {
        if (file.isFile()) {
            fileNames.push(filePath)
        }
    }
   }

   return fileNames;
}

error :

there was an error: ReferenceError: getAllFiles is not defined 

To validate the dropdown fields of multiply rendered single component

I have a component say return card
in which i have used two custom dropdown components

Also I am using return card component in page

We are using vee-validate to validate forms

I am using two variable to assign the defineComponentBinds for field reference and passing it to the return card component

The problem is :

I am rendering the return card component using v-for
when validated it is applying for all components, even trying with index
it must apply only to those selected one and also the dropdown to those selected one

Project: nuxt3

Thanks!

I am using two variable to assign the defineComponentBinds for field reference and passing it to the return card component

The problem is :

I am rendering the return card component using v-for
when validated it is applying for all components, even trying with index
it must apply only to those selected one and also the dropdown to those selected one

How do I fix a PostgreSQL 46201 error (for complex queries) once I have seeded the database with data (in JavaScript) (GET Request)

I am trying to some complex queries in my bird database to get all the birds back but I want to be able to use queries in the url to get back by diet and to sort accordingly. See the Insomnia images below:

1st query: GET request: localhost:3000/api/birds?sort_by=weight_g&diet=carnivorous

enter image description here

2nd query: GET request localhost:3000/api/birds?diet=piscivorous&sort_by=wingspan_cm&order=DESC

enter image description here

Now I will show you the Javascript code. Error handling has been left out until I get the basics done. I can successfully seed the database and get nodemon up and running. And when I connect to the database using psql and c and execute the inner join query (scroll down to see query) with the tables I get rows of the results back with not error. The error is coming for the express request/response cycle as you saw in the Insomnia images above.

//app.js
app.use((req, res, next) => {
    console.log('Request method: ', req.method);
    console.log('Request url: ', req.url);
    let currentdate = new Date(); 
    let datetime = `Date and time request method made(format:day/month/year|hours:minutes:seconds): ${currentdate.getDate()}/${(currentdate.getMonth()+1)}/${currentdate.getFullYear()}|${currentdate.getHours()}:${currentdate.getMinutes()}:${currentdate.getSeconds()}`
    console.log(datetime)
    next()
  });

const {getAllBirds} = require('./controllers/birds.controller.js')
const express = require('express');
const app = express();
app.use(express.json())
app.get('/api/birds',getAllBirds)

//birds.controller.js
const {selectAllBirds} = require('../models/birds.models.js')

exports.getAllBirds = (req,res) =>{
 const {order} = req.query
 const {sort_by} = req.query
 const {diet} = req.query
 selectAllBirds(sort_by,order,diet).then((birds)=> res.status(200).send({birds})).catch(err => console.log(err))
}

//bird.models.js

const db = require('../db/index.js')

exports.selectAllBirds = (sort_by,order,diet) =>{
    const sortbyGreenList = ['length_cm,','weight_g','wingspan_cm']
    const orderbyGreenList = ['ASC,DESC']
    let queryValues = [];
    let queryStr = `SELECT bird_id,common_name,species_name,wing_colour,diet,can_Fly
    ,length_cm,weight_g,lay_season,fun_fact,wingspan_cm,f_id FROM birds
     INNER JOIN bird_families ON birds.f_id = bird_families.family_id`;

    if(sort_by && !sortbyGreenList.includes(sort_by)){
        return Promise.reject({status: 400, msg: 'Invalid sort_by query string'})
    }

    if(order && !orderbyGreenList.includes(order.toUpperCase())){
        return Promise.reject({status: 400, msg: 'Invalid order query string'})
    }
   
    if(diet){
        queryValues.push(`%${diet}%`)
        queryStr += `WHERE diet ILIKE $1`;
    }

    if(sort_by){
        if(!queryValues.length){
            queryValues.push(sort_by)
            queryStr += `ORDER BY $1`;
        }else{
        queryValues.push(sort_by)
        queryStr += `ORDER BY $2`;  
        } 
    }

    if(order){
        queryStr += `${order.toUpperCase()}`;
    }

    return db.query(queryStr,queryValues).then((result)=>{
        if(!(result.rows.length)){
            return Promise.reject({status: 404, err: 'No results found for query'})

        }else{
            return result.rows
        }
    })
}

I get these errors in the terminal when I try to the GET requests above that you saw in the Insomnia images

Error with 1st query: GET request: localhost:3000/api/birds?sort_by=weight_g&diet=carnivorous

Request method:  GET
Request url:  /api/birds?sort_by=weight_g&diet=carnivorous
Date and time request method made(format:day/month/year|hours:minutes:seconds): 22/2/2024|11:21:1
/home/mbans8a1/Northcoders/northcoders/projects/bird_rookery_project/node_modules/pg-pool/index.js:45
    Error.captureStackTrace(err);
          ^

error: syntax error at or near "diet"
    at /home/moddy456/Programs/program/projects/bird_rookery_project/node_modules/pg-pool/index.js:45:11
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  length: 94,
  severity: 'ERROR',
  code: '42601',
  detail: undefined,
  hint: undefined,
  position: '213',
  internalPosition: undefined,
  internalQuery: undefined,
  where: undefined,
  schema: undefined,
  table: undefined,
  column: undefined,
  dataType: undefined,
  constraint: undefined,
  file: 'scan.l',
  line: '1176',
  routine: 'scanner_yyerror'
}

Error with 2nd query:/api/birds?diet=piscivorous&sort_by=wingspan_cm&order=DESC

Request method:  GET
Request url:  /api/birds?diet=piscivorous&sort_by=wingspan_cm&order=DESC
Date and time request method made(format:day/month/year|hours:minutes:seconds): 22/2/2024|11:49:50
{ status: 400, msg: 'Invalid order query string' }

Any ideas of how I can fix these problems?

Next.js Forms Work Locally but Fail on cPanel Deployment

If both forms in my Next.js application are functioning properly with Nodemailer locally, but upon deployment to cPanel, I encounter an “Internal Server Error” when attempting to submit the forms, how can I resolve this issue? Despite attempting various solutions, the problem persists. As a newcomer to Next.js, I’m struggling to find helpful resources.

The error message I receive is:

POST https://mydomain/api/sendContact 500 (Internal Server Error)

Could someone provide guidance on how to troubleshoot and fix this issue? Any insights or suggestions would be greatly appreciated.

Jest with Node.js : “TypeError: Cannot assign to read only property ‘getCustomerSync’ of object ‘[object Module]'”

I aimed to conduct a unit test for a function, applyDiscount(), while avoiding reliance on external sources. To achieve this, I employed a mock function. Please help me to find out this error : “TypeError: Cannot assign to read only property ‘getCustomerSync’ of object ‘[object Module]'”. Here’s my code :

db.js file:
----------
const getCustomerSync = (id) => { // synchronous function
    console.log('Reading a customer from MongoDB...');
    return { id: id, points: 11 };
}
const getCustomer = (id) => { // asynchronous function
    return new Promise((resolve, reject) => {
      console.log('Reading a customer from MongoDB...');
      resolve({ id: id, points: 11 });
    });
}
export { getCustomer, getCustomerSync };

lib.js file:
---------
import * as db from "./db.js";
const applyDiscount = (order) => {
  const customer = db.getCustomerSync(order.customerId); // fake external ressource

  if (customer.points > 10)
    order.totalPrice *= 0.9; // 10% discount
}

lib.test.js file:
---------------
describe("applyDiscount", () => {
    it("should apply 10% discount if customer has more than 10 points", () => {
        const mockFunction = jest.fn();
        db.getCustomerSync = mockFunction.mockReturnValue({ id: 1, points: 20 });

        const order = { customerId: 1, totalPrice: 10 };
       applyDiscount(order);
       expect(order.totalPrice).toBe(9)
    });
});

package.json file :
-------------------
{
  "name": "testing-demo",
  "version": "1.0.0",
  "description": "Automates unit test",
  "main": "db.js",
  "type": "module",
  "scripts": {
    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^29.7.0"
  }
}

how can i set a marker tool as default selected in markerjs library

i am using the library markerjs (https://markerjs.com/docs/events/) for doing annotation over an image and i am not sure how to make the freehand drawing tool as default selected because right now the select mode tool comes as autoselected does anyone have any idea about it?

I have gone through the documentation and i found the below given constructor but i am not sure how to use it tried it like markerArea.setActiveMarkerButton(“FreeHandMarker”) but this doesn’t work
setActiveMarkerButton
setActiveMarkerButton(typeName: string): void
Selects toolbar button for a specified marker type.

since
2.17.0

Parameters
typeName: string
Marker type name

Returns void
i found the above constructor in the document below
https://markerjs.com/reference/classes/toolbar#setactivemarkerbutton