In my Power Pages portal project I would need to be notified on user client-side errors. I will later make an extensive thread on how I implement this, but this post is how to format a typical error object that comes from the JavaScript catch handler.
Typical flow
1) Error is caught in JavaScript code
2) Error object is prepared with all client-side details
3) Power Automate flow is triggered where email with the error details is sent to the admin
Error object
Let's now make a dummy Error object:
console.dir(
new Error(
'Smth went wrong'
, {
cause: {
desc: "some descrtion here",
comments: "some comments here",
someObj: {
newProp: "new value"
},
someArr: [
{name: "name1", value: "value1"},
{name: "name2", value: "value2"}
]
}
}
)
)
We would get the following error that we would need to send by email:
We will send this object to Power Automate in the request body as follows:
fetch(
url
, {
method: "POST",
body: JSON.stringify(
{
wb_data: JSON.stringify(
{
desc: "some description here",
comments: "some comments here",
someObj: {
newProp: "new value"
},
someArr: [
{name: "name1", value: "value1"},
{name: "name2", value: "value2"}
]
}
)
}
)
}
)
Result in the email body will be rendered in one line and look like this:
{"desc":"some description here","comments":"some comments here","someObj":{"newProp":"new value"},"someArr":[{"name":"name1","value":"value1"},{"name":"name2","value":"value2"}]}
That is not what I want.
How to fix
We need to use the space parameter when doing JSON.stringify
Let's redo the logic:
fetch(
url
, {
method: "POST",
body: JSON.stringify(
{
wb_data: JSON.stringify(
{
desc: "some description here",
comments: "some comments here",
someObj: {
newProp: "new value"
},
someArr: [
{name: "name1", value: "value1"},
{name: "name2", value: "value2"}
]
}
, null
, ' ' // this is a space separator that is rendered in Outlook HTML tags as a visual space
).replaceAll('\n', '<br>') // when applying the space param, '\n' is added automatically which we need to convert to new line for HTML
}
)
}
)
Space characters that work in Outlook:
- Em Space
 - widest of all, but when pasted from outlook into vscode will be replaced with a square symbol invalidating json -
No-Break Space
 - narrow but when pasting into vs code will be replaced with a normal space making valid json -> I will finally use this for production with some modification:- I would like to use 4 spaces instead of 1 (my typical setting in the code editor), but since the
fetch space paramhas a limit of 10 characters, I cannot use     - instead, I will replace it after
- so the above line
.replaceAll('\n', '<br>')will be replaced with.replaceAll('\n', '<br>').replaceAll(' ', '    ') - as a result I will have 4 spaces rendered and when pasting the json from the email body into vs code (in case I need it), I don't even need to format
- I would like to use 4 spaces instead of 1 (my typical setting in the code editor), but since the
Space characters that do not work in Outlook:
- Zero Width Space
​ - Space (SP)
  - Tab
	
Result
Actual string that will be sent to the email body will look like this:
'{"wb_data":"{<br> \\"desc\\": \\"some description here\\",<br> \\"comments\\": \\"some comments here\\",<br> \\"someObj\\": {<br>  \\"newProp\\": \\"new value\\"<br> },<br> \\"someArr\\": [<br>  {<br>   \\"name\\": \\"name1\\",<br>   \\"value\\": \\"value1\\"<br>  },<br>  {<br>   \\"name\\": \\"name2\\",<br>   \\"value\\": \\"value2\\"<br>  }<br> ]<br>}"}'
Actual email body in Outlook will look like this:
{
"desc": "some description here",
"comments": "some comments here",
"someObj": {
"newProp": "new value"
},
"someArr": [
{
"name": "name1",
"value": "value1"
},
{
"name": "name2",
"value": "value2"
}
]
}
Top comments (1)
Thanks for sharing