Blancer.com Tutorials and projects

I have a React app where I have a main component EntireApp, which renders a child component Foo. The Foo component conditionally renders either Bar or Baz based on its iconId prop. However, when the iconId passed to Foo is invalid (for example, something like “foz” sent from the server), the entire application crashes, showing the “Application error: a client-side exception has occurred” error in the browser with a blank screen.

Here’s an MRE

const Bar = () => <div>Bar</div>;
const Baz = () => <div>Baz</div>;

const Foo = ({ iconId }) => {
  const components = [
    { icon: 'Bar', iconId: 'bar', component: Bar },
    { icon: 'Baz', iconId: 'baz', component: Baz },
  ];

  const iconData = components.find(c => c.iconId === iconId);

  /// @ts-ignore // intentionally ignore type to illustrate the issue
  const ComponentToRender:(() => React.JSX.Element) = iconData?.component;
  return <ComponentToRender />;
};

const EntireApp = () => {
  return (
    <div>
      <div>Something more important and healthy component</div>
      <Foo iconId="baz" /> {/* Invalid iconId that should not crash the entire app */}
    </div>
  );
};

How can I prevent the entire React app from crashing when an invalid component is rendered ?

I get

Application error: a client-side exception has occurred while loading
localhost (see the browser console for more information).

And a blank page in prod. I don’t really care about the icon breaking. How to tell React:

Hey, if one component is invalid, do not destroy my entire app. Just don’t render that broken component ?

I tried reactStrictMode: false, in next.config.js but this does nothing.

I also looked all of these, but they talk about the reason of the error, nothing about preventing an entire app crash. Next.js Application error: a client-side exception has occurred (see the browser console for more information)

I have created a carousel slider with swipe function and also with side navigation. But with the side navigation I need to scroll 2 cards per click. And also with the pagination, even though I am with the last slide, the pagination is still on the second last active dot.

Carousel Slider Script

