✨[RUMF-264] add compatibility with server side rendering (#273)

* ✨[RUMF-264] add compatibility with server side rendering * 🔧 add ssr compatibility check * 👌 use globalThis * 👌 improve check
DataDog · Feb 17, 2020 · 282de4c · 282de4c
1 parent 4d765df
commit 282de4c
Show file tree

Hide file tree

Showing 12 changed files with 53 additions and 23 deletions.
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
@@ -46,7 +46,15 @@ build:
   script:
     - yarn
     - yarn build
-    - yarn test:tsc:3.0
+
+compatibility:
+  stage: test
+  tags: ['runner:main', 'size:large']
+  image: $CI_IMAGE
+  script:
+    - yarn
+    - yarn test:compat:tsc
+    - yarn test:compat:ssr
 
 unit:
   stage: test

diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "dev": "ENV=development node test/server/server.js",
     "release": "lerna version --exact",
     "publish:npm": "TARGET_DATACENTER=us TARGET_ENV=production VERSION=release yarn build && lerna publish from-package",
+    "fail": "./scripts/fail.sh",
     "test": "yarn test:unit",
     "test:unit": "karma start ./test/unit/karma.local.conf.js",
     "test:unit:cbt": "node ./scripts/cbt-with-retry.js karma start test/unit/karma.cbt.conf.js",
@@ -21,7 +22,8 @@
     "test:e2e:npm": "TARGET_ENV=e2e-test yarn build && (cd test/app && rm -rf node_modules && yarn && yarn build) && E2E_MODE=npm wdio test/e2e/wdio.local.conf.js",
     "test:e2e:async": "TARGET_ENV=e2e-test yarn build && E2E_MODE=async wdio test/e2e/wdio.local.conf.js",
     "test:e2e:cbt": "TARGET_ENV=e2e-test yarn build && node ./scripts/cbt-with-retry.js wdio test/e2e/wdio.cbt.conf.js",
-    "test:tsc:3.0": "yarn build && (cd test/app && rm -rf node_modules && yarn && yarn tsc:compatibility)"
+    "test:compat:tsc": "yarn build && (cd test/app && rm -rf node_modules && yarn && yarn compat:tsc) || yarn fail 'typescript 3.0 compatibility broken'",
+    "test:compat:ssr": "yarn build && (cd test/app && rm -rf node_modules && yarn && yarn compat:ssr) || yarn fail 'server side rendering compatibility broken'"
   },
   "devDependencies": {
     "@types/jasmine": "3.3.13",

diff --git a/packages/core/src/utils.ts b/packages/core/src/utils.ts
@@ -200,3 +200,8 @@ export function objectValues(object: { [key: string]: unknown }) {
   })
   return values
 }
