Search code examples
reactjsexpressserverlessnetlify

One of my Serverless functions works perfectly fine in production but not in development

Site Name: https://leaguetracker.netlify.app/

Issue: I have 6 serverless functions which all work perfectly fine in production. I have recently discovered that through installing netlify-cli I am able to run netlify dev which allows me to develop the app with use of my serverless functions..

It is worth noting the following Base directory is client Build command is npm run build Publish directory is client/build

To run netlify dev I CD into the client folder then run it. Everything now sits inside my client folder.

These are my redirects in a _redirects file which sit in client/build

/search  /.netlify/functions/search  200
/ranked  /.netlify/functions/ranked  200
/history  /.netlify/functions/history  200
/match  /.netlify/functions/match  200
/leaderboard  /.netlify/functions/leaderboard  200
/champion-mastery  /.netlify/functions/championMastery  200

My leaderboard function works perfectly fine when running netlify dev however, my search function throws a 500 error but I have no idea why this is only when running netlify dev as it works in production.

This is the leaderboard function that works everywhere

const axios = require("axios");

async function handler(event, context) {
  try {
    const region = event.path.replace("/.netlify/functions/leaderboard/", "");
    const leaderboardResponse = await axios.get(
      `https://${region}.api.riotgames.com/lol/league-exp/v4/entries/RANKED_SOLO_5x5/CHALLENGER/I?page=1`,
      {
        headers: {
          "X-Riot-Token": process.env.RIOT_API_KEY,
        },
      }
    );

    // Return the leaderboard data
    return {
      statusCode: 200,
      body: JSON.stringify(leaderboardResponse.data),
    };
  } catch (error) {
    console.error(error);
    return {
      statusCode: 500,
      body: JSON.stringify({ error: "An error occurred" }),
    };
  }
}

module.exports = { handler };

This is the search function that works only in production

const axios = require("axios");

async function handler(event, context) {
  try {
    const region = event.path
      .replace("/.netlify/functions/search/", "")
      .split("/")[0];
    const summonerName = event.path
      .replace("/.netlify/functions/search/", "")
      .split("/")[1];

    // Make a request to the Riot Games API to fetch player data
    const summonerResponse = await axios.get(
      `https://${region}.api.riotgames.com/lol/summoner/v4/summoners/by-name/${encodeURIComponent(
        summonerName
      )}`,
      {
        headers: {
          "X-Riot-Token": process.env.RIOT_API_KEY,
        },
      }
    );

    return {
      statusCode: 200,
      body: JSON.stringify(summonerResponse.data),
    };
  } catch (error) {
    console.error(error);
    return {
      statusCode: 500,
      body: JSON.stringify({ error: "An error occurred" }),
    };
  }
}

module.exports = { handler };

I am unable to check any other functions as the rest of them are triggered after the search..

Any idea why this might be the case?

Solution

  • The issue was related to how the summonerName is being passed in the URL. summonerName in the URL is double-encoded, resulting in %2520 instead of %20 which in the detailed error was throwing the 404 error.

    I have updated my search function to the below which has fixed it.

    const axios = require("axios");

async function handler(event, context) {
  try {
    const pathParts = event.path
      .replace("/.netlify/functions/search/", "")
      .split("/");
    const region = pathParts[0];
    const encodedSummonerName = pathParts[1];
    const summonerName = decodeURIComponent(encodedSummonerName);

    // Make a request to the Riot Games API to fetch player data
    const summonerResponse = await axios.get(
      `https://${region}.api.riotgames.com/lol/summoner/v4/summoners/by-name/${encodeURIComponent(
        summonerName
      )}`,
      {
        headers: {
          "X-Riot-Token": process.env.RIOT_API_KEY,
        },
      }
    );

    return {
      statusCode: 200,
      body: JSON.stringify(summonerResponse.data),
    };
  } catch (error) {
    console.error(error);
    return {
      statusCode: 500,
      body: JSON.stringify({ error: "An error occurred" }),
    };
  }
}

module.exports = { handler };