Develop Reference

Why doesn't this webworker respond to a posted message?

I am working on a React project, and I have this code:
Here, I initialize a web-worker and post a message when the Documentation component is loaded.
function Documentation() {
const [result, setResult] = useState(null);
useEffect(() => {
console.log('ran');
const worker = new Worker('../../Workers/SolveWorker.js');
worker.postMessage({ type: 'start', data: [5, 10] });
console.log(worker);
return () => {
worker.terminate();
};
}, []);
...
Inside ../../Workers/SolveWorker.js, I have my worker respond to an event:
/* eslint-disable-next-line no-restricted-globals */
self.onmessage = function (e) {
console.log("Worker: Message received from main script");
};
When I load this component, my message appears to be posted but I never receive a response from the web worker. I've looked at the API but have been unable to figure out what I am doing wrong. Additionally, I get this error: SolveWorker.js:1 Uncaught SyntaxError: Unexpected token '<' (at SolveWorker.js:1:1)
I believe this is somehow relating to my HTML file (when I click this error in chrome dev tools it opens up my HTML), but I’m not really sure in what way.
Any help is appreciated.

When you call const worker = new Worker('../../Workers/SolveWorker.js'); your browser will go try to fetch '../../Workers/SolveWorker.js'. The path is relative to the document root (i.e. where your index.html file is located, sounds like /public in your case) like it would be for a script tag src, not the Javascript file where the worker is created.
Alternatively, you can use a rollup plugin to inline workers in which case your file path would be correct because it would go through the normal node resolution algorithm at build time.

How to handle client-side JavaScript errors with Nuxt.JS

I'm trying to show an error page when an error occurs on the client side Javascript of Vue components.
In dev mode, I get a customer error page I've created in the layouts/error.vue page whenever the client runs into an error. But when I build and start the app no error page is displayed even though the error is logged in the console. This error page is only displayed for server errors.
I've tried creating a custom error handling component using the following code:
mounted() {
window.onerror = this.onError
},
methods: {
onError(msg, source, ln, cn, err) {
console.log('Error received')
this.show = true
this.error = { msg, source, ln, cn, err }
}
}
However, this function does not seem to handle the client sides error that occurs.
Does anyone know what the best way is to handle all unhandled clients side errors?

How to trigger nextjs default 500 error page

I am unable to trigger the Next.js's 500 error page. Most resources talks about making a custom error page but the Next.js doc briefly mentions their default 500 error page. I would like to trigger this default page when the API responds with a 500 status.
Given an API response of 500 Next.js should display a 500 error page. So far it returns to the page where the request was made.
return res.status(500).end();

The only solution I found is to throw an unhandled error from getServerSideProps:
res.statusCode = 500;
throw new Error('Internal Server Error');
I saw that NextJs handle this as a 500 status code, but only on the production/staging environment. npm run dev will not work, and you will not be able to see the default 500 page.
I needed to throw a 500 status code to prevent Google from deindexing my page because the page content suffered significant changes, and the products from this page were not available anymore.

This is how I was able to trigger this, using npm run build and npm run start
(I put this random error trigger in my index page)
export const getServerSideProps: GetServerSideProps = async () => {
function getRandomInt(max: number): number {
return Math.floor(Math.random() * max);
}
if (getRandomInt(10) === 5) {
throw new Error('Internal Server Error');
}
return {
props: {
},
}
}

After defining the custom 500 page at pages/500.ts as mentioned in the official doc, I'm able to access this page at the url path /500.

videojs - How to catch custom http error codes during live stream?

I have a live stream (HLS) that I am playing using videojs 6.8. For some users, after the playback has started (about 4-5 .ts files have been loaded) the server throws me a 409 error.
How do I catch this specific error code so that I can programmatically stop the playback and show an error message?
Currently, videojs keeps trying to resume playback indefinitely. I have tried retryplaylist, blacklistplaylist but all the info I get is that the playlist has been blacklisted and is being retried, I do not see the HTTP code anywhere in my console.log(). player.on('error') doesn't throw any error. I have tried all three of the following but none of them gives me the http code:
player.on('error', function (e) {
// no log
console.log(e);
})
player.tech().on('retryplaylist', function (e, data) {
// logs that it is being retried, but no http code
console.log('retry');
console.log(e);
})
player.tech().on('usage', function (e, data) {
// logs the even 'retryplaylist` but does not give me a http code.
console.log('usage');
console.log(e)
})
I do not want to put my message in retryplaylist because that event will be thrown in case of a slow network too (I already tested this).
What do I have to do to catch the specific 409 error?

Look like:
var retries = 0;
player.tech().on('retryplaylist', function (e, data) {
retries++;
if (retries >= 3) {
// do something
}
})

Using javascript to check if m3u8 live stream is active

Issue
I have a TVML app which calls a m3u8 live stream. The problem is that if the stream isn’t active, the video player throws an error message which cannot be customized. What I want to do is to check if the stream is live before attempting to play it. Is there a way I can accomplish this in javascript?
Error:
(update)
the TVJS playbackError event returns an IKJSError with code -1008, description: resource unavailable and domain: NSUrlErrorDomain. This Error also has an underlyingError (also IKJSError) with code -12884, description: “The operation couldn't be completed. (CoreMediaErrorDomain error -12884 - Playlist File not received)”.
The problem is that when this error is received the player immediately shows an error message on the TV which I can't replace. This is why I want to check if stream is live before attempting to play it.

Use this:
async function checkHLSActive(url) {
try {
let res = await axios.head(url);
return /2\d\d/.test('' + res.status);
} catch (err) {
console.log('err', url, err);
return false;
}
}
Don't forget to import axios library for wherever you put this.