Merge pull request #839 from bugsnag/bengourley/plugin-lazy-framework…

…-ref plugins: Support obtaining React/Vue reference after Bugsnag.start()
bugsnag · May 14, 2020 · 5410160 · 5410160
2 parents 8d3a4c3 + 8d4c3d4
commit 5410160
Show file tree

Hide file tree

Showing 18 changed files with 270 additions and 139 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,18 @@
 # Changelog
 
+## 7.1.0 (TBD)
+
+This update contains some substantial changes to plugin type definitions. If you are using TypeScript alongside a framework, you may need to make changes to your app. Please refer to the [upgrade guide](./UPGRADING.md).
+
+### Changed
+
+- (plugin-react|plugin-vue): Support late passing of framework reference [#839](https://github.com/bugsnag/bugsnag-js/pull/839)
+
+### Added
+
+- (plugin-react): Add type definitions for `Bugsnag.getPlugin('react')` [#839](https://github.com/bugsnag/bugsnag-js/pull/839)
+- (plugin-vue): Add type definitions for `Bugsnag.getPlugin('vue')` [#839](https://github.com/bugsnag/bugsnag-js/pull/839)
+
 ## 7.0.2 (2020-05-12)
 
 ### Fixed

diff --git a/UPGRADING.md b/UPGRADING.md
@@ -1,6 +1,70 @@
 Upgrading
 =========
 
+## 7.0 to 7.1
+
+This release contains an update to the way the React and Vue plugins work, allowing the reference to the framework to be supplied after Bugsnag has been initialized.
+
+### Types
+
+From a JS perspective, the update is backwards compatible. Despite being compatible at runtime, the change to type definitions will cause a compile error when TypeScript is used in conjunction with `@bugsnag/plugin-react`. The error is straightforward to resolve:
+
+```TypeScript
+// WRONG: return type was 'any', this will now fail to compile
+const ErrorBoundary = Bugsnag.getPlugin('react')
+
+// OK: to use exactly the same logic you will need to cast
+const ErrorBoundary = Bugsnag.getPlugin('react') as unknown as React.Component
+
+// RECOMMENDED: to make use of the provided type definitions, update to the new api
+const ErrorBoundary = Bugsnag.getPlugin('react')!.createErrorBoundary()
+```
+
+_Note the use of the `!` operator._ The `getPlugin('react')` call will only return something if the react plugin was provided to `Bugsnag.start({ plugins: […] })`.
+
+### Plugins
+
+In order to work, The React and Vue plugin both require a reference to the respective framework to be passed in. This was required in the constructor, which meant there was no way to load Bugsnag _before_ the framework. To support this, we now support supplying the framework reference _after_ Bugsnag has started.
+
+Note that the existing usage is still supported.
+
+#### React
+
+```diff
+import Bugsnag from '@bugsnag/js'
+import BugsnagPluginReact from '@bugsnag/plugin-react'
+import * as React from 'react'
+
+Bugsnag.start({
+  apiKey: 'YOUR_API_KEY',
+  plugins: [
+-     new BugsnagPluginReact(React)
++     new BugsnagPluginReact()
+  ]
+})
+
+- const ErrorBoundary = Bugsnag.getPlugin('react')
++ const ErrorBoundary = Bugsnag.getPlugin('react').createErrorBoundary(React)
+```
+
+#### Vue
+
+```diff
+import Bugsnag from '@bugsnag/js'
+import BugsnagPluginVue from '@bugsnag/plugin-vue'
+import Vue from 'vue'
+
+Bugsnag.start({
+  apiKey: 'YOUR_API_KEY',
+  plugins: [
+-     new BugsnagPluginVue(Vue)
++     new BugsnagPluginVue()
+  ]
+})
+
++ Bugsnag.getPlugin('vue').installVueErrorHandler(Vue)
+```
+
 ## 6.x to 7.x
 
 __This version contains many breaking changes__. It is part of an effort to unify our notifier libraries across platforms, making the user interface more consistent, and implementations better on multi-layered environments where multiple Bugsnag libraries need to work together (such as React Native).
@@ -290,7 +354,7 @@ Here are some examples:
   // adding metadata
 - bugsnagClient.notify(err, {
 -   metaData: {
--     component: { 
+-     component: {
 -       instanceId: component.instanceId
 -     }
 -   }

diff --git a/bin/bundle-types b/bin/bundle-types
diff --git a/dockerfiles/Dockerfile.browser b/dockerfiles/Dockerfile.browser
@@ -37,7 +37,7 @@ RUN npm install --no-package-lock --no-save \
 
 # install the dependencies and build each fixture
 WORKDIR /app/test/browser/features/fixtures
-RUN find . -name package.json -type f -mindepth 2 -maxdepth 3 | \
+RUN find . -name package.json -type f -mindepth 2 -maxdepth 3 ! -path "./node_modules/*" | \
   xargs -I % bash -c 'cd `dirname %` && npm install --no-package-lock && npm run build'
 
 # once the fixtures are built we no longer need node_modules and

diff --git a/packages/browser/package.json b/packages/browser/package.json
@@ -2,27 +2,27 @@
   "name": "@bugsnag/browser",
   "version": "7.0.1",
   "main": "dist/bugsnag.js",
-  "types": "dist/types/bugsnag.d.ts",
+  "types": "types/bugsnag.d.ts",
   "description": "Bugsnag error reporter for browser JavaScript",
   "homepage": "https://www.bugsnag.com/",
   "repository": {
     "type": "git",
     "url": "[email protected]:bugsnag/bugsnag-js.git"
   },
   "browser": {
-    "dist/types/bugsnag": "./dist/bugsnag.js"
+    "types/bugsnag": "./dist/bugsnag.js"
   },
   "publishConfig": {
     "access": "public"
   },
   "files": [
-    "dist"
+    "dist",
+    "types"
   ],
   "scripts": {
     "size": "./bin/size",
     "clean": "rm -fr dist && mkdir dist",
-    "bundle-types": "../../bin/bundle-types bugsnag",
-    "build": "npm run clean && npm run build:dist && npm run build:dist:min && npm run bundle-types",
+    "build": "npm run clean && npm run build:dist && npm run build:dist:min",
     "build:dist": "NODE_ENV=production IS_BROWSER=yes ../../bin/bundle src/notifier.js --standalone=Bugsnag | ../../bin/extract-source-map dist/bugsnag.js",
     "build:dist:min": "NODE_ENV=production IS_BROWSER=yes ../../bin/bundle src/notifier.js --standalone=Bugsnag | ../../bin/minify dist/bugsnag.min.js",
     "test:types": "jasmine 'types/**/*.test.js'",
@@ -56,5 +56,8 @@
     "nyc": "^12.0.2",
     "semver": "^5.5.1",
     "typescript": "^3.7.5"
+  },
+  "dependencies": {
+    "@bugsnag/core": "^7.0.1"
   }
 }
diff --git a/packages/expo/package.json b/packages/expo/package.json
@@ -2,7 +2,7 @@
   "name": "@bugsnag/expo",
   "version": "7.0.1",
   "main": "src/notifier.js",
-  "types": "dist/types/bugsnag.d.ts",
+  "types": "types/bugsnag.d.ts",
   "description": "Bugsnag error reporter for Expo applications",
   "keywords": [
     "bugsnag",
@@ -27,14 +27,10 @@
   "files": [
     "src",
     "hooks",
-    "dist"
+    "types"
   ],
   "scripts": {
-    "clean": "rm -fr dist && mkdir dist",
-    "bundle-types": "../../bin/bundle-types bugsnag",
-    "build": "npm run clean && npm run bundle-types",
-    "test:types": "jasmine 'types/**/*.test.js'",
-    "postversion": "npm run build"
+    "test:types": "jasmine 'types/**/*.test.js'"
   },
   "author": "Bugsnag",
   "license": "MIT",

diff --git a/packages/node/package.json b/packages/node/package.json
@@ -2,7 +2,7 @@
   "name": "@bugsnag/node",
   "version": "7.0.1",
   "main": "dist/bugsnag.js",
-  "types": "dist/types/bugsnag.d.ts",
+  "types": "types/bugsnag.d.ts",
   "description": "Bugsnag error reporter for Node.js",
   "homepage": "https://www.bugsnag.com/",
   "repository": {
@@ -13,19 +13,18 @@
     "access": "public"
   },
   "files": [
-    "dist"
+    "dist",
+    "types"
   ],
   "scripts": {
     "clean": "rm -fr dist && mkdir dist",
-    "bundle-types": "../../bin/bundle-types bugsnag",
-    "build": "npm run clean && npm run build:dist && npm run bundle-types",
+    "build": "npm run clean && npm run build:dist",
     "build:dist": "../../bin/bundle src/notifier.js --node --exclude=iserror,stack-generator,error-stack-parser,pump,byline --standalone=bugsnag | ../../bin/extract-source-map dist/bugsnag.js",
     "postversion": "npm run build"
   },
   "author": "Bugsnag",
   "license": "MIT",
   "devDependencies": {
-    "@bugsnag/core": "^7.0.1",
     "@bugsnag/delivery-node": "^7.0.1",
     "@bugsnag/plugin-contextualize": "^7.0.1",
     "@bugsnag/plugin-intercept": "^7.0.1",
@@ -40,6 +39,7 @@
     "nyc": "^12.0.2"
   },
   "dependencies": {
+    "@bugsnag/core": "^7.0.1",
     "byline": "^5.0.0",
     "error-stack-parser": "^2.0.2",
     "iserror": "^0.0.2",

diff --git a/packages/plugin-express/package.json b/packages/plugin-express/package.json
@@ -29,11 +29,11 @@
     "@bugsnag/js": "*"
   },
   "devDependencies": {
-    "@bugsnag/core": "^7.0.1",
     "jasmine": "^3.1.0",
     "nyc": "^12.0.2"
   },
   "dependencies": {
+    "@bugsnag/core": "^7.0.1",
     "iserror": "^0.0.2"
   }
 }
diff --git a/packages/plugin-koa/package.json b/packages/plugin-koa/package.json
@@ -29,11 +29,11 @@
     "@bugsnag/js": "*"
   },
   "devDependencies": {
-    "@bugsnag/core": "^7.0.1",
     "jasmine": "^3.1.0",
     "nyc": "^12.0.2"
   },
   "dependencies": {
+    "@bugsnag/core": "^7.0.1",
     "iserror": "^0.0.2"
   }
 }
diff --git a/packages/plugin-react/package.json b/packages/plugin-react/package.json
@@ -4,7 +4,7 @@
   "main": "dist/bugsnag-react.js",
   "description": "React integration for @bugsnag/js",
   "browser": "dist/bugsnag-react.js",
-  "types": "dist/types/bugsnag-plugin-react.d.ts",
+  "types": "types/bugsnag-plugin-react.d.ts",
   "homepage": "https://www.bugsnag.com/",
   "repository": {
     "type": "git",
@@ -14,17 +14,17 @@
     "access": "public"
   },
   "files": [
-    "dist"
+    "dist",
+    "types"
   ],
   "scripts": {
     "clean": "rm -fr dist && mkdir dist",
-    "bundle-types": "../../bin/bundle-types bugsnag-plugin-react",
-    "build": "npm run clean && ../../bin/bundle src/index.js --standalone=BugsnagPluginReact | ../../bin/extract-source-map dist/bugsnag-react.js && npm run bundle-types",
+    "build": "npm run clean && ../../bin/bundle src/index.js --standalone=BugsnagPluginReact | ../../bin/extract-source-map dist/bugsnag-react.js",
     "postversion": "npm run build"
   },
   "author": "Bugsnag",
   "license": "MIT",
-  "devDependencies": {
+  "dependencies": {
     "@bugsnag/core": "^7.0.1"
   }
 }