@topdanmark/webservices NPM

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

Easy access services
- Easy access to Claims list
- Easy access to Insurance list
- Easy access to Payments list
- Easy access to Test JWT (mainly for testing)
- Easy access to Claims
- Easy access to Session Refresh

Features to come

Easy access to data, without knowing rest endpoints
- Published NPM package
- Basic Topdanmark data (endpoints)
- Servicelayer (aggregating data logically)
- External services used by Topdanmark FE
react hooks out of the box
data is cached (in memory) by default
various configuration options
- revalidation of data
- time to live ?
invalidate data
ui app for
- display supported apis and servicelayers
- integration test of apis
mock data for local development (config)
uniform runtime error handling
- 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
logging
- 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
Prettier
ESLint

Actual Development

Clone this repo into your workspace as the sibling of your project/app.
Run pnpm install if you haven't done so.
Run the command below to compile and watch this library for changes.
```
pnpm dev
```

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

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

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