javascript - 通过 Facebook Webview 查看时 React 应用程序崩溃

Question

遇到一个奇怪的问题，我们的网站可以在所有移动设备和浏览器上运行，但在 Android 移动设备上通过 Facebook 或 Instagram 的 webview 访问时崩溃(iPhone 可以)。例如，当通过 Facebook、Instagram 简介访问该网站或通过 Messenger 发送该网站时。

似乎没有任何信息或方法来调试它。

我们正在使用 React 和 Webpack。

这是我们的 package.json

`

{
  "name": "omnious.com",
  "version": "2.0.0",
  "private": true,
  "description": "Homepage for Omnious",
  "homepage": "https://bitbucket.org/omniousstudio/omnious.com",
  "author": "Omnious Dev Team <dev@omnious.com> (https://www.omnious.com)",
  "license": "UNLICENSED",
  "repository": {
    "type": "git",
    "url": "git+https://bitbucket.org/omniousstudio/omnious.com.git"
  },
  "bugs": {
    "url": "https://bitbucket.org/omniousstudio/omnious.com/issues"
  },
  "keywords": [
    "omnious"
  ],
  "main": "app",
  "scripts": {
    "analyze": "node scripts/analyze.js",
    "build": "node scripts/build.js",
    "dev": "node scripts/dev.js",
    "start": "node app"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "chalk": "^2.1.0",
    "compression-webpack-plugin": "^1.0.0",
    "dotenv": "^4.0.0",
    "express": "^4.15.4",
    "happypack": "^4.0.0-beta.5",
    "html-webpack-plugin": "^2.30.1",
    "koa": "^2.3.0",
    "koa-bodyparser": "^4.2.0",
    "koa-compress": "^2.0.0",
    "koa-helmet": "^3.2.0",
    "koa-router": "^7.2.1",
    "koa-static": "^4.0.1",
    "mailchimp-api-v3": "^1.7.0",
    "morgan": "^1.8.2",
    "offline-plugin": "^4.8.3",
    "ora": "^1.3.0",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-copy-to-clipboard": "^5.0.0",
    "react-dev-utils": "^4.0.1",
    "react-dom": "^15.6.1",
    "react-helmet": "^5.2.0",
    "react-intl": "^2.3.0",
    "react-modal": "^2.2.4",
    "react-redux": "^5.0.6",
    "react-remarkable": "^1.1.1",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "redux-saga": "^0.15.6",
    "rimraf": "^2.6.1",
    "styled-components": "^2.1.2",
    "webpack": "^3.5.6",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-md5-hash": "^0.0.5",
    "webpack-merge": "^4.1.0",
    "winston": "^2.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "eslint": "^4.6.1",
    "eslint-config-omnious": "^0.2.3",
    "eslint-config-omnious-react": "^0.2.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.3.0",
    "file-loader": "^0.11.2",
    "nodemon": "^1.12.0",
    "url-loader": "^0.5.9"
  }
}

`

Answer 1

万一其他人遇到这个问题，问题是我们在 React 中使用了 SVG 的对象标签。 Facebook 的 Android 浏览器不支持对象标签并且会崩溃。