Getting bad request while converting a JSON to Block kit in slack
I am trying to post my lighthouse report to slack using the block kit I am getting 400 status code, could you please help e to understand what I am missing here? (Couldn't find similar post)
The Report that is in JSON format is
{
'Performance Score': [
{ Performance: ' 59 %', Color: 'ORANGE' },
{ Accessibility: ' 85 %', Color: 'ORANGE' },
{ BestPractices: ' 96 %', Color: 'GREEN' },
{ SEO: ' 100 %', Color: 'GREEN' }
],
'Performace KPI': [
{
'First Contentful Paint (FCP)': '1.7 s',
'Speed Index': '4.7 s',
'Largest Contentful Paint (LCP)': '8.7 s',
'Total Blocking Time (TBT)': '70 ms',
'Cumulative Layout Shift (CLS)': '0.012'
}
]
}
I am trying to post the above to slack using the web hook url along with block kit,
I tried with
const reportblocks = [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*Performance Score*"
},
"fields": [
{
"type": "mrkdwn",
"text": `• Performance: ${payload['Performance Score'][0]['Performance']} (${payload['Performance Score'][0]['Color']})`
},
{
"type": "mrkdwn",
"text": `• Accessibility: ${payload['Performance Score'][1]['Accessibility']} (${payload['Performance Score'][1]['Color']})`
},
{
"type": "mrkdwn",
"text": `• Best Practices: ${payload['Performance Score'][2]['BestPractices']} (${payload['Performance Score'][2]['Color']})`
},
{
"type": "mrkdwn",
"text": `• SEO: ${payload['Performance Score'][3]['SEO']} (${payload['Performance Score'][3]['Color']})`
}
]
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*Performance KPI*"
},
"fields": [
{
"type": "mrkdwn",
"text": `• First Contentful Paint (FCP): ${payload['Performace KPI'][0]['First Contentful Paint (FCP)']}`
},
{
"type": "mrkdwn",
"text": `• Speed Index: ${payload['Performace KPI'][0]['Speed Index']}`
},
{
"type": "mrkdwn",
"text": `• Largest Contentful Paint (LCP): ${payload['Performace KPI'][0]['Largest Contentful Paint (LCP)']}`
},
{
"type": "mrkdwn",
"text": `• Total Blocking Time (TBT): ${payload['Performace KPI'][0]['Total Blocking Time (TBT)']}`
},
{
"type": "mrkdwn",
"text": `• Cumulative Layout Shift (CLS): ${payload['Performace KPI'][0]['Cumulative Layout Shift (CLS)']}`
}
]
}
];
I am getting
Slack notification sent successfully. Response: {"status":"fail","statusCode":400,"headers":{"date":"Mon, 08 Apr 2024 16:46:09 GMT","server":"Apache","vary":"Accept-Encoding","strict-transport-security":"max-age=31536000; includeSubDomains; preload","referrer-policy":"no-referrer","x-slack-unique-id":"ZhQfUQd89LozgBIYrwHtqgAAACM","x-slack-backend":"r","access-control-allow-origin":"*","x-frame-options":"SAMEORIGIN","content-type":"text/html","content-length":"7","via":"1.1 slack-prod.tinyspeck.com, envoy-www-iad-lopevkmr, envoy-edge-canary-bom-bccpskqz","x-envoy-attempt-count":"1","x-envoy-upstream-service-time":"217","x-backend":"main_normal main_canary_with_overflow main_control_with_overflow","x-server":"slack-www-hhvm-main-iad-szna","x-slack-shared-secret-outcome":"no-match","x-edge-backend":"envoy-www","x-slack-edge-shared-secret-outcome":"no-match"},"response":"no_text"}
So I changed it to
const reportblocks = {
type: "section",
text: {
type: "mrkdwn",
text: `
*Performance Score:*
• Performance: ${payload["Performance Score"][0]["Performance"]} (${payload["Performance Score"][0]["Color"]})
• Accessibility: ${payload["Performance Score"][1]["Accessibility"]} (${payload["Performance Score"][1]["Color"]})
• Best Practices: ${payload["Performance Score"][2]["BestPractices"]} (${payload["Performance Score"][2]["Color"]})
• SEO: ${payload["Performance Score"][3]["SEO"]} (${payload["Performance Score"][3]["Color"]})
*Performance KPI:*
• First Contentful Paint (FCP): ${payload["Performace KPI"][0]["First Contentful Paint (FCP)"]}
• Speed Index: ${payload["Performace KPI"][0]["Speed Index"]}
• Largest Contentful Paint (LCP): ${payload["Performace KPI"][0]["Largest Contentful Paint (LCP)"]}
• Total Blocking Time (TBT): ${payload["Performace KPI"][0]["Total Blocking Time (TBT)"]}
• Cumulative Layout Shift (CLS): ${payload["Performace KPI"][0]["Cumulative Layout Shift (CLS)"]}
`,
},
};
I am getting
Slack notification sent successfully. Response: {"status":"fail","statusCode":400,"headers":{"date":"Mon, 08 Apr 2024 16:43:12 GMT","server":"Apache","vary":"Accept-Encoding","strict-transport-security":"max-age=31536000; includeSubDomains; preload","referrer-policy":"no-referrer","x-slack-unique-id":"ZhQeoEg0VRsef1dgHS9gqAAAABw","x-slack-backend":"r","access-control-allow-origin":"*","x-frame-options":"SAMEORIGIN","content-type":"text/html","content-length":"7","via":"1.1 slack-prod.tinyspeck.com, envoy-www-iad-qmigteht, envoy-edge-bom-bevupifn","x-envoy-attempt-count":"1","x-envoy-upstream-service-time":"203","x-backend":"main_normal main_canary_with_overflow main_control_with_overflow","x-server":"slack-www-hhvm-main-iad-sbvy","x-slack-shared-secret-outcome":"no-match","x-edge-backend":"envoy-www","x-slack-edge-shared-secret-outcome":"no-match"},"response":"no_text"}
I am using a nodejs script for posting it and when I run it normally without formatting it is posting but want it in JSON format
const Slack = require("slack-node");
const logger = require("../../reporting/logger");
const apiEndPoints = require("../../config/apiEndPoints");
const webhookurl = `${apiEndPoints.SLACK_SDET_URL}`;
async function sendSlackNotification(payload) {
try {
logger.info(`Sending Slack notification to: ${webhookurl}`);
const slack = new Slack();
slack.setWebhook(webhookurl);
const reportblocks = [
{
type: 'section',
text: { type: 'mrkdwn', text: '*Performance Score:*' },
fields: payload['Performance Score'].map(score => ({
type: 'mrkdwn',
text: `${Object.keys(score)[0]}: ${Object.values(score)[0]}`,
})),
}
];
const message = {
blocks: reportblocks ,
};
slack.webhook(message, function (err, response) {
if (err) {
logger.error(`Error occurred while sending Slack notification: ${err}`);
} else {
logger.info(`Slack notification sent successfully: ${JSON.stringify(response)}`);
}
});
} catch (error) {
logger.error("Error occurred:", error);
}
}
sendSlackNotification();
module.exports = {
sendSlackNotification,
};
Working Fine
Solution
I have fixed the issue, thought I can be sharing this to community
Now the issue is with the npm library used only accept text as payload.
const Slack = require("slack-node");
So choose a new npm library which is
const { IncomingWebhook } = require("@slack/webhook");
And changed the code,
const { IncomingWebhook } = require("@slack/webhook");
const logger = require("../../reporting/logger");
const apiEndPoints = require("../../config/apiEndPoints");
//const webhookUrl = apiEndPoints.SLACK_SOLUTION_URL;
const webhookUrl = apiEndPoints.SLACK_SDET_URL;
async function sendSlackNotification(payload) {
try {
// Initialize the webhook with the provided URL
const webhook = new IncomingWebhook(webhookUrl);
// Construct the message payload
const block = {
blocks: [
{
type: "section",
text: {
type: "mrkdwn",
text: "*Google Lighthouse Score [Home Page | Desktop Platform]*",
},
},
{
type: "section",
fields: [
{
type: "mrkdwn",
text: `• Performance: *${
payload["Performance Score"][0]["Performance"]
}* | ${setButtonBasedOnColor(
`${payload["Performance Score"][0]["Color"]}`
)}`,
}
],
}
],
};
// Send the payload to Slack
await webhook.send(block);
} catch (error) {
logger.error(`Error sending Slack notification: ${error}`);
}
}
module.exports = {
sendSlackNotification,
};
- Slack polls with HTTP Response
- Retrieve bot user replies in Slack channel
- How to manipulate strings in Slack Workflows
- Shortcut buttons(example: code) in Slack message box are disappeared
- Create Slack channel programmatically
- Slack files.completeUploadExternal no uploading files to the Slack
- Slack SocketModeClient - Respond Only to Messages That Mention App in Channels
- Correct use of files.getUploadURLExternal in Curl command line
- Use FastAPI to parse incoming POST request from Slack
- Slack Custom per Channel Slack Notification Sounds?
- Slack Bolt Python: how to make the input field in modal optional?
- How to get a thread reply's content from reaction_added event?
- AWS lambda function used for slack command returning json instead of text
- Use SlackNotifier in Airflow within a callback function
- Anyone managed to post a Slack Block message using the inbuilt Logic App slack steps
- Slack url to an image
- Get notified of Build or Release that failed
- How do I sync a Slack workspace from mobile to desktop?
- can rundeck accept input from slack to run a specific job with a parameter provided by the slack user?
- Is slack's python library "slack" different from "slack_sdk"
- Slack Workflow Builder url formatting
- Python slack bot - Retrieves 0 messages from conversations history when latest and oldest are used in the request
- Slack Cli - How has it been broken after upgrade?
- Is it possible to make an input not required with Slack API?
- How to send message to a Slack channel in Python
- How do I change the slack bot display name dynamically via slack API?
- How do I edit the about page of my slack app?
- Getting bad request while converting a JSON to Block kit in slack
- Is there Azure equivalent to Amazon AWS Slack notifications?
- How to read a slack user ID from response and get the username?