Blancer.com Tutorials and projects

I am using a service worker to cache the static resources for my website. The cache name is key’ed by the Last-Modified header so that I can do a rolling deployment. The user will only ever be shown a full set of static resource from one release. After the release is complete, the service worker cache is updated.

The fetch event looks like this:

event.respondWith(caches.match(event.request).then(r => r || fetch(event.request)))

I’ve hit an issue where I’m getting a 401 when visiting the site root /. It’s a cache miss (which is a problem in itself but I can look at that separately) and is calling fetch().

The site is protected by OIDC where authentication is done via SPNEGO (i.e. there is no login screen). The OIDC access token lifespan has a maximum of 12 hours (including any refreshes).

I assume the fetch is unable to follow the redirects to re-fetch an access token (for the OIDC protocol), but I can’t figure out what I need to do to solve it.

Sidebar: Had it been a cache hit, I would have had an invalid token anyways…I feel like OIDC with service worker should be a solved pattern but I couldn’t find anything via Google.

I am running Windows 11 64bit with 32GB of RAM. No other processes are running. I init Node.js using this command

node index.js --max-old-space-size=16384

In task manager I see 50% memory usage. So why does the app crash at 4GB?

<--- Last few GCs --->
[11724:000001EAD7670000]  9250018 ms: Mark-Compact 4044.3 (4144.3) -> 4043.1 (4143.9) MB, pooled: 0 MB, 2449.39 / 0.00 ms  (average mu = 0.398, current mu = 0.204) allocation failure; scavenge might not succeed
[11724:000001EAD7670000]  9252815 ms: Mark-Compact 4044.5 (4144.3) -> 4043.7 (4144.6) MB, pooled: 0 MB, 2216.51 / 0.00 ms  (average mu = 0.314, current mu = 0.207) allocation failure; scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

I’m trying to attach event listeners to two DOM elements like this (both elements exist):

const signout = document.getElementById('logout');
const signoutMobile = document.getElementById('logout-mobile');

[signout, signoutMobile].forEach(el => {
  if (el) {
    el.addEventListener('click', async () => {
      await logout();
    });
  }
});

async function logout() {
    // fetch logic
}

However, this throws an error in the browser console:

Uncaught TypeError: Cannot read properties of undefined (reading 'logout-mobile')

But when I rewrite the same logic using a for loop, it works perfectly:

const elements = [signout, signoutMobile];
for (let i = 0; i < elements.length; i++) {
  const el = elements[i];
  if (el) {
    el.addEventListener('click', async () => {
      await logout();
    });
  }
}

Why does the .forEach() approach throw an error, while the for loop works fine?

Furthermore, when I place the logout function before the .foreach block, … it works!

Works:

• 1. logout declaration, 2)forEach
• 1. for, 2) logout declaration
• 1. logout declaration, 2) for

Doesn’t work:

• 1. forEach, 2) logout declaration

Additional info:

• Both snippets are placed in the same script file.
• The variables signout and signoutMobile are assigned using document.getElementById() before the iteration.
• The script is loaded with defer.
• The elements with IDs logout and logout-mobile exist in the DOM.
• The logout function is declared and works properly.

I suspect it has something to do with when the variables are assigned relative to the iteration.

What am I missing here?

Note: chatGPT fails to fix this, or explain the problem.

I have a React web app where I display some D3 diagram. The user can download this diagram as a JPG file. I want to control from the server side (Node.js) who is able to download it and who isn’t.

There is a library that makes this download feature available. I have to pass the root svg element to this library and it completes the rest. As everything is on client side I am not sure how I could control from the server side who has access to this download feature.

I could call a server-side feature before executing the import-to-JPG feature but it is client-side code so this call (to check who has access) can be hacked or just ignored so I presume it is not a very good solution.

What I thought of is to download the import-to-JPG library/code from the server side only in those cases when the user has access, otherwise this library/code won’t exist (i.e. the download code won’t exist in the client code but only on the server). So when the user would click on the download button then the import-to-JPG code would be downloaded from server and executed. However I am not sure if it can be done and how.

Is there any other solution to control this client-side behaviour from the server?