document.addEventListener('DOMContentLoaded', () => {
            const carousel = document.getElementById('promoCarousel');
            if (!carousel) return;

            const viewport = carousel.querySelector('.carousel-viewport');
            const nextButton = carousel.querySelector('.carousel-nav.next');
            const prevButton = carousel.querySelector('.carousel-nav.prev');
            const cards = viewport.querySelectorAll('.card');

            // --- JS-Powered Navigation for CSS Scroll Snap ---
            function updateNavButtons() {
                // Hide/show buttons based on scroll position
                // A small tolerance is added to account for subpixel rendering
                const tolerance = 2;
                prevButton.style.display = viewport.scrollLeft <= tolerance ? 'none' : 'flex';
                const isAtEnd = viewport.scrollLeft + viewport.clientWidth >= viewport.scrollWidth - tolerance;
                nextButton.style.display = isAtEnd ? 'none' : 'flex';
            }

            function scrollCarousel(direction) {
                // Find the width of the first card to determine the scroll amount
                const cardWidth = cards.length > 0 ? cards[0].offsetWidth : 0;
                const scrollAmount = (cardWidth + 12) * direction; // card width + margin
                viewport.scrollBy({ left: scrollAmount, behavior: 'smooth' });
            }

            nextButton.addEventListener('click', () => scrollCarousel(1));
            prevButton.addEventListener('click', () => scrollCarousel(-1));
            
            // Update nav buttons on scroll, load, and resize
            viewport.addEventListener('scroll', updateNavButtons);
            window.addEventListener('resize', updateNavButtons);
            updateNavButtons();

Pagination Script

const paginationContainer = document.getElementById('carouselPagination');
const cardsPerPage = () => {
    const width = window.innerWidth;
    if (width >= 992) return 3;
    if (width >= 768) return 2;
    return 1;
};

function createPagination() {
    paginationContainer.innerHTML = ''; // Clear previous dots

    cards.forEach((card, index) => {
        const dot = document.createElement('div');
        dot.classList.add('dot');
        if (index === 0) dot.classList.add('active');
        dot.dataset.index = index;
        paginationContainer.appendChild(dot);

        dot.addEventListener('click', () => {
            const cardWidth = card.offsetWidth + 0; // card width + margin
            const scrollAmount = cardWidth * index;
            viewport.scrollTo({ left: scrollAmount, behavior: 'smooth' });
        });
    });
}

function updateActiveDot() {
    const scrollLeft = viewport.scrollLeft;
    const cardWidth = cards[0].offsetWidth + 12;

    const index = Math.round(scrollLeft / cardWidth);
    const dots = paginationContainer.querySelectorAll('.dot');

    dots.forEach(dot => dot.classList.remove('active'));
    if (dots[index]) dots[index].classList.add('active');
}

// Recreate pagination on load and resize
createPagination();
window.addEventListener('resize', () => {
    createPagination();
    updateActiveDot();
});

viewport.addEventListener('scroll', updateActiveDot);

I am using @radix-ui/react-tooltip library in react to create a tooltip component. When I use tailwind-animate library, the tooltip popup does not disappear after the cursor moves away from the trigger button (the popup does not seem to get unmounted). If I translate the same animation code to raw css, it works fine. What could be the issue with tailwind-animate? The tailwind-animate version is 0.2.10 and tailwindcss version is 4.1.11.

Here is the wrapper that I am using as Tooltip content (appears as popup when the cursor hovers over the trigger button:

import * as React from 'react';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { twMerge } from 'tailwind-merge';
import { Caption, SmallerText } from '../Typography';
import { TooltipProps } from './types';
import { tooltipContentBaseStyles } from './styles';
import { FontWeight } from '../../../constants/stringConstants';

const Tooltip = TooltipPrimitive.Root;
const TooltipProvider = TooltipPrimitive.Provider;
const TooltipTrigger = TooltipPrimitive.Trigger;
const TooltipArrow = TooltipPrimitive.Arrow;

type TooltipContentProps = React.ComponentPropsWithoutRef<
  typeof TooltipPrimitive.Content
> &
  Omit<TooltipProps, 'supportingContent' | 'children'>;

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  TooltipContentProps
>((props, ref) => {
  const {
    className,
    title,
    description,
    side,
    align,
    children,
    hasPointer,
    sideOffset = 4,
    alignOffset = -20,
    ...restProps
  } = props;

  const tooltipContentClassNames = twMerge(
    tooltipContentBaseStyles,
    'rounded-[8px] shadow-lg',
    'bg-white dark:bg-primary-gray-900',
    'text-black dark:text-white',
    className,
  );

  const tooltipContentContainerClassNames = twMerge(
    'max-w-[320px] flex flex-col plr-[2px] ptb-[8px]',
    'rounded-[8px]',
    'gap-[4px]',
  );

  const tooltipArrowClassNames = twMerge(
    'text z-20 fill-gray-700 text-gray-700',
    'fill-white dark:fill-primary-gray-900',
  );

  return (
    <TooltipPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      alignOffset={alignOffset}
      className={tooltipContentClassNames}
      side={side}
      align={align}
      {...restProps}
    >
      <section className={tooltipContentContainerClassNames}>
        <article className="mt-2 w-full space-y-1">
          <Caption text={title} weight={FontWeight.SEMI_BOLD} />
          <SmallerText text={description} />
        </article>
        {children}
      </section>
      {hasPointer && (
        <TooltipArrow
          className={tooltipArrowClassNames}
          height={6}
          width={12}
        />
      )}
    </TooltipPrimitive.Content>
  );
});

TooltipContent.displayName = TooltipPrimitive.Content.displayName;

export {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
  TooltipArrow,
};

the code for tooltipContentBaseStyles (the animation classes below are causing the issue, when i translate them to raw css and apply that css to tooltip content, it works fine):

export const tooltipContentBaseStyles = twMerge(
  'z-50 overflow-hidden',
  'px-3 py-1.5 text-sm',
  'animate-in fade-in-0 zoom-in-95',
  'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
  'data-[side=bottom]:slide-in-from-top-2',
  'data-[side=left]:slide-in-from-right-2',
  'data-[side=right]:slide-in-from-left-2',
  'data-[side=top]:slide-in-from-bottom-2',
);

I’m writing a VS Code extension that has several UI and non-UI components like tree view providers, status bar items, registries of internal state etc. All of them are created in the extension’s activate() function. Some of them need to communicate between themselves, getting some data, modifying state etc. It would be pretty straightforward if all of these components had a reference to each other but there seems to be no clear way to organize this:

• exporting instances from activate() seems to be more suitable for inter-extension communication;
• singleton instances (which I’m currently doing) are somewhat smelly and also are single per process, while in the future if I want to support multiple open workspaces I wil need one instance per workspace;
• I could pass instances of components to constructors of other components in activate() which is probably the cleanest way to code this but cumbersome to extend, especially if two components need to call each other;
• ExtensionContext.workspaceState and ExtensionContext.globalState are for persistence and likely don’t even support instances of arbitrary classes;
• rummaging through ExtensionContext.subscriptions is very smelly to me.

So what are best practices of keeping some globally accessible class instances available to all code of an extension?

having large amount of browser data – json sent to the server side, so wanna to chunk the data and send to the server sequentially with sleep 1 seconds between each sending.

have tried two ways:
way 1:

  let url = "http://localhost:3000/api/v1/test";
  let chunkSize = 100;
  const chunks = data.reduce((acc, _, i) => {
    if (i % chunkSize === 0) acc.push([]);
    acc[acc.length - 1].push(array[i]);
    return acc;
  }, [] as T[][]);

  console.log('chunks',chunks);

  for (const chunk of chunks) {
    console.log( 'chunk',chunk.length);
     await fetch( url , {
                  method: 'POST',
                  body:  JSON.stringify( chunk ) ,
                  "Content-type": "application/json; charset=UTF-8"
                  }
    });
    await setTimeout(function(){},1000);    
    console.log( 'chunk',chunk.length);

however when testing, the process gets stuck when sending the first chunk, no error showing up, just stuck.

second way:

    let url = "http://localhost:3000/api/v1/test";
    let chunkSize = 100;
    const chunks = data.reduce((acc, _, i) => {
        if (i % chunkSize === 0) acc.push([]);
        acc[acc.length - 1].push(array[i]);
        return acc;
      }, [] as T[][]);

  return Promise.all(chunks.map(async chunk => {
     console.log( 'chunk',chunk.length);
     await setTimeout(function(){},1000);  // not working at all
     return await fetch( url , {
                  method: 'POST',
                  body:  JSON.stringify( chunk ) ,
                  headers: {
                  "Content-type": "application/json; charset=UTF-8"
                  }
    });

  }));

the problem with this above is await setTimeout(function(){},1000); never sleeps.

I hitting an error when I try to add multiple attendees via my spreadsheet. It works with one but when I try comma-separate to include multiple attendees it throws an error:

Error GoogleJsonResponseException: API call to calendar.events.insert failed with error: Invalid attendee email.
createNewEventWithMeet @ Code.gs:34

Link

function createNewEventWithMeet() {

  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Calendar_Events");
  var last_row = sheet.getLastRow();
  var data = sheet.getRange("A2:E" + last_row).getValues();
  var cal = CalendarApp.getCalendarById("[email protected]");

  for(var i = 0;i< data.length;i++){

    var event_name = data[i][0];
    var start_time = data[i][1];
    var end_time = data[i][2];
    var event_description = data[i][3];
    var attendees_event = data[i][4];

//.setVisibility(CalendarApp.Visibility.PRIVATE);

  const mst = "-06:00";
  const calendarId = "[email protected]";
  const resource = {
    start: { dateTime: start_time+mst },
    end: { dateTime: end_time+mst },
    attendees: [{ email: attendees_event }],
    conferenceData: {
      createRequest: {
        requestId: "[email protected]",
        conferenceSolutionKey: { type: "hangoutsMeet" },
      },
    },
    summary: event_name,
    description: event_description,
  };
  const res = Calendar.Events.insert(resource, calendarId, {
    
    conferenceDataVersion: 1,
  });

  
  var googleMeet_Link = res.hangoutLink;
  
  console.log(res);
  }
}

I’ve tried to create multiple columns to split it out but I cannot seem to make it work.

The problem is that the character’s controller does not stand on the surface of a static object, but rather sinks into it. This has undesirable side effects. But at the same time, going up the steps works!

I noticed that if I set upAxis == -1, then the element appears on the surface, and it looks like it should, but the climbing the stairs stops working…

Code clippings:

Character controller set:
CC riggid body:

let body = new AMMO.btPairCachingGhostObject();
body.setWorldTransform(transform);
body.setCollisionShape(colShape);
//  DISABLE_DEACTIVATION == 4
body.setActivationState(4);
body.activate(true);
this.world.getBroadphase().getOverlappingPairCache().setInternalGhostPairCallback(new AMMO.btGhostPairCallback());  
body.setCollisionFlags(body.getCollisionFlags() | btCollisionObjectCollisionFlags.CF_CHARACTER_OBJECT); // 16
this.world.addCollisionObject(body);

CC collider:

let collider = new AMMO.btCylinderShape ( new AMMO.btVector3(metadata.params.radius, metadata.params.halfHeight, metadata.params.radius) );

CC btKinematicCharacterController:

let characterController = new AMMO.btKinematicCharacterController(
    body, 
    collider, 
    0.35, //stepHeight
    1 //upAxis
);
characterController .setUseGhostSweepTest(true);
characterController .setGravity(9.8 * 3); // default 9.8*3
characterController .setMaxSlope(Math.PI / 3); // default Math.PI / 4

this.world.addAction(characterController );

Floor set:
Floor riggid body:

let mass = 0;
let motionState = new AMMO.btDefaultMotionState( transform );
let rbInfo = new AMMO.btRigidBodyConstructionInfo( mass, motionState, colShape, localInertia );
body = new AMMO.btRigidBody( rbInfo);
this.world.addRigidBody(body);
body.setCollisionFlags(body.getCollisionFlags() | btCollisionObjectCollisionFlags.CF_STATIC_OBJECT); // 1

Moreover, this penetration occurs precisely in the lower part of the character’s controller. From the side, everything touches as it should.

In this example, dynamic bodies are scattered. They can be pushed by pressing on them from the side. But if you stand on top of them, penetration occurs..

P.S. If my question seemed inappropriate or bad, please do not immediately put a negative in my reputation, it is better to write, and I will correct, clarify the statement.

I have a web app that plays sounds for some special purposes.
The issue occurs when playing a sound that plays tons on left and right speakers and when on a zoom meet the effect of left and right sound is gone and the sound becomes bad quality.

Is there a solution on the web platform ?

If no then can we implement a solution on android and ios platforms that overrides zoom phone mode and plays the sound with the bilateral quality sound.

Here’s a snippet where the user controls the progress of SVG <animate> using a slider. It works in Firefox. But in Chrome, after sliding it to the very end, it stops working.

const input = document.querySelector('input');
const animate = document.querySelector('animate');
const svg = document.querySelector('svg');

animate.beginElement();
svg.pauseAnimations();
const duration = animate.getSimpleDuration();

input.addEventListener('input', function() {
  svg.setCurrentTime(this.value / 100 * duration);
});

<svg>
  <rect x="50" y="50" width="100" height="100" fill="blue">
    <animate id="anim" attributeName="x" from="50" to="200" dur="5s" begin="indefinite" fill="freeze"/>
  </rect>
</svg>

<input type="range" value="0">

The problem can be solved by removing begin="indefinite". But that may limit other use cases or require hacky workarounds.

What are other solutions?
And what’s causing the problem, is it in accordance to spec or likely a bug in Chrome?

I set the following CSP: frame-ancestors 'self' https://localhost:5001/

I get an error:

Refused to frame 'https://localhost:5001/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://localhost:5001/".

I’ve tried with and without the / and it has not helped.