How can the logging of HTTP 401 errors in Bugsnag be prevented in a NuxtJS project?

I am working on a Nuxt.js project and I have integrated Bugsnag for error monitoring and reporting. However, I want to exclude logging HTTP 401 errors in Bugsnag. To achieve this, I have implemented the @bugsnag/plugin-vue and made modifications to the Bugsnag configuration file as shown below:

import Vue from 'vue';
import Bugsnag from '@bugsnag/js';
import BugsnagVue from '@bugsnag/plugin-vue';

const bugsnagClient = Bugsnag.start({
    apiKey: process.env.BUGSNAG_KEY,
    plugins: [new BugsnagVue()],
    onError: function (event) {
        // Don't log failed authorization errors.
        return event.errors[0].status !== 401 || event.errors[0].errorMessage?.includes('401');
    }
});

const bugsnagVue = Bugsnag.getPlugin('vue');
bugsnagVue.installVueErrorHandler(Vue);

export default (ctx, inject) => {
    inject('bugsnag', bugsnagClient);
};

Unfortunately, this solution is not working as expected. The HTTP 401 errors are still being logged in Bugsnag. Could someone please guide me on how to properly prevent logging HTTP 401 errors in Bugsnag using the @bugsnag/plugin-vue in a Nuxt.js project?

Thank you in advance for your help!

why does including html files not working properly

Including of html pages to another html pages. It is working properly but the problem is it does not include files immediately when we run the program or when we refresh or when we enter to the next page it is taking time to include the files for about
2-3seconds. You can Re-load the page to check this issue
Can anyone solve this problem .

Here is the code:-
HTML code:

