feat: added better error handling

api/index.js

@@ -1,7 +1,10 @@
 const axios = require("axios");
+const { renderError, kFormatter } = require("../utils");
 require("dotenv").config();
 
 async function fetchStats(username) {
+  if (!username) throw Error("Invalid username");
+
   const res = await axios({
     url: "https://api.github.com/graphql",
     method: "post",
@@ -49,7 +52,11 @@ async function fetchStats(username) {
     totalStars: 0,
     contributedTo: 0,
   };
-  if (res.data.error) return stats;
+
+  if (res.data.errors) {
+    console.log(res.data.errors);
+    throw Error("Could not fetch user");
+  }
 
   const user = res.data.data.user;
 
@@ -67,12 +74,11 @@ async function fetchStats(username) {
 }
 
 const createTextNode = (icon, label, value, lheight) => {
+  const classname = icon === "★" && "star-icon";
   return `
     <tspan x="25" dy="${lheight}" class="stat bold">
-    <tspan class="icon ${
+    <tspan class="icon ${classname}" fill="#4C71F2">${icon}</tspan> ${label}:</tspan>
-      icon === "★" && "star-icon"
+    <tspan x="155" dy="0" class="stat">${kFormatter(value)}</tspan>
-    }" fill="#4C71F2">${icon}</tspan> ${label}:</tspan>
-    <tspan x="155" dy="0" class="stat">${value}</tspan>
   `;
 };
 
@@ -134,10 +140,15 @@ module.exports = async (req, res) => {
   const hide_border = req.query.hide_border;
   const show_icons = req.query.show_icons;
   const line_height = req.query.line_height;
-
+  let stats;
-  const stats = await fetchStats(username);
 
   res.setHeader("Content-Type", "image/svg+xml");
+  try {
+    stats = await fetchStats(username);
+  } catch (err) {
+    return res.send(renderError(err.message));
+  }
+
   res.send(
     renderSVG(stats, {
       hide: JSON.parse(hide || "[]"),

api/pin.js

@@ -1,12 +1,7 @@
 const axios = require("axios");
+const { renderError, kFormatter } = require("../utils");
 require("dotenv").config();
 
-function kFormatter(num) {
-  return Math.abs(num) > 999
-    ? Math.sign(num) * (Math.abs(num) / 1000).toFixed(1) + "k"
-    : Math.sign(num) * Math.abs(num);
-}
-
 async function fetchRepo(username, reponame) {
   const res = await axios({
     url: "https://api.github.com/graphql",
@@ -56,14 +51,26 @@ async function fetchRepo(username, reponame) {
     },
   });
 
-  if (res.data.error && res.data.error.type !== "NOT_FOUND") return {};
+  const data = res.data.data;
-  if (!res.data.data.organization && res.data.data.user)
-    return res.data.data.user.repository;
 
-  const isOrg = res.data.data.organization && !res.data.data.user;
+  console.log(res.data);
-  if (isOrg) return res.data.data.organization.repository;
+  if (!data.user && !data.organization) {
+    throw new Error("Not found");
+  }
 
-  return res.data.data.user.repository;
+  if (data.organization === null && data.user) {
+    if (!data.user.repository) {
+      throw new Error("User Repository Not found");
+    }
+    return data.user.repository;
+  }
+
+  if (data.user === null && data.organization) {
+    if (!data.organization.repository) {
+      throw new Error("Organization Repository Not found");
+    }
+    return data.organization.repository;
+  }
 }
 
 const renderRepoCard = (repo) => {
@@ -72,7 +79,7 @@ const renderRepoCard = (repo) => {
 
   const shiftText = primaryLanguage.name.length > 15 ? 0 : 30;
   return `
-  <svg width="400" height="${height}" viewBox="0 0 400 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="400" height="${height}" viewBox="0 0 400 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
       <style>
       .header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2F80ED }
       .stat { font: 600 14px 'Segoe UI', Ubuntu, Sans-Serif; fill: #333 }
@@ -118,8 +125,15 @@ module.exports = async (req, res) => {
   const username = req.query.username;
   const repo = req.query.repo;
 
-  const repoData = await fetchRepo(username, repo);
+  let repoData;
-
   res.setHeader("Content-Type", "image/svg+xml");
+
+  try {
+    repoData = await fetchRepo(username, repo);
+  } catch (err) {
+    console.log(err);
+    return res.send(renderError(err.message));
+  }
+
   res.send(renderRepoCard(repoData));
 };

utils.js

@@ -0,0 +1,21 @@
+const renderError = (message) => {
+  return `
+    <svg width="495" height="100" viewBox="0 0 495 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2F80ED }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #252525 }
+    </style>
+    <rect x="0.5" y="0.5" width="494" height="99%" rx="4.5" fill="#FFFEFE" stroke="#E4E2E2"/>
+    <text x="25" y="45" class="text">Something went wrong! file an issue at https://git.io/JJmN9</text>
+    <text x="25" y="65" class="text small">${message}</text>
+    </svg>
+  `;
+};
+
+function kFormatter(num) {
+  return Math.abs(num) > 999
+    ? Math.sign(num) * (Math.abs(num) / 1000).toFixed(1) + "k"
+    : Math.sign(num) * Math.abs(num);
+}
+
+module.exports = { renderError, kFormatter };