+
+export function getGlobalObject<T>(): T {
+  // tslint:disable-next-line: function-constructor no-function-constructor-with-string-args
+  return (typeof globalThis === 'object' ? globalThis : Function('return this')()) as T
+}
diff --git a/packages/logs/src/logs.entry.ts b/packages/logs/src/logs.entry.ts
@@ -4,6 +4,7 @@ import {
   commonInit,
   Context,
   ContextValue,
+  getGlobalObject,
   isPercentage,
   makeGlobal,
   makeStub,
@@ -117,4 +118,4 @@ interface BrowserWindow extends Window {
   DD_LOGS?: LogsGlobal
 }
 
-;(window as BrowserWindow).DD_LOGS = datadogLogs
+getGlobalObject<BrowserWindow>().DD_LOGS = datadogLogs
diff --git a/packages/rum/src/rum.entry.ts b/packages/rum/src/rum.entry.ts
@@ -4,6 +4,7 @@ import {
   commonInit,
   Context,
   ContextValue,
+  getGlobalObject,
   isPercentage,
   makeGlobal,
   makeStub,
@@ -108,4 +109,4 @@ interface BrowserWindow extends Window {
   DD_RUM?: RumGlobal
 }
 
-;(window as BrowserWindow).DD_RUM = datadogRum
+getGlobalObject<BrowserWindow>().DD_RUM = datadogRum
diff --git a/scripts/fail.sh b/scripts/fail.sh
@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+echo
+echo "❌ ${1}"
+echo
+
+exit 1
diff --git a/test/app/app.ts b/test/app/app.ts
@@ -1,18 +1,21 @@
 import { datadogLogs } from '@datadog/browser-logs'
 import { datadogRum } from '@datadog/browser-rum'
 
+// fallback for server side rendering
+const origin = typeof location === 'object' ? location.origin : ''
+
 datadogLogs.init({
   clientToken: 'key',
   forwardErrorsToLogs: true,
-  internalMonitoringEndpoint: `${window.location.origin}/monitoring`,
-  logsEndpoint: `${window.location.origin}/logs`,
-  rumEndpoint: `${window.location.origin}/rum`,
+  internalMonitoringEndpoint: `${origin}/monitoring`,
+  logsEndpoint: `${origin}/logs`,
+  rumEndpoint: `${origin}/rum`,
 })
 
 datadogRum.init({
   applicationId: 'rum',
   clientToken: 'key',
-  internalMonitoringEndpoint: `${window.location.origin}/monitoring`,
-  logsEndpoint: `${window.location.origin}/logs`,
-  rumEndpoint: `${window.location.origin}/rum`,
+  internalMonitoringEndpoint: `${origin}/monitoring`,
+  logsEndpoint: `${origin}/logs`,
+  rumEndpoint: `${origin}/rum`,
 })
diff --git a/test/app/package.json b/test/app/package.json
@@ -2,8 +2,9 @@
   "name": "app",
   "version": "0.0.0",
   "scripts": {
-    "tsc:compatibility": "tsc -p tsconfig.json",
-    "build": "webpack --mode=production"
+    "build": "webpack --mode=production",
+    "compat:tsc": "tsc -p tsconfig.json",
+    "compat:ssr": "webpack --mode=development && node dist/app.js"
   },
   "dependencies": {
     "@datadog/browser-logs": "file:../../packages/logs",

diff --git a/test/app/tsconfig.json b/test/app/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "outDir": "./dist/",
     "strict": true,
-    "module": "es6",
+    "module": "commonjs",
     "moduleResolution": "node",
     "target": "es5"
   }

diff --git a/test/app/webpack.config.js b/test/app/webpack.config.js
@@ -1,6 +1,6 @@
 const path = require('path')
 
-module.exports = {
+module.exports = (env, argv) => ({
   entry: './app.ts',
   module: {
     rules: [
@@ -13,8 +13,12 @@ module.exports = {
   resolve: {
     extensions: ['.ts', '.js'],
   },
+  optimization: {
+    // Display stack trace when SSR test fail
+    minimize: argv.mode === 'development',
+  },
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'app.js',
   },
-}
+})
diff --git a/test/app/yarn.lock b/test/app/yarn.lock
@@ -2,26 +2,26 @@
 # yarn lockfile v1
 
 
-"@datadog/browser-core@1.2.7", "@datadog/browser-core@file:../../packages/core":
-  version "1.2.7"
+"@datadog/browser-core@1.4.1", "@datadog/browser-core@file:../../packages/core":
+  version "1.4.1"
   dependencies:
     lodash.assign "4.2.0"
     lodash.merge "4.6.2"
     tslib "1.10.0"
     url-polyfill "1.1.7"
 
 "@datadog/browser-logs@file:../../packages/logs":
-  version "1.2.7"
+  version "1.4.1"
   dependencies:
-    "@datadog/browser-core" "1.2.7"
+    "@datadog/browser-core" "1.4.1"
     lodash.assign "4.2.0"
     lodash.merge "4.6.2"
     tslib "1.10.0"
 
 "@datadog/browser-rum@file:../../packages/rum":
-  version "1.2.7"
+  version "1.4.1"
   dependencies:
-    "@datadog/browser-core" "1.2.7"
+    "@datadog/browser-core" "1.4.1"
     lodash.assign "4.2.0"
     lodash.merge "4.6.2"
     tslib "1.10.0"

diff --git a/test/e2e/wdio.base.conf.js b/test/e2e/wdio.base.conf.js
@@ -23,8 +23,6 @@ module.exports = {
       files: true,
       project: 'test/e2e/scenario/tsconfig.json',
     })
-    // avoid reference error when executing ts files with window references
-    global.window = {}
   },
   onComplete: function() {
     serverProcess.kill()