Topdamark Webservices

Background

To give frontend easier acces to Topdanmark backend/midtier data, we have created this project - Topdanmark Webservices. It uses SWR.

Usage

Since we use React for both our web frontend and app fronend (react native), the exported apis will be in form of React hooks. You install the repo as usual either through npm install or module federation (TBD).

// App.tsx or index.tsx
import { useClaims } from '@topdanmark/webservices';

// place somewhere globally, only init once
settings.init({
  appName: 'my-awesome-app',
  dscmNumber: '111',
  environment: 'dscm111',
  wso2Host: 'wso2dscm111.topdanmask.int',
  awsBase: 'https://api.staging.topdanmask.ext',
  awsGatewayBase: 'https://api.staging.topdanmask.ext/gateway',
  brand: 'td',
  port: 80,
});

// In a React component
const { data, isLoading, error } = useClaims();

if (isLoading) {
  return <div>Loading...</div>;
}

if (error) {
  return <div>failed to load</div>;
}

return <div>claims data loaded</div>;

Logging

import { useSWRConfig } from 'swr';
import { createCallback, createProfilerMiddleware } from '@topdanmark/webservices';
import { useClaims } from '@topdanmark/webservices';
import { SuccessCallback } from '@topdanmark/webservices/dist/middlewares/perf-logger';

// callback to log when calls took more than 3s
const warnIfMoreThan3s = (startDate: Date, _data, _key, _config) => {
  const diffInSeconds = (Date.now() - startDate.getTime()) / 1000;
  if (diffInSeconds > 3) {
    console.warn(`${key} took ${diffInSeconds}s`);
  }
};

const ClaimList = () => {
  // Example of individual hook logging
  const { data, isLoading, error } = useClaims(
    { claimStatus: 'CL' },
    {
      use: [
        createCallback('onError', console.debug), // callback to handle error specifically for this hook
        createProfilerMiddleware(warnIfMoreThan3s), // performance logger
      ],
    }
  );
  return null;
};

const App = () => {
  //Example of global logging
  return (
    <SWRConfig
      value={{
        use: [
          createCallback('onError', console.error), // callback to log error when this it gets an error response
          createProfilerMiddleware(warnIfMoreThan3s), // performance logger
        ],
        onError: (data, key) => console.error(key), // or do this for error logging
      }}
    >
      <ClaimList />
    </SWRConfig>
  );
};

Features

• [x] Easy access services
  • [x] Easy access to Claims list
  • [x] Easy access to Insurance list
  • [x] Easy access to Payments list
  • [x] Easy access to Test JWT (mainly for testing)
  • [x] Easy access to Claims
  • [x] Easy access to Session Refresh

Features to come

• [x] Easy access to data, without knowing rest endpoints
  • [x] Published NPM package
  • [x] Basic Topdanmark data (endpoints)
  • [ ] Servicelayer (aggregating data logically)
  • [ ] External services used by Topdanmark FE
• [x] react hooks out of the box
• [x] data is cached (in memory) by default
• [x] various configuration options
  • [x] revalidation of data
  • [x] time to live ?
• [x] invalidate data
• [ ] ui app for
  • [ ] display supported apis and servicelayers
  • [ ] integration test of apis
• [ ] mock data for local development (config)
• [x] uniform runtime error handling
  • [x] log errors and performance to Kibana using callback
  • [ ] make dashboards for monitoring
  • [ ] streamline behaviour - often error messages does not have correct http-response code so you can get a 200 with an error message! This could be handled specificly so outside the webservices lib you get a real error
• [x] logging
  • [x] support configuration of various logging (c9-logger or others)
• [ ] tracking

Workspace setup

Package manager

This repo uses PNPM package manager. To install:

On Windows or GitBash

Run this in PowerShell

iwr https://get.pnpm.io/install.ps1 -useb | iex

On WSL

Run this in Terminal

curl -fsSL https://get.pnpm.io/install.sh | sh -

For more info, refer to https://pnpm.io/installation.

Conventions

• [ ] Husky & lint-staged is used in this project to ensure uniformity
  • [ ] Githook to run eslint and prettier before every commit
  • [ ] Githook to run unit test before every push
  • [ ] Githook to clean and build before publishing to NPM
• [x] Prettier
• [ ] ESLint

Actual Development

1. Clone this repo into your workspace as the sibling of your project/app.

2. Run pnpm install if you haven't done so.

3. Run the command below to compile and watch this library for changes.

   pnpm dev

4. Add this entry under dependencies in the package.json file of your project/app.

     "dependencies": {
       "@topdanmark/webservices": "link:../webservices"
     },

5. Any changes made in this repo will be reflected instantaneously in your project/app, even with Hot Module Replacement (HMR).

Practices

1: Adding new rest endpoints

• Verify your endpiont does not exist already - if it does go to step 2 below
• Add your endpoint by copying existing one:
  • keep the footprint const { data, isLoading, error } = useYourHook()
  • remember to export the module in ./index.ts
  • remember to export the new type(s) created in ./types.ts
  • ensure unit tests, ui-app and integration tests work
  • update service layer
  • publish a new version of the module, bump the minor version number

2: Updating existing endpoints

• if the data output format is the same - just do it
• if your update adds properties to the output data format - just do it
• if you change the data format so its not compatible with the previous, you have two options
  1. add a new version and keep the old alive
  2. add logic to the updated endpoint so existing consumers are supported
• bump minor version and deploy
• monitor dashboards for errors related to your change

3: Update service layer

TBD