Creating HTTP Endpoint For Logging (With Google Cloud)

[loeiks]

In this tutorial I will try to explain how you can create a custom HTTP Endpoint (API) to receive your Wix site logs (both frontend and backend) and how you can create alerts to let you know when something is not working. So let’s start creating our custom API using Google Cloud!

What you will need to build this?

1. Google Identity Account

2. Google Cloud Account

3. Any Wix Site You Have

Jump to headings:

1. Sign Up for Google Identity Cloud

2. Setup Google Cloud Identity & Organization

3. Creating App Engine

4. Creating API And Deploy to App Engine

5. Connecting Wix to Google Cloud

6. Creating Alerts for Logs (Optional)

Step 1 - Sign Up for Google Identity Cloud

In the first step we need to create a Google Identity account and use one of the account that we will create inside our Google Identity account.

*Note: You need a domain to create a Google Identity Account if you don’t have a domain you can just use a regular Google account to use Google Cloud just skip to 3rd step.

You can directly go to this URL to just create a Google Identity Account. We will start from here for who will create a Google Identity account.

When you achieve “How you’ll sign in step” at Google Identity sign up. Create a email with your domain and set a password for it.

After completing other steps. Google will take to the sign in page:

Sign in your account. After signing in your account Google will take you to Google Admin page. We will verify the domain that we have added while we are signing up.

Go to your domain provider and manage your DNS settings in your DNS settings you will add a TXT record. This is how you can do it inside Wix if your domain is managed by Wix:

Host Name will be empty if your domain provider not allow to leave it empty use @.
Value will be the text we have copied from Google Identity account.
And TTL will be 1 Hour which is default already.

After completing DNS setup we can go back to Google Admin console. And click “Verify My Domain” button at the bottom.

It can take sometime to verify your domain ( avg 4-5min ) just get a coffee while waiting this

When Google verified your domain just go to Google Cloud:

Now we can move to step 2.

Step 2 - Setup Google Cloud Identity & Organization

Now we have a different Google Account to use Google Cloud with Google Identity. And when you move to Google Cloud from Google Admin console you will see this screen:

Just agree the terms and click AGGREE AND CONTINUE .

You will see a pop-up at the bottom of the page: (It’s mean now admin@exweiv.store is the admin of organization that we have created)

Now time to setup Identity & Organization settings:

First will be marked as completed we will continue from second step. In here you can read what Google tells you and understand all the steps (if you really need to understand these steps).

In every step there will be tasks and you can complete these tasks by clicking fast complete buttons:

In this step Google tells me to create groups inside my Google Admin console if you don’t want to do it manually you can just click “Create and Customize Groups” button.

When you have done all the steps you will see this result page:

Now time to setup our App Engine so we can move to step 3.

Step 3 - Creating App Engine

So this is the step that who just wants to use a regular Google account and not to create a Google Identity account.

Or if you already have completed these steps (creating Google Cloud account etc.) you can start from here.

So let’s start building our API but before that we need to understand how it will work. Here is a support article by Wix about what we will do in this step. We will use a GitHub repo to create our API (this GitHub repo is created by Wix).

Here is the GitHub repo

And here is the image that shows what we will be building *image from support article :

In Google Cloud we will use App Engine to create a custom HTTP Endpoint and we will send logs of our Wix site to this HTTP Endpoint as a request (POST method).

So let’s start building it!

Go to App Engine and create a new App in Google Cloud:

You will have to fill some details about your app:

I will select europe-west-6 because my website users is closer to this location. (It’s better to choose nearest location to your users)

Then we need to create a service: (Click to the dropdown and select “create new service”)

Choose a name and ID for your service: (You don’t have to take action for other 2 optional step 2nd and 3rd step)

Then select your service and create a new key: (In JSON format)

After you have created a key in JSON format you will get a JSON file (auto download) into your local device. (We will use this JSON file so keep it)

And don’t forget to give Editor access to your service account to do this you need the email of service account. When you create your service account you will see an email at the details section:

Copy this email and go to IAM page and add new user:

Then save it.

So we can go back to App Engine setup and just refresh the list and select your Service Account:

It will take sometime to create your App Engine so be patient. After you have created your App Engine you will see a screen like this:

What we have done so far?

1. We have created an App Engine

2. We have created a Service Account

3. We have added Editor permission to our Service Account

Now time to use this App Engine and create the API using GitHub repo provided by Wix .

Open Cloud Shell by clicking the icon at the top of the menu:

