In my Angular app I want to send me error details to my spring endpoint when cricital angular error/bundle error occurs - Angular errors are catched by handleErrors.
So I heard about window.onerror function, so I added this in my index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Frontend</title>
<base href="/">
<script type="text/javascript">
window.onerror = function (msg, url, lineNo, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
alert(message);
};
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
Later I want send error data to server, but now I'm just testing it.
And when I specially create error which occurs an Angular compile error I have no alert, just failed to compile
or blank page with get
and looks like onerror doesnt catch it.
Angular provides a common method to handle Error. What you should do is to create a class implements ErrorHandler:
import { ErrorHandler } from '#angular/core';
export class AppGlobalErrorhandler implements ErrorHandler {
handleError(error) {
console.warn("customize catch execption:"+error);
}
}
Then, in app.module.ts, you tell Angular to use our Custom Error Handler, configing in providers:
providers: [
// ...
{
provide: ErrorHandler,
useClass: AppGlobalErrorhandler
}
]
Reference：https://golb.hplar.ch/2018/10/global-errorhandler-angular.html
Related
i want to integrate PLAID system on my project based Laravel framework. Currently i'm developing on step to display Consent Pane PLAID from this doc PLAID LINK DOC. I'm using the javascript code. but i still failed to integrate it. here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Plaid</title>
<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
</head>
<body >
plaid
</body>
<script>
const handler = Plaid.create({
token: 'link-sandbox-xxx',
onSuccess: (public_token, metadata) => {
console.debug("onSuccess");
console.log('public_token: ' + public_token);
console.log('account ID: ' + metadata.account_id);
},
onLoad: () => {
console.debug("onLoad");
},
onExit: (err, metadata) => {
console.debug("onExit");
console.log('metadata ' + metadata);
},
onEvent: (eventName, metadata) => {
console.debug("onEvent");
},
receivedRedirectUri: "https://domainname.com/plaid",
});
handler.open();
</script>
</html>
Display error
POST https://sandbox.plaid.com/link/workflow/start 400 (Bad Request)
Error: oauth uri does not contain a valid oauth_state_id query parameter.
i already added new URL my API menu on PLAID Dashboard but still display this error.
Please help. How do i able to integrate that on my laravel?
The receivedRedirectUri should not be set when initializing Link for the first time. It is used when initializing Link for the second time, after returning from the OAuth redirect.
When trying to connect the metamask wallet with my local site i am getting this error
I am Using the eth_requestAccounts methord but getting the down err
inpage.js:8 Uncaught (in promise) Error: 'args.method' must be a non-empty string.
at o (inpage.js:8:31826)
at Object.invalidRequest (inpage.js:8:32276)
at l.request (inpage.js:1:37391)
at HTMLButtonElement.Connect (index.js:13:27)
this was the error being Printed on MY console
// HOW TO CONNECT YOUR METAMASK TO YOUR FRONTEND
const button = document.getElementById("ConnectButton");
//button.addEventListener('click',connect);
if (button) {
console.log("button successfully imported");
} else {
console.log("BUtton is not imported");
}
const Connect = async () => {
if (typeof window.ethereum !== "undefined") {
await window.ethereum.request({ methord: "eth_requestAccounts" });
button.innerHTML = "Connected";
} else {
button.innerHTML = "Pls install metamask";
}
};
button.addEventListener("click", Connect);
MY index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FUND ME</title>
</head>
<body>
<h1>HELLO WORLD
</h1>
<button id="ConnectButton">Connect</button>
<script src="index.js"></script>
</body>
</html>
MY index.html
It might likely be a typo error. You have methord instead of method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JSON Test</title>
</head>
<body>
<h1>Hello World</h1>
<div id="myData"></div>
<script>
fetch('http://localhost:3000/api/product/1234567')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
console.log('error: ' + err);
});
function appendData(data) {
console.log(data)
var mainContainer = document.getElementById("myData");
for (let key in data) {
var div = document.createElement("div");
div.innerHTML = 'name: ' + data[key] + 'label' + data[key];
mainContainer.appendChild(div);
}
}
</script>
</body>
</html>
Trying to fetch the json response and display it on html page. It's giving me an error: SyntaxError: Unexpected end of JSON input. I guess I'm here to maybe get some help on how to fix this and why this is happening. Thank you.
edit:
The response I get on my console :
{
product: 1234567,
name: 'TV',
salePrice: 149.99
}
The major reason is your response is not in the JSON format, which could be because of getting some non-json format response. Please post the sample JSON response format to understand better.
I'm building a JS library with Webpack and trying to export an object.
import jwt_decode from "jwt-decode";
console.log(location.hash.replace('#', ''));
export var upstream = {
user: {
getUserDetails: () => {
if (location.hash) {
return jwt_decode(location.hash.replace('#', ''));
} else {
return null;
}
}
}
}
In my client-side code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UpStream</title>
</head>
<body>
<script src="http://localhost:8080/app.js"> <!--server is up, connects fine-->
</script>
<script>
console.log(upstream);
</script>
</body>
</html>
The console.log(); statement works as intended, but I cannot access the upstream object. Any pointers?
To be able to access upstream via window or just upstream you would need to ensure you specify the export as a Library with libraryTarget of 'window'.
Hopefully that helps!
I'm developing a PWA and I'm trying to use workbox to manage the service-worker and the caching of assets.
In my PWA I have to show all the newer images if the device is online and, if not, the images in the cache.
When I try to implement it I see that the staleWhileRevalidate method on image is called only once in the page for each image, also if I try to refresh multiple times. I need to close the webpage and when I reopen it the image is updated correctly. It's normal that it work in this way?
When I try it with localhost, the staleWhileRevalidate is called every time I reload the page, but when I load the website on a remote server, the app does not work anymore in this way.
service-worker.js:
importScripts('workbox-sw.prod.v2.0.0.js');
const workboxSW = new WorkboxSW();
var CACHE_NAME = 'my-cache';
var filesToCache = [
'imgs/images.png',
'index.html'
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(CACHE_NAME).then(function(cache) {
console.log('[ServiceWorker] Caching App Shell');
return cache.addAll(filesToCache);
})
);
});
workboxSW.router.registerRoute(
/.*\/imgs\/(.*\/)?.*\.(png|jpg|jpeg|gif)/,
({event}) => {
console.log("staleWhileRevalidate called);
return workboxSW.strategies.staleWhileRevalidate({cacheName: CACHE_NAME}).handle({event}).catch((error) => {
console.log("Error staleWhileRevalidate");
return error;
});
}
);
index.html:
<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title class="title">PWA</title>
</head>
<body>
<div class="container">
<img src="imgs/image.png">
</div>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('service-worker.js').then(function(registration) {
console.log('ServiceWorker registration successful);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>
</body>
</html>
Installing (not in localhost)
First Reload (not in localhost)
Second Reload (and more times)