Web releases

The latest and greatest on the web

Demo 2022-05-19

19 May 2022

Did you know it’s illegal to own just one guinea pig in Switzerland?

Guinea pigs are very social creatures and that’s why they need at least one friendly neighbour. So, why is Sweden so conservative in this matter? No idea.

Table of contents:

  1. ⚙️ Settings: Only logout if the session is outdated
  2. ⚙️ Settings: Select which company to view settings for
  3. ⚙️ Settings: MM status not updating when activating or disabling service
  4. 🔀 BFF transactions
  5. đź§Ś Why is the deploy of kivra.se slow?
  6. đź’ł Kivra+ for business payment flow
  7. 🎉 Minor changes

⚙️ Settings: Log out user if session is outdated

If you got a response from the backend saying that you’re “Unauthorized” we previously logged you out, since that could mean that your session timeframe could have passed and that you needed to log in again. The problem with this is only that sometimes we have bugs or temporary issues that return an “Unauthorized” response from the backend, and even though the user might just have logged in (meaning they have a valid session) they still got logged out.

Now, we make sure to check that if the time period has not yet passed we’ll show an error instead of logging you out. This helps users to either try doing that action again or get information that something is indeed wrong.

Now it is possible to link users to https://settings.kivra.com/company instead of always having to provide a company key to a specific company (but you can still do it if you want or need to).

And something also worth mentioning is that if a user only has one company, they’ll automatically be redirected to that one.

A user can select from multiple companies

⚙️ Settings: MM status not updating

The iOS team was kind enough to make us aware of that when a user was activating or disabling MM in web settings, we would not update the status in the ui, it demanded a refresh to show the updated state, this would confuse whether the user successfully activated or disabled the service. This is now fixed, so the user does not have to refresh the page to see the updated state.

The MM status

🔀 BFF transactions

The purpose of the BFF is to simplify the view models for the clients, which means that the BFF sometimes needs to make several requests and may look up and massage the data.

Take this query as an example:

contentSender(key: "123") {
  name
  branding {
    backgroundImage(size: large) {
      publicUrl
    }
  }
}

This may look like a simple query but under the under the hood the BFF needs to:

The BFF requests app.api.kivra.com/v1/sender/123, sender-info-api.kivra.com/v1/sender/123/branding and sender-info-api.kivra.com/v1/sender/123/contact_fields in parallel to get the sender name, type, branding information and contact fields. When that is done, the BFF can fetch metadata about the image from fotografiska-api.kivra.com/v1/sender/123/image/[image key]/metadata. So 4 requests to 3 different BE services. Now, let’s say we discover that this query is slow but we don’t know why. How can we measure this? We could print some logs with start and end-time but would it not be nice to see this as a waterfall chart, and that is what we have done.

This also gives us information about is we have any slow queries or what the average reasons time is for a query.
Do not be afraid of the long response time. It was generated under a debugging session

This is just the beginning. Right now do we not log if we need to do any retries or what in the resolver that takes time. We could also get information about how often a field is used.

đź§Ś Why is the deploy of kivra.se slow?

So the external web (kivra.se) is a static web page. We are generating the html pages in a build step from data in our CMS. But a deploy takes around 10 minutes. How can that be if we just create and upload a few static files?

It would turn out that we have a lot of pages on the external. We have over 2300 unique pages! and over 250 mb (a lot of the space is source maps that will never get downloaded by the user).

The learning here is that the external web is not a small webpage.

To be continued.

đź’ł Kivra+ for business payment flow

Work on the Kivra+ for business payment flow has continued in a steady pace. The FE implementation is almost ready and automated end-to-end tests are currently being written.

🎉 Minor changes and bug fixes

  • React components: Removed penguin illustration from generic error component.
  • React components: Fixed the BankID logo component which had an old url to our static assets bucket, which caused the BankID logo to fail on accounts.
  • React components: Built a new datepicker and popover component (not released yet).
Waving penguin