To be more comfortable I will open the Shell and Editor in new window:

Select your project by typing:

gcloud config set project `PROJECT ID`

To find your project ID follow these steps:

1. Click your project name at the top left corner just next to logo of Google Cloud

2. You will see your project ID and Name:

Time to move into step 4.

Step 4 - Creating API And Deploy to App Engine

In Cloud shell type these commands in order:

git clone https://github.com/wix/corvid-stackdriver-telemetry-adapter.git 

Result:

cd corvid-stackdriver-telemetry-adapter

Result:

Now we need to upload JSON file we have downloaded previously when we created the Service Account. After uploading the JSON file name it as ‘service-account-key’

First open the folder:

Then drag and drop your JSON file:

Rename your JSON file:

Rename it as: ‘serice-account-key’ (without ‘’).

We will also have edit app.yaml file. We will add service_account and service element to our app.yaml file and we will change runtime element to nodejs16:

runtime: nodejs16
service_account: ‘YOUR SERVICE ACCOUNT EMAIL’
service: ‘SERVICE NAME’

How you can find your service name?
Your service name is text before @ of your service email. Example:
store-of-exweiv@deft-return-340304.iam.gserviceaccount.com

Now we can continue from shell.

npm i

Result:

npm run test

Result:

npm run deploy

Result:

type Y and press enter
It will take 5-10 min to deploy your app to App Engine so just wait.

Note: You can get an error about Cloud Build API if you get this error just Enable the API from this page: https://console.developers.google.com/apis/api/cloudbuild.googleapis.com/overview?project=deft-return-340304 (if you have more than one Google Account in your browser may you have to change account from top right)

(To be able to use most of the features of Google Cloud you will need to create a Billing account also don’t forget that)

Shell Result (similar to this):

Now we can go back to Google Cloud window and just move to the App Engine page of Google Cloud you will see a page something like this:

If you see this page it’s mean probably you have done it and just one thing left to do and it’s connecting Wix to Google Cloud.

We have a URL at the top right of our App Engine dashboard page my URL is: (you will have your own URL)
https://deft-return-340304.oa.r.appspot.com

To connect it to Wix we will add /log to end of the URL:
https://deft-return-340304.oa.r.appspot.com/log

Now we can move to last step (step 5)

Step 5 - Connecting Wix to Google Cloud

So time to connect our Wix site to this HTTP Endpoint to do this first we need to open our site dashboard and go to Developer Tools > Logs

We will connect our HTTP Endpoint (API) using ‘Advanced Connection’ option in Logs page.

Just paste your /log URL to here and you are ready to go!

Congratulations you have created a custom API and you have connected it to your Wix site. So what’s next?

---

Let’s check if everything is working correctly. To check if everything is working or not we need to use Logging Explorer inside Google Cloud:

Now we need to send some logs (send requests) to our API to do this just open your website and log something to console I already have some errors so I can check it by just going into my homepage.

IMPORTANT NOTE FOR LOGS:

When you are writing your codes don’t use console.log for every log.

• Use console.error() for error logs

• Use console.info() for info logs

• Use console.log() for regular logs

• Use console.warn() for warning logs

• Use console.error() for your promise errors (after .catch())

If you log an error with console.log you will not gonna see it as an error in logs.

As you can see I can see my site logs by filtering resource type as global.

Step 6 - Creating Alerts for Logs (Optional)

If you want to be get alerted you can use log alerts. I will create a basic alert for all of my error logs to do this first go to Logging Explorer.

First filter your logs. I want to create alert for all of my errors so I have filtered logs to see all errors. After that click ‘Create Alert’ button.

First add name and doc for your error. Don’t do any changes at step 2 and move to the step 3:

Time between notifications: 1hr = you will get notified at every 1hr for this alert.
Incident autoclose duration: Select a duration, after which the incident will close automatically when matching log entries are absent.

I will select 5 min for time between notifications to get faster notifications.

Now time to create notification channels:

Go to manage notifications channels page and add details: (I will add an email)
*Google has a mobile app so you can also get notified from your mobile device.

After adding email:

Now select notification channels you want for this alert: (then we can save alert)

So we have created an alert. I will just create an error and I will get an email in 5 min here is the email that I got:

We have just completed everything.

---

If you see any error or missing details or any wrong thing in this tutorial just let me know so I can fix it
I hope I was able to explain everything correctly.

[plomteuxquentin]

@loeix What’s the advantage of doing this over using Wix implementation?