`

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- To includ meta links and css files -->
    <meta include-html="include/links.html">
    
    <script src="js/include.js"></script>
</head>

<body>
    <!-- To includ header -->
    <div include-html="include/navbar.html"></div>
    <h2 class="p-5">This files are including but it is not working immediately it takes 2-3seconds of time to load the css files and bootstrap files.
    </h2>
    <h4 class="p-5"> You can Re-load the page to check this issue <br> Please check this.</h4>
     <!-- To include footer -->
    <div include-html="include/footer.html"></div>
    
    <script>
        includeHTML();
    </script>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
        crossorigin="anonymous"></script>
</body>

</html>

style.css:

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    font-family: 'poppins';
}

.nav-item .nav-link
{
    color: red;
}
.nav-item .nav-link.active
{
    color: blue;
}
.logo-space
{
    margin-right: 10px;
}

Included Header Footer and Meta links and css files:
navbar.html:

<nav class="navbar navbar-expand-lg bg-white  shadow">
  <div class="container font-Nunito">

    <a class="navbar-brand" href="index.html">
      <!-- <img src="images/icons-2/outdoor.png" alt="logo" > -->
      <i class="fab fa-joomla logo-space"></i>Logo
    </a>

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
      data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
      aria-label="Toggle navigation"><span class="fas fa-bars"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item"><a class="nav-link " href="#">About Us</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">Products<i class="arrow down"></i></a>
          <div class="dropdown-menu dropdown-menu-right fade-down" aria-labelledby="navbarDropdownPortfolio">
            <a class="dropdown-item" href="#">product-1</a>
            <a class="dropdown-item" href="#">product-2</a>
          </div>
        </li>
       
        
      </ul>
    </div>
  </div>
</nav>

footer.html:

<footer class="footer bg-dark p-5">
    <div class="container ">
        <div class="copyright">
            <div class="row">
                <div class="col-md-12 text-center text-light text-md-start mb-3 mb-md-0">
                    &copy; <a class="border-bottom text-light" href=""
                        target="_self">www.abc.in</a>, All Right
                    Reserved.Designed By <br> <a class="border-bottom text-light" target="_blank"
                        href="">XYZ Technologies</a>
                </div>
            </div>
        </div>
    </div>
</footer>

links.html:

    <!-- Basic -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <!-- Site Metas -->
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Title bar -->
    <title>Document</title>

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css"    rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">


    <!-- Template Stylesheet -->
    <link href="css/style.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

this is js file-include.js:

// include
function includeHTML() {
    var z, i, elmnt, file, xhttp;
    /*loop through a collection of all HTML elements:*/
    z = document.getElementsByTagName("*");
    for (i = 0; i < z.length; i++) {
      elmnt = z[i];
      /*search for elements with a certain attribute:*/
      file = elmnt.getAttribute("include-html");
      if (file) {
        
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4) {
            if (this.status == 200) {elmnt.innerHTML = 
this.responseText;}
            if (this.status == 404) {elmnt.innerHTML = "Page not 
found.";}
            /*remove the attribute, and call this function once more:*/
            elmnt.removeAttribute("include-html");
            includeHTML();
          }
        }      
        xhttp.open("GET", file, true);
        xhttp.send();
        /*exit the function:*/
    return;
  }
}

};

React-toastify does not slide down smoothly off the screen

I am able to render the react-toastify. However, the problem I am facing is that the toasts do not slide down the screen completely smoothly. I am using cssTransition for animation. The toast folds and does slide off the screen.

I am not sure why the toast does not slide off the screen completely.

Code inside App.tsx:

import { ToastContainer, cssTransition } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import "./toastify-custom.css";

const Slide = cssTransition({
  enter: "slideInUp",
  exit: "slideOutDown",
  collapseDuration: 300,
});

return (
  <>
    <ToastContainer
      hideProgressBar={true}
      position="bottom-center"
      transition={Slide}
      icon={false}
      closeButton={false}
      autoClose={2000}
      pauseOnHover={false}
  />


Code toastify-custom.css:

/* Custom animation */
@keyframes slideInUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slideOutDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%) ease-out;
  }
}

.slideInUp {
  animation-name: slideInUp;
  animation-duration: 300ms;
}

.slideOutDown {
  animation-name: slideOutDown;
  animation-duration: 300ms;
}

Confused about React mapping

I am currently learning react and I am confused about mapping components/props. While I generally understand the concepts one thing that is challenging me right now is understanding naming conventions for {props.xxx.dataname} I don’t understand the naming convention and how the xxx part is called. Sometimes it can be called item or product and it is never declared in the code itself anywhere. This example i listed is stumping me and I don’t understand how item registers as anything when it has not been declared.

Please explain this to me, especially this code here “item={item}”. Item is never declared so how does this code know to find “Item” from the 3rd code snippet holding the data.

import React from "react"

function TodoItem(props) {
    return (
        <div className="todo-item">
            <input type="checkbox" checked={props.item.completed}/>
            <p>{props.item.text}</p>
        </div>
    )
}

export default TodoItem
import React from "react"
import TodoItem from "./TodoItem"
import todosData from "./todosData"

function App() {
    const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)
    
    return (
        <div className="todo-list">
            {todoItems}
        </div>
    )
}

export default App
const todosData = [
    {
        id: 1,
        text: "Take out the trash",
        completed: true
    },
    {
        id: 2,
        text: "Grocery shopping",
        completed: false
    },
    {
        id: 3,
        text: "Clean gecko tank",
        completed: false
    },
    {
        id: 4,
        text: "Mow lawn",
        completed: true
    },
    {
        id: 5,
        text: "Catch up on Arrested Development",
        completed: false
    }
]

export default todosData

When i am hovering the element (.box) that is just below the element(.box) then only the above box is hovered ? I am not able to understand

Here is CodePen link
Please check it

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="custom.css">
    <script src="app.js"></script>
</head>
<body>
    <div class="main">
        <div class="row">
            <input type="search" id="search" autofocus autocomplete="off" placeholder="Search...">
        </div>
        <div class="row" id="moviebox">
            <div class="box">
                <img src="https://picsum.photos/400/500" alt="">
                <div class="overlay">
                    <div class="title">
                        <h2>Title</h2>
                        <span>8.2</span>  
                    </div>
                    <h3>Overview:</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit explicabo voluptates et!</p>
                </div>
            </div>
            <div class="box">
                <img src="https://picsum.photos/400/500" alt="">
                <div class="overlay">
                    <div class="title">
                        <h2>Title</h2><span>8.2</span>  
                    </div>
                    <h3>Overview:</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit explicabo voluptates et!</p>
                </div>
            </div>
            <div class="box">
                <img src="https://picsum.photos/400/500" alt="">
                <div class="overlay">
                    <div class="title">
                        <h2>Title</h2><span>8.2</span>  
                    </div>
                    <h3>Overview:</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit explicabo voluptates et!</p>
                </div>
            </div>         
        </div>
    </div>
</body>
</html>

CSS code

.main{
    border: 2px solid magenta;
    background-color: #bebdbd;
    position: absolute;
    width: 30vw;

    display:grid;
    flex-direction: column;
}

*{
    margin: 0;
    padding: 0;
}
.box{
    /* border: 2px solid black;  */
    overflow: hidden;
}
.box img{
    width: 200px;
    border-radius: 4px;
}

.main .box:hover .overlay{
    height: 100px;
    /* position: absolute; */
    z-index: 999;
    top: 0.5%;
    transition-delay:0s;
    transition-timing-function: linear;
    transition-duration: 300ms;
}

.overlay{
    position: absolute;
    top: -11%;
    background-color: #ffffff4e;
    width: 190px;
    height: 0px;
    overflow: hidden;
    padding: 5px;
    backdrop-filter: blur(16px);
}

#moviebox{
    position: relative;
    /* border: 2px solid red; */
    height: fit-content;
    width: 100%;
    display: flex;
    gap: 1rem;
    overflow: hidden;
    flex-wrap: wrap;
    padding: 5px;

}

#search{
    border: none;
    margin: 5vh 0vw 5vh 4vw;
    height: 5vh;
    width: 30vw;
    border-radius: 3px;
    padding-left: 2%;
    background-color: #949292;
    color: white;
    outline: none;
    font-size: 23px;
}

I was trying to make the overlay come on the top of each image element on hovering the image element.
But when i hover the image elements that are below the top elements then top elements are hover triggered , i was expecting that each element will show overlays on hovering the corresponding box element .

“new operator” on bound function invoked by Method and Function

forgive my bad english…

I use new operator of the bound function in different way like

function foo() {
  console.log("foo", this);
}

const obj1 = { a: 1 };

function bar() {
  return foo.bind(obj1);
}

var obj2 = { b: 2, foo: bar() };

new obj2.foo(); // foo foo {}
new bar()(); // foo { a: 1 }

And

  1. the console.log of foo in obj2.foo() is foo foo {}
  2. the console.log of foo in bar()() is foo { a: 1 }

The question is I don’t understand why the this of obj2.foo() when I use new operator is an empty Object?

I have read the new operator of MDN docs , but still can’t get it.

How to install yarn package on VS code?

As I am running the corepack enable it is showing me
Internal Error: EACCES: permission denied, symlink ‘../lib/node_modules/corepack/dist/pnpm.js’ -> ‘/usr/local/bin/pnpm’
Error: EACCES: permission denied, symlink ‘../lib/node_modules/corepack/dist/pnpm.js’ -> ‘/usr/local/bin/pnpm’

I am expecting the command to initiate and the yarn package get installed further by running
yarn –version.

How to check the axios preflight system?

This might a bit misteryous problem.

Program One, It’s a long code so, I excerpt the place where error occurs.

//....
////do something with axios and same code as program one///

const fileUrl = "https://myexample-dev-bk.s3.ap-northeast-1.amazonaws.com/test0.png";
        
let headers = new Headers();
headers.append("Content-Type", "image/png");
fetch(fileUrl,{mode: "cors",headers: headers})
    .then(response => response.blob())
    .then(blob => new File([blob], "image.jpg"))
    .then(file => {
       console.log("getfile");
    });

This shows the error like No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

So, I cut out only this code for debugging purpose, make the page which uses only this funciton.

Program Two

class TestPage = () =>{
    useEffect(() => {
        const fileUrl = "https://myexample-dev-bk.s3.ap-northeast-1.amazonaws.com/test0.png";
            
        let headers = new Headers();
        headers.append("Content-Type", "image/png");
        fetch(fileUrl,{mode: "cors",headers: headers})
            .then(response => response.blob())
            .then(blob => new File([blob], "image.jpg"))
            .then(file => {
                console.log("getfile");
            });
    });
    return <div>test</div>
}

Somehow, it works!!! And mysteriously after I run this Program Two, Program One error disappeared.

But When I use another browser, Program One error occurs again (without running Program Two)

I summarize

  • run Program One -> CORS error

  • run Program Two -> run Program One -> Works!

  • but Program One and Two has same code, so code before Program Two has something wrong.

How can I debug this ?

how to move object to an array without changing array property in react native

I am contracting an array to use it in react-native-searchable-dropdown’. I am trying to push my object into an array using the below code. i am facing issue. Please refer below.

let clone=[];
obj={{id:8,name:'Yyff'},{id:8,name:'Yyff'},{id:7,name:'Hsjdb56'},{id:6,name:'Suku'},{id:5,name:'Jira'},{id:4,name:'Suku '},{id:3,name:'Joseph'},{id:2,name:'Rosh'},{id:1,name:'Zulu'}}

let arr=Object.keys(obj);
for (var j = 0; j < obj.length; j++){
    clone.push(obj[arr[j]);
  }

clone looks like below and clone is also converted into object(This is also a problem).

Array [
  "{id:8,name:'Yyff'}",
  "{id:7,name:'Hsjdb56'}",
  "{id:6,name:'Suku'}",
  "{id:5,name:'Jira'}",
  "{id:4,name:'Suku '}",
  "{id:3,name:'Joseph'}",
  "{id:2,name:'Rosh'}",
  "{id:1,name:'Zulu'}"
]

what i am expecting:

clone=[{id:8,name:'Yyff'},{id:8,name:'Yyff'},{id:7,name:'Hsjdb56'},{id:6,name:'Suku'},{id:5,name:'Jira'},{id:4,name:'Suku '},{id:3,name:'Joseph'},{id:2,name:'Rosh'},{id:1,name:'Zulu'}]

and clone should not be converted to object. SearchableDropdown accepts only array like [{id:1, name:’heat’}].

can anyone please suggest on how to achieve this?. i have tried different ways(like creating one object at a time and pushing into array, using object.assign, using […clone, obj[0]] etc.,). i am not able to achieve what i am expecting.

Laravel- Modal can’t open in safari

i have problem with popup modal in safari one of my client. on other browser all is good, and also i tested on my safari macbook, its also working. I check on they browser, safari javascript is enabled. when click edit button below, it should show the modal, but on they mac its go to homepage

Edit

 <div class="modal fade" id="myModal{{$i}}" tabindex="-1" role="dialog" aria-labelledby="myModal{{$i}}" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                        &times;
                                                    </button>
                                                    <h4 class="modal-title" id="addBranch">Edit Field  </h4>
                                                </div>
                                                <div class="modal-body">
                                                   <form>
                                                    <fieldset>
                                                       
                                                        
                                                    </fieldset>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                                        Cancel
                                                    </button>
                                                    <button type="submit" name="submit" class="btn btn-primary">
                                                        Submit
                                                    </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

how to create external search quick filter and clear button for all rows data can search using single search Ag grid react

I’m new working with Ag grid react how to create external search quick filter outside of ag grid react, user can search all rows ag grid data with the help of single search input and after search user can clear search input values. how to create i have no idea.

I have no idea i am following
ag grid site
but there is no exact search which we want.

About Async and Promise in Javascript

I have some questions about async and promise. (sorry guys I’m newbie at programming)

  1. Can javascript only run functions asynchronously with functions/webAPIs like XMLHttpRequest, DOM, setTimeout, etc?

  2. can we make our own function that runs asynchronously?

  3. If we make a promise function, does it run asynchronously?

// Example, does the code run asynchronously? 
function showText() {
  return new Promise((resolve) => {
    resolve("FROM PROMISE");
  });
}

console.log("HELLO");
showText().then((res) => console.log(res));
console.log("WORLD");

// Output
// HELLO
// WORLD
// FROM PROMISE

// I thought the code run async because the "WOLRD" appears before "FROM PROMISE"
function count() { // imagine this function is heavy and take a time to run it
  return new Promise((resolve, reject) => {
    let num = 0;
    for (let i = 1; i <= 10000000000; i++) {
      num += 1;
    }
    resolve(num);
  });
}

console.log("HELLO");
count().then((res) => console.log(res));
console.log("WORLD");

// Output
// HELLO
// WOLRD
// 10000000000

but why "WORLD" doesn't immediately appear? The "WORLD" appears simultaneously with count function

Thank you in advance

the js code works fine when I manually put it in Chrome dev console and run it but it gives an error when I run it from index.html with the src tag

As you can guess I am a complete beginner. The page has a image carousel that has 2 buttons to move between diffrent images. When I test my website using Brackets live preview, I get this error.
Uncaught TypeError: Cannot read properties of undefined (reading 'style') at showSlide (script.js:15:28) at script.js:24:5

Here’s my code

var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");

    // Function to display the current slide
    function showSlide(n) {
        // Wrap around to the first slide if exceeding the number of slides
        slideIndex = (n + slides.length) % slides.length;

        // Hide all slides
        for (var i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }

        // Display the current slide
        slides[slideIndex].style.display = "block";
    }

    // Function to navigate to the previous or next slide
    function plusSlides(n) {
        showSlide(slideIndex + n);
    }

    // Display the first slide
    showSlide(slideIndex);

the images are not even displaying because the js is not work now

Javascript Front-end is not completing Axios post request

I have a react front-end that is calling my node.js api to get data from a third party API (the third party api only accepts requests from the backend), and my axios.post request stays undefined, also I can’t get pass the asynchronous request, it seems like it’s not telling the front end is resolved or not sending a response.

This is the front end code:

/* eslint-disable import/no-anonymous-default-export */
import axios from "axios";
require("dotenv").config();

let myAPI = axios.create({
  baseURL:"my api url",
});

export default {
  authAPI: async () => {
    try {
      const response = await myAPI.post("auth/token");
      console.log(response);//it never gets to this console
    } catch (error) {
      console.error(error);//it never gets to this console
    }
  },
};

And this is my API code, (the back-end receives a response with status 200 and with all the data I need):

import axios from "axios";
import express from "express";

const app = express();
const port = 3004;

axios.defaults.baseURL = 'third-party API url';
axios.defaults.headers.post['accept'] = 'application/json';
axios.defaults.headers.post['Content-Type'] = 'application/json';

const instancePost = axios.create({
});

app.post('/auth/token', (req,res) => {
  instancePost.post('auth/token', {
    username: 'username',
    password: 'password',
    ttl: '0'
  })
  .then((response) => response)
  .then((response) => {
    console.log('Success!');
  })
  .catch( (error) => {
    error
    console.log('error')
  })
  
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

This is how my network tab looks:
network tab on google chrome developer tools