ms-outlook://people/v3/0009002e00000000001d840311aa6611cd9bc800aa002fc45a0d00eaffc017e22466408d39a77c58dde3080006c1c331d70000?a=1ac78ca1431d2c317a97fceb9adddd59d49d855629e27e13c38691511a42833d&c=683d94e1

I have this code which was supposed to highlight some code wrapped in “` (like you wrap snippets on stack overflow):

function Pre({ children, ...props }) {
  ....
  const highlightedHTML = highlight(codeString);

  return <pre {...props} className="" dangerouslySetInnerHTML={{ __html: highlightedHTML }} />;
}

However, the HTML it generates has extra space between the lines.

See the generated element here: https://stackblitz.com/edit/web-platform-2msddmqs?file=index.html

Don’t pay attention to styles and classes in the sandbox they aren’t even defined in CSS.

Why am I getting these extra lines can someone explain?

And how can I amend above that code so that I don’t run into that problem?

highlight is a function from library sugar-high. And this Pre is part of using this where you just say that this component will be used when you want to generate code blocks.

Why am I getting “req.body is not set” when using @apollo/server with expressMiddleware in Apollo Server v4, even after adding express.json() or bodyParser.json() before it?

import express from "express";
import { ApolloServer } from "@apollo/server";
import { expressMiddleware } from "@apollo/server/express4";
import cors from "cors";

async function startServer() {
  const app = express();
  app.use(express.json());
  app.use(express.urlencoded({ extended: true }));
  app.use(cors());

  const server = new ApolloServer({
    typeDefs: `#graphql
        type Todo{
        id : ID!
        Title : String!
        Completed : Boolean
        }
        type Query{
            getTodos : [Todo]
        }
    `,
    resolvers: {},
  });

  await server.start();
  app.use("/graphql", expressMiddleware(server));

  app.listen(8000, () => {
    console.log("server is running on port 8000");
  });
}

startServer();

I followed the official Apollo Server v4 setup using @apollo/server and expressMiddleware. I added express.json() and even bodyParser.json() before the middleware. I expected the GraphQL server to parse JSON requests correctly. However, I keep getting this error:
“req.body is not set; this probably means you forgot to set up the ‘json’ middleware…”

I am new to nextJS and I’m experiencing multiple errors when trying to add a graph/chart using recharts

The main error is : Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

This error occurs when I use the code from this recharts example :

<LineChart width={400} height={400} data={data} margin={{ top: 5, right: 20, left: 10, bottom: 5 }}>
  <XAxis dataKey="name" />
  <Tooltip />
  <CartesianGrid stroke="#f5f5f5" />
  <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
  <Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1} />
</LineChart>

I have also tried adding a barchart using this code :

<ResponsiveContainer width="100%" height={300}>
    <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip formatter={(value) => `$${value}`} />
        <Legend />
        <Bar dataKey="price" fill="#8884d8" />
    </BarChart>
</ResponsiveContainer>

The above code gives a different error : TypeError: resolveDispatcher() is null

I have tried adjusting the graph code and the data but the error remains regardless of the changes I make

This is the sample data I tried to use with the line chart code

const data = [
    { name: 'Original Price', price: 100 },
    { name: 'Reduced Price', price: 50 },
];

The LineChart code is within a div within a main within the main return

In my react app, I would like to navigate to another page after I execute GQL delete mutation using Apollo. This mutation is called from inside a modal popup:

const [deleteDeck, { loading }] = useMutation(DELETE_DECK, {
    onCompleted() { (Navigate("/decks")) },
    onError: (error) => { setError(error.graphQLErrors[0].message)}
  });

The mutation finished successfully but I get the following error:

Invalid hook call. Hooks can only be called inside of the body of a function component.

What am I doing wrong?

HTML:

<svg id="settings-icon" xmlns="http://www.w3.org/2000/svg" height="90px" viewBox="0 -960 960 960" width="40px" fill="#FFF"><path d="(thepath)" onclick='settings()'></svg>

JS:

function settings() {alert("hello")}

The alert only happens the first time when clicked. Afterwards I would need to reload then the alert will show again. Or not the alert wouldn’t show after the first time.

Help greatly appreciated.

EDIT: it works but only sometimes. when i click theres bout a 50% chance it alerts